bdi 要素書字方向が明確でないテキストを表す

bdi 要素は、テキストに対して双方向アルゴリズムを適用する際に、その適用範囲を指定します。

日本語や英語など、多くの言語は、横書きで文字を書く際、左から右に向かって書きますが、世界にはアラビア語などのように右から左に向かって書く言語も存在します。このような書字方向が異なるテキストを文書内に混在させることは可能ですが、bdi 要素によって、対象となるテキストを指定することで、双方向アルゴリズム適用時の不具合を解消することができます。

例えば、: や ; などの記号や、英数字などは、書字方向が異なる言語の間でも同じように使用される場合が多く、

[アラビア語] : 2013年6月12日

といった記述があった場合に、そのままでは、[ : 2013] まで含めて双方向アルゴリズムによって左側に配置されてしまいます。このようなことを避けるため、[アラビア語] の部分を bdi 要素でマークアップすることで、適切にテキストの配置が行われます。

なお、この要素に対して dir 属性が省略された場合は、初期値として auto が与えられます。

bdi 要素の仕様

カテゴリ
コンテンツモデル
この要素を使用できる文脈

フレージング・コンテンツが期待される場所

この要素で使用できる属性

この要素に対して使用される dir 属性は、特別な意味をもちます。

bdi 要素のサンプルソース

<ul>
 <li>投稿者 <bdi>jcranmer</bdi>: 12件の投稿</li>
 <li>投稿者 <bdi>hober</bdi>: 5件の投稿</li>
 <li>投稿者 <bdi>إيان</bdi>: 3件の投稿</li>
</ul>

主要ブラウザの対応

IE11 ×
Edge(EdgeHTML) ×
Edge(Chromium)
Chrome
Firefox
Safari ×
iOS Safari ×
Android Chrome

仕様書の該当箇所

4.5.24 The bdi element

用途から目的の要素を探す

用途から HTML5 の要素を逆引きできます。

テキストに対する意味づけを行いたい
テキストの編集を示したい
改行や折り返しを指定したい
上付きや下付きを指定したい
テキストの書字方向を制御したい
テキストにルビをふりたい
箇条書きなどリストを表したい
セクションを定義したい
コンテンツをグループ化したい
画像や映像などを埋め込みたい
スクリプトやスタイルを埋め込みたい
フォーム関連の要素
テーブル関連の要素
ドキュメントにメタデータを付与したい
インタラクティブな要素
その他

このページの上部へ