针对双向文本设计应用Design your app for bidirectional text

设计应用,使其提供双向文本支持(双向),以便组合从右到左 (RTL) 和从左到右 (LTR) 写入系统的脚本,这些系统通常包含不同类型的字母。Design your app to provide bidirectional text support (BiDi) so that you can combine script from right to left (RTL) and left to right (LTR) writing systems, which generally contain different types of alphabets.

从右到左写入系统(如在中东、中亚和南亚及非洲使用的系统)具有独特的设计要求。Right-to-left writing systems, such as those used in the Middle East, Central and South Asia, and in Africa, have unique design requirements. 这些写入系统要求双向文本支持(双向)。These writing systems require bidirectional text support (BiDi). 双向支持是指能够按照从右到左 (RTL) 或从左到右 (LTR) 的顺序输入和显示文本布局。BiDi support is the ability to input and display text layout in either right to left (RTL) or left to right (LTR) order.

Windows 共包含 9 种双向语言。A total of nine BiDi languages are included with Windows.

  • 两种完全本地化的语言。Two fully localized languages. 阿拉伯语和希伯来语。Arabic, and Hebrew.
  • 7 个用于新兴市场的语言界面包。Seven Language Interface Packs for emerging markets. 波斯语、乌尔都语、达里语、中库尔德语、信德语、旁遮普语(巴基斯坦)和维吾尔语。Persian, Urdu, Dari, Central Kurdish, Sindhi, Punjabi (Pakistan), and Uyghur.

本主题包括 Windows 双向设计理念,以及展示双向设计注意事项的案例研究。This topic contains the Windows BiDi design philosophy, and case studies that show BiDi design considerations.

双向设计元素Bidi design elements

有 4 个元素会影响 Windows 中的双向设计决策。Four elements influence BiDi design decisions in Windows.

  • 用户界面 (UI) 镜像User interface (UI) mirroring. 用户界面 (UI) 排列允许从右到左的内容按其原始布局显示。User interface (UI) flow allows right-to-left content to be presented in its native layout. UI 设计需能够打造双向市场的本地体验。UI design feels local to BiDi markets.
  • 用户体验一致性Consistency in user experience. 从右到左方向的设计感觉更自然。The design feels natural in right-to-left orientation. UI 元素共享一致的布局方向,并按照用户的预期显示。UI elements share a consistent layout direction and appear as the user expects them.
  • 触控优化Touch optimization. 与非镜像 UI 中的触控 UI 类似,各元素使用方便,触控交互也很自然。Similar to touch UI in non-mirrored UI, elements are easy to reach, and they natural to touch interaction.
  • 混合文本支持Mixed text support. 文本方向支持可实现出色的混合文本呈现(双向版本中有英语文本,反之亦然)。Text directionality support enables great mixed text presentation (English text on BiDi builds, and vice versa).

功能设计概述Feature design overview

Windows 支持 4 种双向设计元素。Windows supports the four BiDi design elements. 我们来看看 Windows 中的一些主要相关功能,并提供一些关于这些功能如何影响应用的内容。Let's look at some of the major relevant features in Windows, and provide some context around how they affect your app.

Windows 调整排字网格的方向,使其从右到左排列,这意味着网格上的第一个磁贴会放置在右上角,最后一个磁贴放置在左下角。Windows adjusts the direction of the typographic grid so that it flows from right to left, meaning that the first tile on the grid is placed at the top right corner, and the last tile at the bottom left. 这与书籍、杂志等印刷出版物(其阅读模式始终从右上角开始,向左排列)的 RTL 模式匹配。This matches the RTL pattern of printed publications such as books and magazines, where the reading pattern always starts at the top right corner and progresses to the left.

双向开始菜单  与超级按钮的 "开始" 菜单BiDi start menu BiDi start menu with charms

为了保持一致的 UI 排列,磁贴上的内容保留了从右到左的布局,这意味着无论应用 UI 语言如何,应用名称和徽标都位于磁贴的右下角。To preserve a consistent UI flow, content on tiles retain a right-to-left layout, meaning that the app name and logo are positioned at the bottom right corner of the tile regardless of the app UI language.

