概要
HTML <bdi> 要素 (双方向アイソレート要素) は、他部位とは異なる書字方向で書式設定するテキストの範囲を表します。
この要素は、書字方向が一定のページに対し書字方向が不定の文字列をデータベースから動的に取得して埋め込む際に、その文字列の書字方向を指定して表示する際に有益です。
| コンテンツカテゴリー | フローコンテンツ、フレージングコンテンツ、パルパブルコンテンツ |
|---|---|
| 許可された内容 | フレージングコンテンツ |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可された親要素 | フレージングコンテンツ を受け入れるすべての要素 |
| 許可された ARIA ロール | すべて |
| DOM インターフェイス | HTMLElement |
属性
この要素は、他のすべての HTML 要素と同様に グローバル属性 を持ちますが、他の要素と異なり、dir 属性が継承されません。無指定の場合の初期値は auto となり、ブラウザーは要素の内容に基づいてその書字方向を決定します。
使用上の注意
同様の表示は <span> か他のテキストフォーマット要素に対し CSS の unicode-bidi プロパティを用い、値に isolate を指定することで実現可能ですが、その書字方向にセマンティクスを伴う場合には <bdi> 要素が適しています。特に、ブラウザーは CSS スタイルを無視することができます。このような場合、テキストは HTML 要素を使用して適切に表示されますが、セマンティクスを伝えるための CSS スタイルの指定は無意味なものになってしまいます。
例
<p dir="ltr">このアラビア語の <bdi>ARABIC_PLACEHOLDER</bdi> は右から左に向かって文字がレンダリングされます。</p>
表示結果
このアラビア語の REDLOHECALP_CIBARA は、右から左に向かってレンダリングされます。
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| HTML Living Standard <bdi> の定義 |
現行の標準 | |
| HTML5 <bdi> の定義 |
勧告 |
ブラウザー実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| 基本サポート | 16 | 10.0 (10.0) | 未サポート | 未サポート | 未サポート |
| 機能 | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| 基本サポート | 未サポート | 10.0 (10.0) | 未サポート | 未サポート | 未サポート |
関連情報
- 関連 HTML 要素:
<bdo> - 関連 CSS プロパティ:
direction,unicode-bidi