所見即所得的 UI 字串截斷檢查方法

陳海燕 ，郭云輝， 錢開源

（1．北京文思海輝軟件技術有限公司，北京100085；2．無錫文思海輝信息技術有限公司，江蘇 無錫214135）

近年來，隨著國內經濟發展和經濟全球化日益加深，以及國家“一帶一路”戰略布局的實施，國內越來越多的企業不再局限于國內市場，而是主動走出國門，進入全球市場。尤其在信息技術、計算機領域，涌現了一批優秀的企業在海外市場大放異彩，例如小米、字節跳動、華為等公司在海外市場布局了從消費電子、社交應用到網絡通信硬件設備的各類產品。對于這些出海產品而言，首先面臨的阻礙就是不同語言文化隔閡。因此，除了產品本身的優秀設計以外，一個易于當地民眾理解的操作界面就顯得至關重要。同時，在激烈的市場競爭格局下，各軟件產品往往快速迭代更新，推陳出新，以不斷貼合用戶需求。這就需要一個高效敏捷的軟件本地化流程為其保駕護航。

1.研究背景

控件是用戶界面（User Interface，UI）上的一切元素，例如窗口標題、標簽（Label）、文本框、列表框、下拉列表框、組合下拉列表框、復選框、單選框、按鈕等等。在軟件開發中，部分用戶界面控件大小通常受限于用戶界面面積和布局。例如，控件中文本內容過長，將會導致文本超出控件的文本顯示范圍而造成文本截斷或互相遮蓋的問題。下圖所示的是正常用戶界面和存在截斷問題的用戶界面。

正常的用戶界面

字串截斷的用戶界面

傳統技術中，通常在軟件開發中就會安排對這類問題進行檢測的質量保證流程。但是，當對已開發成熟的軟件進行本地化制作時，例如將原始英文版本的軟件制作成對應的中文版時，通常并不會對軟件從頭開始開發，而是采用翻譯原始版本的字串的方式。由于語言特性，譯文可能會存在長于原文的情況。因此，當譯文導入到軟件界面的控件中時，同樣會產生文本截斷或互相遮蓋的問題。針對此問題，通常在本地化制作的語言驗證測試（Lingustic Verify Test，LVT）階段來檢測該問題，如測試確定存在超限情況，則將退回給譯員進行修改調整。例如譯員可以通過減少文本內容的字符數量等來避免這類問題的產生。然而，由于譯員無法獲取含有該文本內容的實際軟件的用戶界面，以及不同語言的顯示格式或顯示效果可能不同，使得譯員無法準確評估文本內容所占實際的空間大小，通常需要在多個檢測-更改回合之后才能解決問題，降低了工作效率。因而在傳統的軟件本地化過程中，面對出現大量的界面字串截斷問題，需要花費大量時間和成本來發現并修復這些問題，從而延后了產品發布日期和推高了產品開發費用。為此，有必要針對上述技術問題，提供一種能夠高效檢查 UI字串截斷問題的方法。

2.新方案

經過分析，為了有效減少 LVT 階段退回率，需要在翻譯階段攔截大部分截斷問題。即不用等到 LVT 階段查看軟件界面實際顯示效果，而是提前到翻譯階段通過模擬實際控件顯示效果，直觀展示截斷情形，以利于譯員準確評估譯文所占實際空間大小，選用合適長度的譯文，從而避免出現截斷問題。我們采用HTML DIV 元素來模擬界面控件的顯示效果。

一是獲取檢查條件。從翻譯要求或字串表文件中提取出檢查條件。軟件產品中，控件的文本顯示區域寬高尺寸一般由像素值定義，此時可以直接取用該數值。有時客戶（軟件開發商）會以字符數和行數來限定文本顯示區域大小。對于字符數寬度而言，因為（各語言的）各字母寬度不一，所以實踐中轉用相應數量字符 A 所占的像素寬度。二是占位定限層。此層用于確定所模擬控件的顯示區域尺寸。如果檢測條件采用像素值寬度和高度，則可直接作為占位定限層的寬度和高度使用。如果檢測條件采用字符數寬度和/或行數高度，則需要通過文本填充以確定顯示區域的像素尺寸。因為文字占據空間大小受文本格式（字體、字號、行距等）影響，為了獲得正確的尺寸，需要設置字體格式為模擬控件使用的實際字體格式；同時為了確保正常顯示各類白字符，還需設置折行方式為 pre-wrap，以便保留空白。例如，若指定了字符數寬度，則在此層中填充指定數量的字符 A；若指定了行數高度，則在此層中再填充 指定行數-1 個回車符。此時，獲取此 DIV 的寬高像素值即為所模擬控件的最大顯示區域尺寸。例如，檢測條件 28 字符 X 5 行：

此時，此層的寬高像素值即為對應檢測條件所允許的顯示區域尺寸。三是實際填充層。此層用于填充實際文本，用于確定是否超出顯示區域，即是否出現截斷問題。設置寬度為占位定限層的寬度，高度自適應文本。因為文本格式（字體、字號、行距等）會影響文字大小。同樣，為了正確獲得實際文本占用區域，需要設置字體格式為模擬控件所使用的實際字體格式；還需設置折行方式為 pre-wrap。例如：