bdoタグ 👉 文字の表示される方向を変える

HTMLの<bdo>ビーディーオータグは、文字が表示される方向(書字方向)を指定するために使います。アラビア語やヘブライ語など、右から左に書く言語を段落に含めたいときなどに使います。

😺日本語や英語の文章では基本的に使うことはありません。「テキストを反対向きに表示したい」など見栄えの目的であれば<bdo>ではなく、CSSのdirection: rtlを使います。

bdoタグの使い方

dir属性で方向を指定する

<bdo>にはdir属性により書字方向を指定します。

dir="ltr"
テキストが左から右へ向かう。「left to right」の略
dir="rtl"
テキストが右から左へ向かう。「right to left」の略

👇例えば「ABC...」と並ぶ文字列に対してdir="rtl"を指定すると以下のように表示されます。

<p>通常:ABCDEFGHIJKLMN</p>

<p>反対方向に:<bdo dir="rtl">ABCDEFGHIJKLMN</bdo></p>

アラビア語などを段落に含めたいときに使う

<bdo>記述コンテンツであり、段落などの文章の中で使われます。

<!-- 👍良い例 -->
<p>「こんにちは」はアラビア語で<bdo dir="rtl">مرحبا هناك</bdo>と言います。</p>
<p><bdo dir="rtl">مرحبا هناك</bdo></p>

<!-- 👎悪い例 -->
<bdo dir="rtl"><p>مرحبا هناك</p></bdo>

👆<bdo>で段落や見出しを囲むような形で使うべきではありません。

ページ全体がアラビア語ならCSSのdirectionを使う

Webページ全体がアラビア語で書かれている場合、<bdo dir="rtl">をいちいち使うは必要ありません。以下のようにCSSのdirectionプロパティを使えば、ページ全体の書字方向を変えることができます。

body {
  direction: rtl;
}

bdoタグのブラウザ対応

<bdo>は全ての主要ブラウザで問題なく使用できます(参考:HTML4 elements - caniuse.com)。