HTML の双方向アイソレート要素 (<bdi>) は、周囲とは異なる書字方向を使用して表示されるテキストの範囲を表します。これで例えば、英語（左から右）で書かれた段落の中でアラビア語（右から左）の引用を表すことができます。ユーザーエージェントは右から左へ表示するべき <bdi> 要素内のテキストを正しく検出し、それによって調整する必要があります。
この要素は、書字方向が一定のページに対して、書字方向が不定の文字列を（たとえばデータベースから）埋め込む際に、その文字列の書字方向を指定して表示する際に便利です。
メモ: 任意で、 dir 属性を使用して、 <bdi> 要素の中身を描画する方向についてのユーザーエージェントの決定を上書きすることができます。
| コンテンツカテゴリー | フローコンテンツ、記述コンテンツ、知覚可能コンテンツ |
|---|---|
| 許可された内容 | 記述コンテンツ |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可された親要素 | 記述コンテンツ を受け入れるすべての要素 |
| 許可された ARIA ロール | すべて |
| DOM インターフェイス | HTMLElement |
属性
この要素は、他のすべての 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 は、右から左に向かってレンダリングされます。
仕様策定状況
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| HTML Living Standard <bdi> の定義 |
現行の標準 | |
| HTML5 <bdi> の定義 |
勧告 |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
| 機能 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| 基本対応 | 16 | なし | 10 | なし | なし | なし |
| 機能 | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| 基本対応 | なし | なし | なし | 10 | なし | なし | なし |
関連情報
- 関連 HTML 要素:
<bdo> - 関連 CSS プロパティ:
direction,unicode-bidi