APP下载

所见即所得的 UI 字串截断检查方法

2021-08-01陈海燕郭云辉钱开源

科技经济导刊 2021年20期
关键词:用户界面译员控件

陈海燕 ,郭云辉, 钱开源

(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。例如:

为了突出显示超限范围,可另设背景色为警告色,例如红色。

比较实际填充层和占位定限层的高度,若前者大于后者,则可判定超限。四是友好参照层。此层作为可视参照标准,可向译员直观展示超限程度。设置宽度为占位定限层的宽度,高度自适应文本;设置高度为占位定限层的高度,并将其叠加于实际填充层上方。若存在超限问题,即实际填充层高度大于占位定限层高度。那么实际填充层超限部分就会露出,其警告色将引起译员的明显注意。因为参照层的遮盖,译文显示不再完整,甚至字符本身也不完整。为改进此不良的阅读体验,将填充实际文本以展现完整内容。未超限的内容将与实际填充层重合;而超限部分,仍然会露出。在视觉上,两者会组合成完成的字符,以完整呈现文本内容。超限部分仍然会具有警告背景色,向译员提示超限范围。

方案示意图如图所示:

3.实施案例

依据检查条件的高宽定义的不同方式,共有四种组合方式:一是像素宽度 * 像素高度:

二是像素宽度 * 行数高度:

三是字符数宽度 * 像素高度:

四是字符数宽度 * 行数高度:

4.结论

本方案的优势表现为基于 HTML DIV 元素模拟控件的显示效果。所见即所得的方式直观呈现超限程度,便于译员调整译文以符合要求。支持像素值或字符数/行数定义检查区域大小,灵活性强,适应绝大多数控件的截断检查要求,可应用于多种软件的本地化服务。基于 HTML 的解决方案,天然适用于各在线翻译云平台,具有易于移植的特点,可配合在线翻译编辑器使用,可实现随翻随检的即时检查模式。采用 HTML DIV 元素模拟控件,借助浏览器渲染实现所见及所得的显示效果。避免了自行实现渲染字体格式,计算折行位置等功能。有效降低了开发难度和复杂度,利于实施。本方案的效果表现为在若干个实际软件本地化项目中,应用此方案后,我们发现 LVT 阶段因截断问题而退回的字串·次数下降了 95%,从而大幅减少了相关的 bug 修复和测试时间,大大缩短了整个软件本地化的周期,有效降低了软件本地化成本,促进了敏捷本地化的实施。本方案的不足表现为对 5% 仍出现截断问题的字串进行分析后,我们发现最主要的原因是软件本身使用了其非他 HTML 技术渲染文本,与 HTML 模拟结果不一致:文本占用区域会有一定的细微偏差(±2% 以内)。而这些字串在 HTML 模拟结果中往往临界,没有被检出截断问题,但在实际软件界面中,因为多出1-5 个像素而被检出。其次为字体版本不同。设计文档注明的字体与软件实际使用的字体不符。

猜你喜欢

用户界面译员控件
基于C++Builder 的电子邮件接收程序设计*
使用“填表单”微信小程序 统计信息很方便
中医口译的难点与处理策略探究
基于.net的用户定义验证控件的应用分析
微软新专利展示可折叠手机设计
物联网用户界面如何工作
口译中的“现场学习”
口译中的“陷阱”
计算机软件用户界面设计分析
译员扮演何种角色?