<bdi> …… テキストの左右方向が書式設定されていること表す

<bdi>タグは、テキストの左右方向が書式設定されていること表す際に使用します。

テキストの方向は、dir属性で指定します。 dir属性の値に ltr を指定すると、テキストは左から右に向かいます。 dir属性の値に rtl を指定すると、テキストは右から左に向かいます。 bdi要素のdir属性の初期値は auto です。

■属性

■使用例

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>

Sponsors