bdi は bidirectional(双方向)の略で、英語とヘブライ語が混ざるような双方向テキストにおいて、周囲の方向と独立して存在する区分を示すのに用いられます。
例えば、右から左に読む言語圏の「○△□」さん(右から読むので「□△○」さんと読みます)が300点をとった場合、「○△□:300 points」と入力しておくと、ブラウザは「:300」が左から読む文章の一部なのか、右から読む文章の一部なのかを判断することができず、「300:○△□ points」と表示してしまうことがあります。
この問題を防ぐために、「<bdi<○△□</bdi>: 300 points」と記述しておくことにより、正確に「○△□: 300 points」と表示させることが可能となります。
| 属性 | 意味 |
|---|---|
| class=class | H5+。クラスを指定します。 |
| id=id | H5+。IDを指定します。 |
| style=style | H5+。スタイルシートを指定します。 |
| title=title | H5+。タイトルを指定します。 |
| dir=dir | H5+。文字の表示方向を指定します。 |
| lang=lang | H5+。言語を指定します。 |
| accesskey=key | H5+。アクセスキーを指定します。 |
| tabindex=n | H5+。タブインデックスを指定します。 |
| contenteditable=bool | H5+。要素を編集可能にします。 |
| contextmenu=id | H5+。コンテキストメニューを指定します。 |
| draggable=bool | H5+。ドラッグを可能にします。 |
| dropzone=value | H5+。ドロップを可能にします。 |
| hidden | H5+。要素を非表示にします。 |
| spellcheck=bool | H5+。スペルをチェックします。 |
<p>○△□: 300 points<p> <p><bdi>○△□<bdi>: 300 points<p>