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