双向磁贴BiDi tile

双向磁贴

英语磁贴English tile

英语磁贴

获取正确读取的磁贴通知Get tile notifications that read correctly

磁贴支持混合文本。Tiles have mixed text support. 通知区域具有根据通知语言调整文本对齐方式的内置灵活性。The notification region has built-in flexibility to adjust the text alignment based on the notification language. 应用发送阿拉伯语、希伯来语或其他双向语言通知时,文本向右对齐。When an app sends Arabic, Hebrew, or other BiDi language notifications, the text is aligned to the right. 英语(或其他 LTR)通知到达时,文本向左对齐。And when an English (or other LTR) notification arrives, it will align to the left.

磁贴通知

易于触控的一致 RTL 用户体验A consistent, easy-to-touch RTL user experience

Windows UI 中的每个元素都适合 RTL 方向。Every element in the Windows UI fits into the RTL orientation. 超级按钮和浮出控件位于屏幕的左边缘,这样它们就不会与搜索结果重叠或削弱触控优化。Charms and flyouts have been positioned on the left edge of the screen so that they don't overlap search results or degrade touch optimization. 可用拇指轻松地点击它们。They can be easily reached with the thumbs.

双向屏幕截图,显示 "搜索" 浮出控件大小 Screenshot of BiDi showing the search flyout resized Screenshot of BiDi showing the print flyout resized

双向屏幕截图,显示 "设置" 浮出大小显示  应用栏的双向屏幕Screenshot of BiDi showing the settings flyout resized Screenshot of BiDi showing the app bars resized

任意方向的文本输入Text input in any direction

Windows 提供一个干净整洁的屏幕触摸键盘。Windows offers an on-screen touch keyboard that is clean and clutter-free. 对于双向语言,有一个文本方向控件键,这样可以根据需要切换文本输入方向。For BiDi languages, there is a text direction control key so that the text input direction can be switched as needed.

双向语言的触摸键盘

以任意语言使用任意应用Use any app in any language

以任意语言安装和使用最喜欢的应用。Install and use your favorite apps in any language. 应用的显示和功能与其在非双向版本 Windows 上的显示和功能相同。The apps appear and function as they would on non-BiDi versions of Windows. 应用内的元素始终放置于可预测的一致位置上。Elements within apps are always placed in a consistent and predictable position.

显示双向内容的英语应用

正确显示圆括号Display parentheses correctly

随着双向圆括号算法 (BPA) 的引入,无论语言或文本对齐属性如何,成对的圆括号始终可以正确显示。With the introduction of the BiDi Parenthesis Algorithm (BPA), paired parentheses always display properly regardless of language or text alignment properties.

错误的圆括号Incorrect parentheses

圆括号错误的双向应用

正确的圆括号Correct parentheses

圆括号正确的双向应用

版式Typography

Windows 为所有双向语言使用 Segoe UI 字体。Windows uses the Segoe UI font for all BiDi languages. 这种字体针对 Windows UI 设计,并且可缩放。This font is shaped and scaled for the Windows UI.

显示 "开始" 屏幕屏幕截图上的 Segoe UI 字体的屏幕截图  ,显示 "开始" 屏幕上的 Microsoft yahei 阿拉伯字体Screenshot showing the Segoe UI font on the start screen Screenshot showing the Segoe Arabic font on the start screen

案例研究 #1:双向音乐应用Case study #1: A BiDi music app

概述Overview

多媒体应用会带来一项非常有趣的设计挑战,因为媒体控件通常应该具有与非双向语言类似的从左到右的布局。Multimedia apps make for a very interesting design challenge, because media controls are generally expected to have a left-to-right layout similar to that of non-BiDi languages.

媒体控件(从左到右)

从右到左媒体控件

建立 UI 方向性Establishing UI directionality

保持从右到左的 UI 流对于双向市场中的设计一致性十分重要。Retaining the right-to-left UI flow is important for consistent design for BiDi markets. 在此上下文中添加具有从左到右流向的元素比较困难,这是因为一些导航元素(如“后退”按钮)可能与音频控件中“后退”按钮的方向冲突。Adding elements that have left-to-right flow within this context is difficult, because some navigational elements such as the back button may contradict the directional orientation of the back button in the audio controls.

