入れ子になったHTMLテキストでは、各フレーズが隣接するテキストに影響を与えずに独自の方向を保つ必要がある場合、分離を選びます。周囲のテキストとの相互作用を意図している場合に限って埋め込みを使い、デザイン上、文字の順序を強制する必要が明確にある場合はオーバーライドを使います。

このガイドでは、MacでHTMLページを編集する人が適切な仕組みを選び、入れ子になったラベルや句読点を保ち、デスクトップブラウザーで結果を確認する方法を説明します。例には、架空のラベル、数字、幾何学文字を使っています。

レイアウト作業にはどの仕組みが適していますか？

まず、次の2点を確認します。フレーズ内でブラウザーに通常の双方向テキストの並び順を適用させるか、また、そのフレーズが周囲のテキストの並び順に影響するか。この2つの判断を、次の実用的な比較表にまとめました。MDNのunicode-bidiリファレンスでは、基礎となるCSSの動作を説明しています。

要件 仕組み 推奨されるHTMLの方法
方向が既知のフレーズに独自の境界を設ける 分離 dir="ltr"またはdir="rtl"を指定した既存のインライン要素
方向が不明なフレーズを分離する 自動方向判定による分離 bdi、またはdir="auto"を指定した既存のインライン要素
周囲のテキストの並び順にも影響する方向スコープを作る 埋め込み unicode-bidi: embedを使う特殊なCSSケース
結果を分離しながら文字の並びを強制する 分離付きオーバーライド bdoと明示的なdir="ltr"またはdir="rtl"
周囲のテキストとの相互作用を保ちながら文字の並びを強制する 非分離オーバーライド unicode-bidi: bidi-overrideを使う特殊なCSSケース

通常のHTML作成では、まず方向を示すマークアップを使います。W3Cは、方向が逆の各フレーズをその範囲にぴったり合うように囲み、入れ子になったフレーズは入れ子のマークアップで表現することを推奨しています。これにより、意図した境界が文書内で明確になります。W3C: HTMLにおけるインラインマークアップと双方向テキスト。

分離したテキストを入れ子にするには、どうマークアップすればよいですか？

完全なフレーズごとに、独自の方向境界を設定します。既存のインライン要素がそのフレーズだけを正確に含んでいる場合は、そこにdirを追加します。そうでなければ、spanを挿入します。フレーズに属する句読点はラッパーの内側に置き、周囲の文の句読点は外側に置きます。W3Cはこれを、フレーズを「ぴったりと囲む」と表現しています。W3Cのインラインマークアップのガイダンス。

右から左に進むことを意図した合成図形ラベルに、左から右へ読む識別子が含まれる場合、構造は次の例のようになります。

<p dir="ltr">
  Tile <span dir="rtl">● <span dir="ltr">A1 + B2</span> ■</span>: 12 items.
</p>

ここには意図的に3つのスコープがあります。外側の文、図形の並び、入れ子になった識別子です。カウントは文に属するため、図形の並びの外側に置きます。外側のフレーズだけをマークアップすると、内側の識別子には独自の明示的な境界が設定されません。この入れ子構造は、方向が変わる箇所についてW3Cが推奨する構造に沿っています。W3Cの入れ子フレーズに関するガイダンス。

挿入するラベルの方向が不明な場合、bdiを使うと分離され、自動方向判定が既定で適用されます。dirのない通常のspanには、同じ既定の動作がありません。WHATWGの仕様では、bdiは通常の方法で方向を継承するのではなく、既定でautoになります。HTML Standard: bdi要素。

自動方向判定は、入れ子になった方向指定要素に関する定められた除外条件を適用したうえで、最初の強い方向性を持つ文字を基準にするヒューリスティックです。ラベルの意図までは理解しません。そのため、A1で始まるラベルは、後続の内容が別の表示を示唆していても、左から右への手がかりになります。要件がすでに分かっている場合は、明示的に方向を指定してください。MDN: dirグローバル属性。

