<bdi>タグは、他の部分とは表記の方向が異なる文章の書式設定をする範囲を表します。webブラウザは標準で表記の向きを判定して表示しています。Unicodeの双方向アルゴリズムという機能です。
表記の向きが適切でない場合、<bdi>タグを使用して、アルゴリズムから独立した部分を指定することができます。今回は、HTML5における<bdi>タグの使い方を紹介します。
言葉だと少しわかりにくいので、例をあげて説明していきます。
HTML5における<bdi>タグの使い方
英語や日本語は左から右の向きですが、アラビア語やヘブライ語などのように、右から左の書字方向の言語も存在します。この２つの向きの言語が混在する場合、周辺の語句の順序が、適切に表示されない場合があります。
考えられる例として、名前などの言語の向きが違う場合、混在してしまう可能性が高いですよね。下記のコードは日本語、英語、ヘブライ語の名前のリストです。bdi要素を使った時と使ってない時の違いを見ていきましょう。
bdi要素を使っていない場合
|
1 2 3 4 5 |
<ul> <li>Name サトシ : 01</li> <li>Name Sary : 02</li> <li>Name רבי עקיבא : 03</li> </ul> |
文字の判定をアルゴリズムでしているため、サンプルコードですら、ヘブライ語の名前が右からの表記になってしまい、正常に左から文字を打つことができず、「Name 番号：名前」の順番がおかしくなっています。
bdi要素を使った場合
|
1 2 3 4 5 |
<ul> <li>Name <bdi>サトシ</bdi> : 01</li> <li>Name <bdi>Sary</bdi> : 02</li> <li>Name <bdi>רבי עקיבא</bdi> : 03</li> </ul> |
このように、名前を<bdi>タグで囲むことで、サンプルコードをきちんと打つことができ、画像のように適切に表示することができます。書字方向が決まっていなくて、データベースから文字をとって埋め込む時に非常に便利です。
まとめ
もし、アラビア語やヘブライ語を使用して文字の方向がおかしくなってしまった時は、<bdi>タグを利用して文字の方向を整えましょう。
