<bdi>タグは、テキストの左右方向が書式設定されていること表す際に使用します。
テキストの方向は、dir属性で指定します。 dir属性の値に ltr を指定すると、テキストは左から右に向かいます。 dir属性の値に rtl を指定すると、テキストは右から左に向かいます。 bdi要素のdir属性の初期値は auto です。
※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>