図形と数字だけのラベルには、特に注意が必要です。方向性の強い文字が含まれないためです。ここで扱う通常のインライン例では、自動方向判定で該当する文字が見つからない場合、HTMLアルゴリズムは左から右を既定とします。この合成シーケンスの基準方向を右から左にする必要がある場合は、dir="rtl"を指定してください。HTML Standard: dir属性。

埋め込みやオーバーライドはどのような場合に適していますか？

埋め込みは、内部では通常の文字順序を保ちながら、もう1つの方向レベルを作ります。その境界は、周囲のテキストの方向にも影響します。分離は、内容に独自のスコープを与えつつ、そのシーケンスが周囲に対して中立に振る舞うようにします。W3Cの仕様では、これらの内部と外部への影響を明確に区別しています。CSS Writing Modes Level 3: 埋め込みとオーバーライド。

周囲への方向の影響が意図した結果に含まれる場合に限り、埋め込みを選びます。独立した入れ子ラベルの後に別のカウントが続く場合は、通常、分離が適しています。入れ子が深いというだけでembedを選ぶ理由にはなりません。分離されたスパンの中に、さらに方向指定スパンを入れることもできます。

オーバーライドは内部の規則を変えます。通常のアルゴリズムに方向性のまとまりを解決させるのではなく、指定した方向に従って、直近のテキストを強制的に並べます。isolate-overrideは、その強制された並びの周囲に分離境界を追加します。これらは通常のフレーズを修正するための強めの設定ではなく、それぞれ異なる動作です。MDN: unicode-bidiの値。

文字順序を意図的に実演する場合は、bdoとdir="ltr"またはdir="rtl"を使います。HTML Standardでは、方向の明示的な指定が必要であり、この要素でautoを使うことは禁止されています。レンダリング規則ではunicode-bidi: isolate-overrideが使われるため、現在のHTMLにおけるbdoの動作には分離が含まれます。HTML Standard: bdo要素、HTML Standard: 双方向テキストのレンダリング。

この違いはラテン文字のラベルで重要です。基準方向が右から左だからといって、「ラテン文字をすべて逆順にする」わけではありません。オーバーライドを使うと、その並びを強制できます。それでも個々のグリフの向きは変わりません。bdoは、文字の形を鏡像に描画するものではありません。MDN: bdo要素。

Macで比較用のページを作って試す

次の単独ページを用意するには、ブラウザーとプレーンテキストエディタだけが必要です。最初の2行では、通常の方向処理と強制的な並びを比較します。残りの行では、入れ子構造と境界の選択を確認できます。CSSによる埋め込みの行は仕組みの実演として含めています。独立したラベルを通常のHTMLで作る際は、HTMLによる分離の行を出発点にしてください。

TextEditでFile > Newを選び、続けてFormat > Make Plain Textを選択します。以下のコード全体を貼り付けます。File > Saveを選び、ファイル名をbidi-demo.htmlにして、確認画面が表示されたらUse .htmlを選択します。これらは、HTMLファイルの作成についてAppleが案内している手順です。保存したファイルをデスクトップブラウザーで開きます。Apple: MacのTextEditでHTML書類を扱う。

<!doctype html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bidi boundary comparison</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      max-width: 44rem;
      margin: 2rem auto;
      padding: 0 1rem;
      line-height: 1.7;
    }
    .sample {
      border: 1px solid #777;
      padding: 0.75rem;
    }
    .scope {
      background: #eeeeee;
      outline: 1px dotted #555;
    }
    .embedding {
      direction: rtl;
      unicode-bidi: embed;
    }
  </style>
</head>
<body>
  <h1>Bidi boundary comparison</h1>

  <h2>Ordinary right-to-left base</h2>
  <p class="sample">Before <span class="scope" dir="rtl">ABC</span> after.</p>

  <h2>Forced right-to-left sequence</h2>
  <p class="sample">Before <bdo class="scope" dir="rtl">ABC</bdo> after.</p>

  <h2>Nested isolation</h2>
  <p class="sample">Tile <span class="scope" dir="rtl">&#x25CF; <span dir="ltr">A1 + B2</span> &#x25A0;</span>: 12 items.</p>

  <h2>Embedding comparison</h2>
  <p class="sample">Tile <span class="scope embedding">&#x25CF; <span dir="ltr">A1 + B2</span> &#x25A0;</span>: 12 items.</p>

  <h2>Automatic isolated direction</h2>
  <p class="sample">Tile <bdi class="scope">A1 (12)</bdi>: 12 items.</p>
