<bdi>タグは、テキストの左右方向の書式設定を表す際に使用します。
より具体的には、テキストの左右方向が書式設定されているということを明示的にユーザーエージェントなどに伝えます。
bdi要素のdir属性は必須ではありませんが、bdi要素にdir属性を指定するとテキストの左右方向を制御できます。
dir属性の値に ltr を指定すると、テキストは左から右に向かいます。
dir属性の値に rtl を指定すると、テキストは右から左に向かいます。
dir属性はグローバル属性ですが、bdi要素に指定すると特別な意味を持ちます。
他の要素ではdir属性の初期値は ltr ですが、bdi要素のdir属性の初期値は auto です。
他の要素ではdir属性値は親要素から継承されますが、bdi要素のdir属性値は親要素から継承されません。
bdi要素は、テキストの方向性が不明なユーザー生成コンテンツを埋め込む場合などに役立ちます。
以下のサンプルでは、ユーザー名のひとつがアラビア語です。
アラビア語が混ざることで、bdi要素を使用しない場合にはテキストの表記方向が混乱しています。
テキストの表記方向が乱れるのを避けるには、bdi要素でマークアップしておくことが役立ちます。
<h4>bdi要素を使用しない場合</h4>
<ul>
<li>ユーザー <span>jcranmer</span>: 12回投稿
<li>ユーザー <span>hober</span>: 5回投稿
<li>ユーザー <span>إيان</span>: 3回投稿
</ul>
<h4>bdi要素を使用した場合</h4>
<ul>
<li>ユーザー <bdi>jcranmer</bdi>: 12回投稿
<li>ユーザー <bdi>hober</bdi>: 5回投稿
<li>ユーザー <bdi>إيان</bdi>: 3回投稿
</ul>