將您的應用程式設計為支援雙向文字Design your app for bidirectional text

設計您的應用程式,使其提供雙向文字支援 (BiDi),以結合由右至左 (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. 這些書寫系統需要雙向文字支援 (BiDi)。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 內含九種雙向語言。A total of nine BiDi languages are included with Windows.

  • 兩種已完整當地語系化的語言。Two fully localized languages. 阿拉伯文和希伯來文。Arabic, and Hebrew.
  • 七種適用於新興市場的語言介面套件。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

四種元素會影響 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 支援四種雙向設計元素。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. 針對雙向語言,其中還具備了文字方向 Ctrl 鍵,可隨需要切換。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 字型  顯示 [開始] 畫面上的 [Segoe 阿拉伯文] 字型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. 此外,撰寫配置必須要能藉由使用可儲存方向資訊的格式—例如 RTF 文字—進行保留。In addition, the composition layout must be preserved by using a format—such as rich text—that has the ability to save directional information.

由左至右的郵件應用程式

由右至左的郵件應用程式