bdi要素

bdi要素は、双方向テキストのフォーマットにおいて、その周囲のテキストから分離するテキストの範囲を表します。左から右方向のテキストと右から左方向のテキストが混在するケースなどにおいて、異なる方向性を持つテキストにマークアップすることでページ、あるいは行にあらかじめ指定されている双方向アルゴリズムより分離することができます。

bdi要素において、グローバル属性のdir属性の値はデフォルトでautoとなります。よって、分離したテキストは改めてレンダリングされ、本来の方向で読み込まれます。(対応しているユーザー・エージェントのみ)


例)とある女性の名前と日付のリストです。この中でアラビアの女性の名前は右から左方向に読みます。つまり、2行目は、左から右方向のテキストと右から左方向のテキストが混在していることになります。

<ul>
<li>華子 (12月10日)</li>
<li><bdi>إليسا</bdi> (12月12日)</li>
<li>Emily (12月14日)</li>
</ul>

上記のHTMLドキュメント


表示)

Internet Explorer 10.0(未対応)
bdi要素の例 Internet Explorer 10.0

Chrome 39.0
bdi要素の例 Chrome 39.0

Firefox 33.1.1
bdi要素の例 Firefox 33.1.1


参考画像:Firefox 33.1.1(bdi要素対応ブラウザ)でbdi要素の指定が無い場合の表示。

カテゴリ
フロー・コンテンツフレージング・コンテンツパルパブル・コンテンツ
要素を使用することができる場所
フレージング・コンテンツが使用できる場所。
コンテンツ モデル(内容に含めることのできる要素)
フレージング・コンテンツ
コンテンツ属性
グローバル属性dir属性はこの要素では特別なセマンティックを持ちます。