【HTML Living Standard】bdi要素の使い方
bdi要素の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
bdiオブジェクトは、HTMLドキュメント内でテキストの書字方向を分離するためのオブジェクトです。このHTML要素は、その内容が持つ書字方向（文字が左から右へ書かれるか、右から左へ書かれるかなど）が、その周囲のテキストの書字方向や、親要素の書字方向設定から影響を受けたり、逆に周囲に影響を与えたりするのを防ぐ目的で使用されます。
特に、書字方向が不明確であったり、周囲のコンテンツとは異なる書字方向を持つ外部からのテキスト（例えば、ユーザーが入力した多言語のコメントやユーザー名など）をウェブページに挿入する際に非常に有効です。bdi要素で囲まれたテキストは、書字方向を決定するUnicodeのアルゴリズムにおいて、周囲の文脈から独立した「双方向性分離 (Bidirectional Isolate)」として扱われます。これにより、異なる書字方向のテキストが混在した場合でも、表示が乱れることなく、それぞれのテキストブロックが意図した通りの順序で正しくレンダリングされることを保証します。例えば、左書きの文章中に右書きのアラビア語のユーザー名が表示される際に、そのユーザー名が正しく右書きで表示され、かつ周囲の左書きの文章の並びを崩さないようにするために活用されます。
公式リファレンス: <bdi>: The Bidirectional Isolate element
構文(syntax)
1<p>ユーザー名: <bdi>RTLユーザー</bdi></p>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません