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

catnose · 2019/12/08 に最終更新

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プロパティを使えば、ページ全体の書字方向を変えることができます。

<h2>مرحبا هناك</h2>
<p>مرحبا هناك</p>
<ol>
  <li>مرحبا هناك</li>
</ol>

body {
  direction: rtl;
}

bdoタグのブラウザ対応

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