概要
HTML <bdi> 要素 (双方向アイソレート要素) は、他部位とは異なる書字方向で書式設定するテキストの範囲を表します。
この要素は、書字方向が一定のページに対し書字方向が不定の文字列をデータベースから動的に取得して埋め込む際に、その文字列の書字方向を指定して表示する際に有益です。
同様の表示は <span> か他のテキストフォーマット要素に対し CSS の unicode-bidi プロパティを用い、値に isolate を指定することで実現可能ですが、その書字方向にセマンティクスを伴う場合には <bdi> 要素が適しています。特に、ブラウザは CSS スタイルを無視することができます。このような場合、テキストは HTML 要素を使用して適切に表示されますが、セマンティクスを伝えるための CSS スタイルの指定は無意味なものになってしまいます。
| コンテンツカテゴリ | フローコンテンツ、フレージングコンテンツ、パルパブルコンテンツ |
|---|---|
| 許可された内容 | フレージングコンテンツ |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可された親要素 | Any element that accepts フレージングコンテンツ |
| DOM インターフェイス | HTMLElement |
属性
この要素は、他のすべての HTML 要素と同様にグローバル属性を持ちますが、他の要素と異なり、dir 属性が継承されません。無指定の場合の初期値は auto となり、ブラウザは要素の内容に基づいてその書字方向を決定します。
例
<p dir="ltr">このアラビア語の <bdi>ARABIC_PLACEHOLDER</bdi> は右から左に向かって文字がレンダリングされます。</p>
表示結果
このアラビア語の REDLOHECALP_CIBARA は、右から左に向かってレンダリングされます。
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| WHATWG 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