音乐应用跟踪页面

此音乐应用保留从右到左方向的网格。This music app retains a right-to-left-oriented grid. 这让已按照此方向浏览 Windows UI 的应用用户感觉非常自然。This gives the app a very natural feel for users who already navigate in this direction across the Windows UI. 流是通过以下方式保持的:确保主要元素不但按从右到左的顺序排序而且在节标题中正确对齐,以帮助维护 UI 流。The flow is retained by ensuring that the main elements are not just ordered from right to left, but also aligned properly in the section headers to help maintain the UI flow.

音乐应用唱片集页面

文本处理Text handling

以上屏幕截图中的艺术家个人简介采用左对齐,而其他与艺术家相关的文本片段(如唱片集和曲目名称)保持右对齐。The artist bio in the screenshot above is left-aligned, while other artist-related text pieces such as album and track names preserve right alignment. 个人简介字段是一个相当大的文本元素,向右对齐时阅读效果不佳,因为阅读较宽的文本块时难以在行之间跟踪。The bio field is a fairly large text element, which reads poorly when aligned to the right simply because it's hard to track between the lines while reading a wider text block. 通常,对于任何文本元素,只要包含五个或五个以上字词的行超过两行或三行,就要考虑是否会出现类似的对齐异常,其中文本块对齐方式与总体应用方向布局的对齐方式相反。In general, any text element with more than two or three lines containing five or more words should be considered for similar alignment exceptions, where the text block alignment is opposite to that of the overall app directional layout.

在整个应用中设置对齐方式看似很简单,但经常暴露出呈现引擎在跨双向字符串放置中性字符时的某些限制和局限。Manipulating the alignment across the app can look simple, but it often exposes some of the boundaries and limitations of the rendering engines in terms of neutral character placement across BiDi strings. 例如,以下字符串的显示形式可能因对齐方式而异。For example, the following string can display differently based on alignment.

英语字符串 (LTR)English String (LTR) 希伯来语字符串 (RTL)Hebrew String (RTL)
左对齐Left-alignment Hello, World!Hello, World! בוקר טוב!בוקר טוב!
右对齐Right-alignment !Hello, World!Hello, World !בוקר טוב!בוקר טוב

要确保艺术家信息正确地显示在音乐应用中,开发团队将文本布局属性与对齐分开。To ensure that artist information is properly displayed across the music app, the development team separated text layout properties from alignment. 换言之,在许多情况下,艺术家信息可能会显示为右对齐,但字符串布局调整是基于自定义后台处理设置的。In other words, the artist info might be displayed as right-aligned in many of the cases, but the string layout adjustment is set based on customized background processing. 后台处理根据字符串的内容确定最佳方向布局设置。The background processing determines the best directional layout setting based on the content of the string.

音乐应用艺术家页面

例如,如果没有自定义字符串布局处理,则艺术家姓名“The Contoso Band.”For example, without custom string layout processing, the artist name "The Contoso Band." 会显示为“.The Contoso Band”。would appear as ".The Contoso Band".

专用字符串方向预处理Specialized string direction preprocessing

应用与服务器取得联系以获取媒体元数据时,会先对每个字符串进行预处理,然后再向用户显示。When the app contacts the server for media metadata, it preprocesses each string prior to displaying it to the user. 在此预处理过程中,应用还会进行转换,使文本方向一致。During this preprocessing, the app also does a transformation to make the text direction consistent. 为此,应用会检查字符串末尾是否存在中性字符。To do this, it checks whether there are neutral characters on the ends of the string. 此外,如果字符串的文本方向与 Windows 语言设置中的应用方向相反,则会在后面附加(有时在前面追加)Unicode 方向标记。Also, if the text direction of the string is opposite to the app direction set by the Windows language settings, then it appends (and sometimes prepends) Unicode direction markers. 转换函数如下所示。The transformation function looks like this.

