<bdi>: 書字方向分離要素

HTML の書字方向分離要素 (<bdi>) は、ブラウザーの書字方向アルゴリズムにこのテキストが周囲のテキストから独立していると扱うよう指示します。これは特に、ウェブサイトがテキストを動的に挿入し、挿入されるテキストの書字方向が不明な場合に便利です。

このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。

双方向のテキストとは、文字の並びが左から右 (左書き、LTR) のものと、右から左 (右書き、RTL) のものの両方を含むテキストであり、英語の文字列の中に埋め込まれたアラビア語の引用のようなものです。ブラウザーはこれを扱うために、 Unicode Bidirectional Algorithm を実装しています。このアルゴリズムでは、文字には暗黙の書字方向が与えられます。例えば、ラテン文字は左書きとして扱われるのに対し、アラビア文字は右書きとして扱われます。その他の一部の文字 (空白や一部の区切り文字など) は中立として扱われ、周囲の文字に従って書字方向が割り当てられます。

ふつう、書字方向アルゴリズムは特別なマークアップを行わずに正しく動作しますが、時々、アルゴリズムが助けを必要とすることがあります。これが <bdi> の出番です。

<bdi> 要素はテキストの区間を囲んで、書字方向アルゴリズムにこのテキストが周囲から独立していることを指示します。これは二通りに動作します。

• <bdi> で囲まれたテキストの書字方向は、周囲のテキストの書字方向に影響を与えない。
• <bdi> で囲まれたテキストの書字方向は、周囲のテキストの書字方向から影響を受けない。

例えば、以下のようなテキストを想定してください。

EMBEDDED-TEXT - 1st place

EMBEDDED-TEXT が左書きである場合、これは正しく動作します。しかし、 EMBEDDED-TEXT が右書きである場合は、 - 1 は右書きのテキストとして扱われます (中立または弱い文字で構成されているためです)。結果は次のように混乱します。

1 - EMBEDDED-TEXTst place

さらに、 EMBEDDED-TEXT の書字方向が分かる場合は、 dir 属性のついた <span> で EMBEDDED-TEXT を囲むことでこの問題を修正できます。しかし、書字方向が分からない場合は - 例えば、 EMBEDDED-TEXT がデータベースから読み込まれたり、ユーザーに入力されたりするものであれば - <bdi> を使用して、 EMBEDDED-TEXT の書字方向が周囲に影響されることを防ぐべきです。

同様の視覚効果は、 CSS の unicode-bidi: isolate を <span> またはその他の文字書式のための要素に付けることで達成できますが、これは意味が含まれず、ブラウザーは CSS の整形を無視することが許されているので、 HTML ではこのアプローチを使用しないでください。

<span dir="auto"> に囲まれた文字は、 <bdi> を使用するのと同様の効果が得られますが、意味論的には不明確になります。

属性

この要素は、他のすべての HTML 要素と同様にグローバル属性に対応していますが、 dir 属性の挙動が普通とは異なります。初期値は auto であり、親要素から値を継承しないことを示します。つまり、 dir に "rtl" 又は "ltr" のどちらかの値を指定しない限り、ユーザーエージェントは <bdi> の内容に基づいて正しい方向を特定します。

例

競争の勝者のリストを想定してください。

<ul>
 <li><span class="name">Henrietta Boffin</span> - 1st place</li>
 <li><span class="name">Jerry Cruncher</span> - 2nd place</li>
</ul>

body {
  border: 1px solid #3f87a6;
  max-width: calc(100% - 40px - 6px);
  padding: 20px;
  width: calc(100% - 40px - 6px);
  border-width: 1px 1px 1px 5px;
}

これは名前が左書きである限りは正しく動きますが、右書きの名前を入れると、書字方向が中立または弱い文字で構成された "- 1" は右書きのテキストの書字方向に合わられ、結果が混乱してしまいます。

<ul>
 <li><span class="name">اَلأَعْشَى</span> - 1st place</li>
 <li><span class="name">Jerry Cruncher</span> - 2nd place</li>
</ul>

body {
  border: 1px solid #3f87a6;
  max-width: calc(100% - 40px - 6px);
  padding: 20px;
  width: calc(100% - 40px - 6px);
  border-width: 1px 1px 1px 5px;
}

<bdi> を使用して、ブラウザーに埋め込まれたコンテキストから分離することを指示することができます。

<ul>
 <li><bdi class="name">اَلأَعْشَى</bdi> - 1st place</li>
 <li><bdi class="name">Jerry Cruncher</bdi> - 2nd place</li>
</ul>

body {
  border: 1px solid #3f87a6;
  max-width: calc(100% - 40px - 6px);
  padding: 20px;
  width: calc(100% - 40px - 6px);
  border-width: 1px 1px 1px 5px;
}

仕様書

ブラウザーの対応

関連情報

• Inline markup and bidirectional text in HTML
• Unicode Bidirectional Algorithm basics
• ローカライズと国際化
• 関連 HTML 要素: <bdo>
• 関連 CSS プロパティ: direction, unicode-bidi