トップページ  > HTML Living Standard  > <bdi>

★HTML Living Standard リファレンス

<bdi> …… テキストの左右方向が書式設定されていること表す
Internet Explorer Microsoft Edge Google Chrome Safari Firefox Opera
広告

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

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

■属性

dir属性
dir属性は、要素のテキストの方向を指定します。 dir属性の値には、以下のキーワードを指定できます。 bdi要素のdir属性の初期値は auto です。
  • ltr …… テキストは左から右に向かいます。
  • rtl …… テキストは右から左に向かいます。
  • auto …… テキストは要素内容に応じて自動的に方向が設定されます。(初期値)

※dir属性はグローバル属性ですが、bdi要素に指定すると特別な意味を持ちます。 他の要素ではdir属性の初期値は ltr ですが、bdi要素のdir属性の初期値は auto です。 他の要素ではdir属性値は親要素から継承されますが、bdi要素のdir属性値は親要素から継承されません。

■使用例

bdi要素は、方向性が不明なユーザー生成コンテンツを埋め込む場合に特に役立ちます。

以下のサンプルでは、ユーザー名のひとつがアラビア語です。 アラビア語が混ざることで、bdi要素を使用しない場合にはテキストの表記方向が混乱しています。 あらかじめbdi要素を指定しておくことで、テキストの表記方向が乱れるのを避けられます。

HTMLソース

<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>
↓↓↓

ブラウザ上の表示

bdi要素を使用しない場合

  • ユーザー jcranmer: 12回投稿
  • ユーザー hober: 5回投稿
  • ユーザー إيان: 3回投稿

bdi要素を使用した場合

  • ユーザー jcranmer: 12回投稿
  • ユーザー hober: 5回投稿
  • ユーザー إيان: 3回投稿

広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