HTML & CSS - bdo タグ

基本的な使い方

bdo タグは、文字が表示される方向（書字方向）を指定するときに使用します。具体的には、書字方向が右から左に向かって書くテキストに対して使用します。例えば、日本語は左から右に向かって書きますが、アラビア語やヘブライ語などは右から左に向かって書くため、そのときに bdo タグが使われます。

日本語や英語など、書字方向が左から右に向かって書くテキストに対しては基本的に bdo タグは使用しません。装飾目的でテキストを反対向きに表示したい場合は、CSS の direction: rtl を使用します。

bdo タグでは dir 属性によって書字方向を指定します。

<bdo dir="ltr">

テキストの書字方向が左から右に向かって書く場合。「left to right」 の略。

<bdo dir="rtl">

テキストの書字方向が右から左に向かって書く場合。「right to left」 の略。

<p>通常方向：<bdo dir="ltr">ABCDE</bdo></p>
<p>反対方向：<bdo dir="rtl">ABCDE</bdo></p>

bdo タグは記述コンテンツであるため、段落などの文章中に使用します。

<p>アラビア語のことわざに<bdo dir="rtl">الوعد سحاب و الفعل مطر</bdo>と言うものがあります。</p>
<!-- 意味は「約束は雲、実行は雨 （約束は果たされてこそ意味があるが実現はまれである）」 -->

使用上の注意

bdo タグは記述コンテンツであるため、段落や見出しを囲むような形で使うべきではありません。

<!-- bdo タグの間違った書き方 -->
<bdo dir="rtl"><p>الوعد سحاب و الفعل مطر</p></bdo>

もしも、ページ全体がアラビア語などの書字方向が右から左の場合は bdo タグで都度指定する必要はありません。CSS の direction プロパティで、ページ全体の書字方向を指定します。

body {
  direction: rtl;
}

bdi と bdo の違い

bdi タグと bdo タグは、書字方向に関するタグです。これらの違いは、以下のようになります。

bdi タグ

テキストの書字方向を周囲のテキストから分離するために使用します。例えば、世界中のユーザが自由に投稿できるサービスなど、何が入るかわからないテキストに対して使用します。

bdo タグ

テキストの書字方向を指定するために使用します。例えば、ドキュメントにアラビア語など書字方向が異なるテキストを明示的に含める場合に使用します。

外部リンク