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

HTML の書字方向分離要素 (<bdi>) は、周囲のテキストとは逆の方向で表示する必要がある可能性があるテキストの区間を示します。

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

これで例えば、英語 (左書き) で書かれた段落の中でアラビア語 (右書き) の引用を表すことができます。ユーザーエージェントは右から左へ表示するべき <bdi> 要素内のテキストを正しく検出し、それによって調整する必要があります。

この要素は、書字方向が一定のページに対して、書字方向が不定の文字列を (たとえばデータベースから) 埋め込む際に、その文字列の書字方向を指定して表示する際に便利です。

HTML における双方向テキストについて詳しく知るには、 Unicode 双方向テキストアルゴリズムの記事をお読みください。

属性

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

使用上の注意

同様の視覚効果は、 <span> または他のテキストフォーマット要素に CSS の規則の unicode-bidi: isolate を使用することで実現できますが、多くの場合は代わりに <bdi> 要素を使用したほうが優れています。 <bdi> 要素は重要な意味論的意味を提供しますが、 CSS プロパティ unicode-bidi は表示だけだからです。

これは、ブラウザーが CSS による整形を無視することができるために特に重要です。この場合、 <bdi> 要素の中のテキストは正しく表示されますが、 unicode-bidi: isolate だけで表示されたテキストは、スタイルがなくなるので逆方向に表示されます。

これは、 HTML の意味論的な値が重要になる一つのケースです。

例

<p dir="ltr">このアラビア語の <bdi>ARABIC_PLACEHOLDER</bdi>
は右から左に向かって文字がレンダリングされます。</p>

表示結果

このアラビア語の REDLOHECALP_CIBARA は、右から左に向かってレンダリングされます。

仕様書

ブラウザーの対応

このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。

関連情報

• ローカライズと国際化
• 関連 HTML 要素: <bdo>
• 関連 CSS プロパティ: direction, unicode-bidi