CSSのunicode-bidiで双方向テキストの表示順序を制御する方法をわかりやすく解説

unicode-bidiプロパティは、テキストの双方向性（BiDi）を制御するために使用されます。特に、右から左（RTL）と左から右（LTR）の混在する言語の表示順序を管理する際に有用です。

unicode-bidiプロパティの値とその効果の一覧

• normal – デフォルトのテキスト方向。特にBiDiアルゴリズムを適用しない。
• embed – 埋め込みのBiDiアルゴリズムを使用し、方向を指定します。
• isolate – テキストを孤立させ、他の内容の影響を受けないようにします。
• bidi-override – テキスト方向を強制的に指定し、元の方向を無視します。
• isolate-override – isolateとbidi-overrideを組み合わせた動作。
• plaintext – 文書全体に対してBiDiアルゴリズムを適用し、最初に検出された方向に従います。

注意点や関連情報

双方向テキストは、アラビア語やヘブライ語などの右から左（RTL）表記と、英語や日本語の左から右（LTR）表記が混在している場合に重要です。このプロパティは、適切なテキスト順序を保証するために使用されます。特に、ページの方向性をdirectionプロパティと併用することで、より細かな制御が可能になります。

unicode-bidiが効かない時の原因と対策

directionプロパティが設定されていない

unicode-bidiは、テキストの双方向性を制御するプロパティですが、unicode-bidiを機能させるためには、directionプロパティが適切に設定されている必要があります。directionがデフォルトのltr（左から右）またはrtl（右から左）に設定されていないと、unicode-bidiが効果を発揮しません。

対策: directionを明示的に設定します。例えば、direction: rtl; unicode-bidi: bidi-override;のように指定して、双方向のテキストが正しく制御されることを確認します。

共通するCSSコード

.css-sample-container {
      width: 400px;
      margin: 20px auto;
      padding: 10px;
      border: 1px solid #333;
      background-color: #f9f9f9;
    }

    .css-sample-text {
      font-size: 18px;
      line-height: 1.5;
      direction: rtl;
    }
  

unicode-bidi: normal;

デフォルトのBiDiアルゴリズムが適用され、特に双方向テキストの制御を行いません。

HTMLコード

<div class="css-sample-container">
      <div class="css-sample-text css-sample-bidi-normal">
        This is a sample text. ‪مرحبا بك!‬
      </div>
    </div>
  

CSSコード

.css-sample-bidi-normal {
      unicode-bidi: normal;
    }
  

表示結果

unicode-bidi: embed;

埋め込みモードを指定し、指定されたテキスト方向に従って処理します。

HTMLコード

<div class="css-sample-container">
      <div class="css-sample-text css-sample-bidi-embed">
        This is a sample text. ‪مرحبا بك!‬
      </div>
    </div>
  

CSSコード

.css-sample-bidi-embed {
      unicode-bidi: embed;
    }
  

表示結果

unicode-bidi: isolate;

テキストを孤立させ、周囲のコンテンツの影響を受けずに表示します。

HTMLコード

<div class="css-sample-container">
      <div class="css-sample-text css-sample-bidi-isolate">
        This is a sample text. ‪مرحبا بك!‬
      </div>
    </div>
  

CSSコード

.css-sample-bidi-isolate {
      unicode-bidi: isolate;
    }
  

表示結果

まとめ

• unicode-bidiプロパティは、双方向テキストの順序を制御します。
• テキストの表示方向はdirectionプロパティと併用することで細かく制御できます。
• 値にはnormal、embed、isolateなどがあり、それぞれの用途に応じて適切な表示順序が指定されます。