string NormalizeTextDirection(string data) 
{
    if (data.Length > 0) {
        var lastCharacterDirection = DetectCharacterDirection(data[data.Length - 1]);

        // If the last character has strong directionality (direction is not null), then the text direction for the string is already consistent.
        if (!lastCharacterDirection) {
            // If the last character has no directionality (neutral character, direction is null), then we may need to add a direction marker to
            // ensure that the last character doesn't inherit directionality from the outside context.
            var appTextDirection = GetAppTextDirection(); // checks the <html> element's "dir" attribute.
            var dataTextDirection = DetectStringDirection(data); // Run through the string until a non-neutral character is encountered,
                                                                 // which determines the text direction.

            if (appTextDirection != dataTextDirection) {
                // Add a direction marker only if the data text runs opposite to the directionality of the app as a whole,
                // which would cause the neutral characters at the ends to flip.
                var directionMarkerCharacter =
                    dataTextDirection == TextDirections.RightToLeft ?
                        UnicodeDirectionMarkers.RightToLeftDirectionMarker : // "\u200F"
                        UnicodeDirectionMarkers.LeftToRightDirectionMarker; // "\u200E"

                data += directionMarkerCharacter;

                // Prepend the direction marker if the data text begins with a neutral character.
                var firstCharacterDirection = DetectCharacterDirection(data[0]);
                if (!firstCharacterDirection) {
                    data = directionMarkerCharacter + data;
                }
            }
        }
    }

    return data;
}

添加的 Unicode 字符宽度为零,因此不会影响字符串间距。The added Unicode characters are zero-width, so they don't impact the spacing of the strings. 此代码可能会对性能产生负面影响,因为检测字符串方向需要对整个字符串进行检测,除非遇到非中性字符。This code carries a potential performance penalty, since detecting the direction of a string requires running through the string until a non-neutral character is encountered. 首先还会对要检查其是否为中性的每个字符与几个 Unicode 范围进行比较,因此这是一项重要检查。Each character that's checked for neutrality is first compared against several Unicode ranges as well, so it isn't a trivial check.

案例研究 #2:双向邮件应用Case study #2: A BiDi mail app

概述Overview

在 UI 布局要求方面,邮件客户端的设计相当简单。In terms of UI layout requirements, a mail client is fairly simple to design. 默认对 Windows 中的邮件应用进行镜像。The Mail app in Windows is mirrored by default. 从文本处理角度来看,邮件应用需要具有更强大的文本显示和组合功能才能适应混合文本场景。From a text-handling perspective the mail app is required to have more robust text display and composition capabilities in order to accommodate mixed text scenarios.

建立 UI 方向性Establishing UI directionality

对邮件应用的 UI 布局进行镜像。The UI layout for the Mail app is mirrored. 三个窗格已进行重定向,使文件夹窗格位于屏幕的右边缘,然后其左侧依次是邮件项目列表窗格、电子邮件组合窗格。The three panes have been reoriented so that the folder pane is positioned on the right edge of the screen, followed by the mail item list pane to the left, and then the email composition pane.

镜像的邮件应用

其他项目已进行重定向,使其匹配整个 UI 排列和触控优化。Additional items have been reoriented to match the overall UI flow, and touch optimization. 这些项目包括应用栏及撰写、回复和删除图标。These include the app bar and the compose, reply, and delete icons.

通过应用栏镜像的邮件应用

文本处理Text Handling

UIUI

UI 中的文本对齐方式通常为右对齐。Text alignment across the UI is usually right-aligned. 其中包括文件夹窗格和项目窗格。This includes the folder pane and items pane. 项目窗格限于两行文本(地址和标题)。The item pane is limited to two lines of text (Address, and Title). 若要在内容方向与 UI 方向排列相反时保留从右到左的对齐方式,而不引入难以阅读的文本块,这一点非常重要。This is important for retaining the right-to-left alignment, without introducing a block of text that would be difficult to read when the content direction is opposite to the UI direction flow.

文本编辑Text Editing

文本编辑要求能够以从右到左和从左到右的形式进行组合。Text editing requires the ability to compose in both right-to-left and left-to-right form. 此外,必须通过使用富文本等能够保存方向信息的格式保留组合布局。In addition, the composition layout must be preserved by using a format—such as rich text—that has the ability to save directional information.

邮件应用(从左到右)

邮件应用(从右到左)