最終更新日
英語や日本語のように「左から右へ」記述される文字と、アラビア語やヘブライ語のように「右から左へ」記述される文字が混在している場合に使われる要素です。Unicodeの双方向書式に対応しているブラウザであれば、テキストの表示方向を自動的に調整し、それぞれの文字を正しい方向で表示してくれる場合もありますが、それが機能しにくいときなどに使用されます。
bdi要素は、テキストの表記方向を設定するために、周囲から区別する文字の範囲を示します。Unicode制御文字のように使うことができ、特にテキストの方向性がわからないユーザー生成型のコンテンツに利用できます。bdi要素では、dir属性の初期値は「auto」に設定されています。ほかの要素と異なり、bdi要素のdir属性は親要素から継承しません。
スタイル化のために文字の方向を変えたいときは、bdi要素の代わりに、CSSのunicode-bidiプロパティによって同じ機能を実装することが可能です。
カテゴリ | タグの省略 | 親要素 | 子要素 |
---|---|---|---|
Flowコンテンツ Phrasingコンテンツ |
省略不可 | Phrasingコンテンツを子にできる要素 | Phrasingコンテンツ |
属性 | 値 | 説明 |
---|---|---|
グローバル属性 | - | - |
イベント属性 | - | - |
<body> <p>アラビア語で「ありがとう」は下記のように書きます。</p> <p><bdi>شُكْرًا لِكُلِّ شَىْءٍ</bdi>(シュクラン・リクッリ・シャイイン)</p> </body>