【HTML】bdoタグでテキストの方向を変更する方法

このページについて

このページではHTMlで使う事ができるbdoタグの機能と使い方を解説しています。

bdoは囲んだテキストの方向を上書きするために使用されます。テキストの方向についてはbdiタグで少し触れましたが、アラビア語など右から書き始めて左方向に進む言語などがあります。それらに対応出来るようにテキストの方向を反対にする機能がbdoタグとなります。

bdoは囲んだテキストのみが方向を上書きできます。そのため囲んでいないテキストと一緒に書くと一部だけおかしな表記になったりします。

<p>1234<bdo dir="rtl">5678</bdo>910</p>

これは

12345678910

このようになります。よくみてみると最初の1234までは普通ですが、その次にいきなり910が来ています。本来であればbdoの中身が先に来るはずですが、肝心なその中身は行の右からスタートしています。これは数字のみで起こる現象です。通常のテキストならば以下のようになります。

<p>test<bdo dir="rtl">左右反転したテキスト</bdo>abc</p>

test左右反転したテキストabc

前後のテキストの位置は問題ありません。数字のみ、右端からスタートするというルールになるようなのでこの辺りは注意したほうがいいかもしれません。

bdoで使える属性はdir属性1つとなります。dir属性はテキストの方向を指定する機能を持っています。使える値は3種類です。

auto	テキストの方向が不明な場合に使用を推奨されている値。ブラウザにコンテンツを基に決めてもらう
rtl	Right(右) to Left(左)の略テキストを右から左へと書く
ltr	Left(左) to Right(右)の略テキストを左から右へ書く

autoのみブラウザによってテキスト方向を決めてもらう感じにはなりますが、テキストの方向が不明な場合のみ使用を推奨されています。そのため基本的には日本語や英語など左から右へ書く場合は何も書かないのが一番です。

大昔の日本では右から左へ書いていましたが、それを再現するとかならrtlの出番もありそうですね。書き方はシンプルにbdoと一緒に書くだけです。

<bdo dir="値">テキスト</bdo>

ちなみにbdoでrtlを使うと囲んだテキストの反転のみ行なってくれますが行頭のスタート位置は相変わらず左からとなります。そのため右を行頭としてスタートさせたい場合はpタグ自体にdir属性を付与するのも必要になってきます。例えば以下

<p dir="rtl"><bdo dir="rtl">左右反転したテキスト</bdo></p>

これをブラウザでレンダリングすると以下のように、右を行頭として文字を表示してくれます。

左右反転したテキスト

bdo単体では囲んだテキストの反転を行なってくれます。しかし数字を扱う場合はルールが異なるので注意が必要です。

行頭ごと右からスタートにしたい場合はdir属性をpタグなりの全体にも適用させる必要があります。