</body>
</html>

何も変更せずに、まず最初の2行を確認します。通常の方向指定スパンでは、ABCの文字は左から右への順序を保つはずです。オーバーライドでは、左端から読むとCBAと表示されるはずです。これは文書化された仕組みから導かれる予想であり、ブラウザーで測定した結果ではありません。MDN: bdoの動作。

次に、分離と埋め込みの入れ子行を比較します。単語とカウントは変えずに、図形の並びとその境界にある句読点を確認します。仕組みは異なりますが、特定のサンプルでは見た目が同じになることがあります。すべての文字列で分離と埋め込みの見た目が異なるとは限りません。文書化された違いは、そのスコープが周囲の双方向テキストの解決にどう関与するかにあります。W3C: CSS Writing Modes Level 3。

境界を確認するには、コロンを外側の方向指定スパンの内側に移動して保存し、再読み込みします。その後、外側に戻します。どのフレーズに句読点が属するかを変えているため、意図した所属に沿って結果を評価してください。最後に、ブラウザーのウィンドウ幅を狭めて、文が折り返されたときにも同じ境界が保たれるか確認します。

背景色と点線の輪郭は、確認対象のスパンを示しています。これらは確認の目印であり、方向や分離を指定するものではありません。

結果がまだ正しく見えない場合、どう診断すればよいですか？

影響を受けている最小のフレーズから始め、外側へ向かって確認します。複数の方向関連プロパティを一度に変えると、どの境界が原因か特定しにくくなります。

  1. ラッパーを確認します。 ラッパーにはラベル全体だけが含まれていますか？文の句読点やカウントは、ラベルに属さない限り外側に置きます。
  2. 入れ子になったフレーズを確認します。 あるフレーズ内に独立した方向を持つ識別子がある場合、独自のdirラッパーが必要になることがあります。
  3. 自動方向判定を確認します。 基準方向が分かっている場合は、autoをその明示的な方向に置き換えます。合成図形や数字では特に有用です。
  4. オーバーライドを確認します。 文字の並びが予期せず強制されている場合は、bdoとCSSのunicode-bidi宣言を確認します。
  5. CSSカスケードを確認します。 作成者のルールが、ブラウザーの方向関連スタイルを上書きすることがあります。実験的な双方向テキストのルールを削除し、HTMLマークアップを再確認します。

最初の2つの確認項目は、W3Cのラッピングと入れ子に関するガイダンスに沿っています。自動方向判定の確認項目はMDNのdirのドキュメント、最後の確認項目はHTMLのレンダリング規則に沿っています。

並び順と配置も区別します。text-align: rightは、ブロックの右端にインラインコンテンツを配置しますが、フレーズを分離するわけではありません。text-align: startはブロックの方向に従うため、基準方向を変えると使用する端も変わることがあります。文字の順序の問題と行の配置を分けて診断してください。MDN: text-align。

互換性について、WHATWGの文書では、現在のすべてのブラウザーエンジンでbdiとbdoがサポートされています。ただし、すべての旧式ブラウザーや埋め込みビューアーでサポートされるという意味ではありません。別の表示環境を確認する場合は、実際の対象環境でテストし、方向指定のHTMLマークアップを残してください。MDNは、スタイルが無視される可能性があるため、CSSだけによる分離よりもHTMLマークアップを推奨しています。HTML Standard: テキストレベルの意味付け、MDN: bdiの使用上の注意。

最後に、入れ子になった各フレーズについて、基準方向、境界、内部の文字順序を通常どおりにするかを明確に決めます。独立したラベルでは、まず分離を選びます。レイアウト上、文書化された特定の動作が必要な場合に限り、埋め込みやオーバーライドを使います。

参考資料