双方向テキストに対応したアプリを設計するDesign your app for bidirectional text

通常はさまざまな種類のアルファベットを含む、右から左方向 (RTL) および左から右方向 (LTR) 書記体系のスクリプトを組み合わせることができるように、双方向テキスト サポート (BiDi) を備えたアプリを設計します。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). 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 種類の BiDi 言語が含まれています。A total of nine BiDi languages are included with Windows.

  • 完全にローカライズされた 2 つの言語。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 に関する BiDi 対応の設計哲学を紹介し、BiDi 対応の設計時の考慮事項を示すケース スタディを取り上げます。This topic contains the Windows BiDi design philosophy, and case studies that show BiDi design considerations.

BiDi 対応の設計要素Bidi design elements

4 つの要素が、Windows の BiDi に関する設計上の決定に影響を与えます。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 デザインが BiDi 市場に対してローカルなものになります。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 によく似た、簡単で自然なタッチによる対話式操作で UI 要素を操作できるようにします。Similar to touch UI in non-mirrored UI, elements are easy to reach, and they natural to touch interaction.
  • 混在テキストのサポートMixed text support. テキスト方向のサポートにより、混在テキストを美しく表示できます (BiDi ビルドに英語のテキストを表示、または英語ビルドに BiDi テキストを表示)。Text directionality support enables great mixed text presentation (English text on BiDi builds, and vice versa).

機能設計の概要Feature design overview

Windows は、4 つの BiDi 対応の設計要素をサポートしています。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 BiDi チャームに [スタート] メニュー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 対応のタイルBiDi tile

BiDi 対応のタイル

英語のタイル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. アプリでアラビア語、ヘブライ語などの BiDi 言語の通知を送信する場合、テキストは右揃えに調整されます。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.

双方向のスクリーン ショット 双方向のスクリーン ショットBiDi screenshot BiDi screenshot

双方向のスクリーン ショット 双方向のスクリーン ショットBiDi screenshot BiDi screenshot

任意の方向へのテキスト入力Text input in any direction

Windows には、すっきり整理されたスクリーン タッチ キーボードが備わっています。Windows offers an on-screen touch keyboard that is clean and clutter-free. BiDi 言語の場合、テキスト方向のコントロール キーがあるため、テキスト入力の方向を必要に応じて切り替えることができます。For BiDi languages, there is a text direction control key so that the text input direction can be switched as needed.

BiDi 言語用のタッチ キーボード

任意の言語でのアプリの使用Use any app in any language

任意の言語でお気に入りのアプリをインストールして使うことができます。Install and use your favorite apps in any language. アプリは、BiDi 対応ではないバージョンの 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.

BiDi コンテンツを表示する英語のアプリ

かっこの正しい表示Display parentheses correctly

BiDi Parenthesis Algorithm (BPA) を導入すると、言語やテキスト配置の方向に関係なく、ペアになったかっこは常に正しく表示されます。With the introduction of the BiDi Parenthesis Algorithm (BPA), paired parentheses always display properly regardless of language or text alignment properties.

不適切なかっこIncorrect parentheses

不適切なかっこを表示している BiDi アプリ

適切なかっこCorrect parentheses

適切なかっこを表示している BiDi アプリ

文字体裁Typography

Windows では、Segoe UI フォントを使ってすべての BiDi 言語に対応しています。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 UI フォントSegoe UI font for BiDi language Segoe UI font for BiDi language

ケース スタディ 1:双方向のミュージック アプリCase study #1: A BiDi music app

概要Overview

マルチメディア アプリは、非常に興味深い設計上の問題を提起します。一般にメディア コントロールは、BiDi 以外の言語の場合と同様の左から右のレイアウトであることが想定されているためです。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

BiDi 市場向けの設計で一貫性を確保するためには、右から左への 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. 一般に、5 つ以上の語句を含む行が 3 行以上あるテキスト要素で、同様の位置揃えの例外を考慮する必要があります。この場合、テキスト ブロックの位置揃えがアプリの全体的な方向レイアウトとは逆になります。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.

アプリ全体の位置揃えの操作は単純そうに見えますが、多くの場合、BiDi 文字列におけるニュートラル文字の配置の点で、レンダリング エンジンの限界や制限を伴います。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 文字は幅が 0 であるため、文字列の間隔に影響を与えることはありません。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. 3 つのウィンドウが配置し直され、フォルダー ウィンドウは画面の右端に配置され、メール項目一覧ウィンドウがその左に続き、さらにその左にメール作成ウィンドウが配置されます。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. 項目ウィンドウはテキスト 2 行に制限されます (アドレスとタイトル)。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.

メール アプリ (左から右)

メール アプリ (右から左)