<bdi>要素の定義
英語で「双方向の」という意味の、”bidirectional”より。
HTML文書中に左書きのテキスト（英語など）と右書きのテキスト（アラビア語など）を両方含むようなケースで、そのテキストが周囲のテキストの書字方向とは独立していることを明示したい場合に使用します。
ブラウザには、「 Unicode Bidirectional Algorithm 」という機能が実装されており、文字に対して暗黙の書字方向が与えられています。（アルファベットなどラテン語系なら左書き、アラビア文字なら右書き）
しかし、数字や記号類、空白文字など、中立として扱われ、周囲のテキストによって書字方向が決定されるものもあります。
そういった文字が混在するような文章の場合に、<bdi> 要素が役に立ちます。
子要素として使用できるもの
記述コンテンツ
親要素として使えるもの
記述コンテンツを受け入れるすべての要素。
許可されているARIAロール
すべて
DOMインターフェース
HTMLElement
属性
グローバル属性のみが指定できますが、dir要素の挙動が通常とは異なり、初期値が”auto”となります。
サンプル
＊アラビア語が絡むような例文が思いつかないので、MDNで紹介されている例文をそのまま紹介します。
See the Pen gOpbbYW by Masahiko Iwakiri (@m-iwakiri) on CodePen.
このサイトでは、HTML要素や属性の定義は下記サイトを参考にしています。
MDN Web Docs： https://developer.mozilla.org/ja/
W3C仕様の正確な定義、最新情報は上記サイトをご覧ください。
コメント