プログラミング

テキストの書字方向を指定するbdi要素【HTML】

HTMLにはテキストの書字方向を指定するタグがあります。

日本語だと普通は左から右に文章を書いていきますが、アラビア語などは右から左に書いていくのが一般的だったりします。

そういった書字方向が異なる言語を扱うときに、意図しないような表記になることを防ぐために、書字方向の指定を行います。

bdo要素(バイディレクショナルオーバーライド)

テキストに対して書字方向を指定することができる要素をbdo要素といいます。

最初に説明した通り、日本語は左から右に文字を書いていきますが、言語によっては右から左に書いていく場合もあります。

そういった書字方向の異なる言語を混在させて書くときに、bdo要素で書字方向を指定します。

dir属性(ディレクショナリティ)

bdo要素を使うときには、dir属性で書字方向を指定するのが必須です。

指定できる値は以下の2つ。

  • ltr・・・書字方向を左から右にする(left to right)
  • rtl・・・書字方向を右から左にする(right to left)

ltrとrtlで、書字方向を左から右に指定するのか、右から左に指定するのか決めます。

شكرا لك<bdo dir=”ltr”>2017-9-11</bdo>

あまり良い例が思い浮かばなかったんですけど、たとえば上のような場合だとアラビア語で「ありがとう」と書いていて、その言葉に続けて日付を書いているんですが、もしbdo要素で「2017-9-11」を左から右に書字方向を指定していなかったら「11-9-2017شكرا لك」という表記になってしまいます。

bdi要素(バイディレクショナル)

また、書字方向が異なるテキストを双方向テキストといい、双方向テキストを正しく処理するコンピュータのプログラムを双方向アルゴリズムといったりするのですが、その双方向アルゴリズムが適用する範囲を指定するbdi要素というのもあります。

この要素も適用範囲を指定することで書字方向が誤って表示されるのを防ぎます。

شكرا لك<bdi>2017-9-11</bdi>

bdo要素と違ってdir属性を省略することもでき、省略された場合は初期値としてautoが指定されます。

Leave a Comment