最終更新日

bdi要素

英語や日本語のように「左から右へ」記述される文字と、アラビア語やヘブライ語のように「右から左へ」記述される文字が混在している場合に使われる要素です。Unicodeの双方向書式に対応しているブラウザであれば、テキストの表示方向を自動的に調整し、それぞれの文字を正しい方向で表示してくれる場合もありますが、それが機能しにくいときなどに使用されます。

bdi要素は、テキストの表記方向を設定するために、周囲から区別する文字の範囲を示します。Unicode制御文字のように使うことができ、特にテキストの方向性がわからないユーザー生成型のコンテンツに利用できます。bdi要素では、dir属性の初期値は「auto」に設定されています。ほかの要素と異なり、bdi要素のdir属性は親要素から継承しません。

スタイル化のために文字の方向を変えたいときは、bdi要素の代わりに、CSSのunicode-bidiプロパティによって同じ機能を実装することが可能です。

HTML5での変更点
・bdi要素は、HTML5で追加された新しい要素です。
カテゴリ タグの省略 親要素 子要素
Flowコンテンツ
Phrasingコンテンツ
省略不可 Phrasingコンテンツを子にできる要素 Phrasingコンテンツ
属性 説明
グローバル属性 - -
イベント属性 - -
サンプルコード
<body>
  <p>アラビア語で「ありがとう」は下記のように書きます。</p>
  <p><bdi>شُكْرًا لِكُلِّ شَىْءٍ</bdi>(シュクラン・リクッリ・シャイイン)</p>
</body>
参考文献:W3C HTML5「4.6.23 The bdi element」外部リンク
HOME
当サイトの活動をサポートしてみませんか?気軽にクリエイターの支援ができます。