【初心者必見】bdoタグとは何?使い方は?基本的な使い方から応用までbdoタグの徹底解説

こんにちは、

今回はbdoというタグのお話です。

bdoってあまり聞かないけど、なんに使うんだろう?

右書きと左書きの文字方向はどうやって変えたらいいんだろう?

なんて悩んだ経験をされたことがあるのではないでしょうか。

今回は、bdoタグの

・基本的な使い方
・応用的な使い方

について説明します。

 

bdoとは

bdoの読み方

bdoは「bi-directional override(バイディレクショナルオーバーライド) 」の略で「ビーディーオー」と読みます。

「オーバーライド」は上書きと言う意味で、日本語に直訳すると「双方向性の上書き」です。文章の向きの上書きを意味します。

bdoの説明

bdoタグは日本語直訳の通り、文字が表示される方向(書字方向)を上書きして指定するために使うタグです。

日本語は書字方向が左から右方向ですが、アラビア語やヘブライ語などの一部の言語では、書字方向が右から左向きになります。

そのような文字の向きが違う言語が混ざるテキストがある場合に使います。

bdoタグで利用できる属性

bdoタグでは以下の属性を使うことができます。

属性 説明
dir  必須です。文字方向を指定します。autoではなく、ltr(左から右へ)もしくはrtl(右から左へ)のいずれかを指定します。
・ltr:左から右に表記する(left to right)
・rtl:右から左に表記する(right to left)
グローバル属性 どの要素にもでも指定することができる属性のことです。

HTML5から登場した概念で、それまでの属性とHTML5以降に追加されたいくつかの属性から成ります。

以下は代表的な属性です。

class  要素にCSSでスタイル(見た目)を適用するためによく使われる属性です。
 accesskey  要素に体するショートカットキーを指定するための属性です。
注意
すべての要素に使えますが、要素によっては効果がないこともあります。

対応ブラウザ

対応ブラウザは以下の通りです。

PC用ブラウザ 対応状況
Chrome 完全対応
Edge 完全対応
Firefox  完全対応
nternet Explorer  完全対応
Opera  完全対応
Safari  完全対応
スマートフォン用ブラウザ 対応状況
Android webview  完全対応
Android版Chrome 完全対応
Android版Firefox 完全対応
Android 版 Opera  完全対応
iOS版Safari  完全対応
Samsung Internet  完全対応

bdoタグの基本的な使い方

ここからは、bdoタグの具体的な使い方を説明します。

では、さっそく詳しい使い方をみてみましょう。

bdoタグの使い方

テキストを「右読み」にするか「左読み」にするかを、必ず指定する必要があります。

<bdo></bdo>で囲むタグの中にdirという属性で方向を指定します。dirは「directional」の略で、方向という意味です。

  • ltr(left-to-right)左から右に指定したい時
  • rtl(right-to-left)右から左に指定したい時

開始タグも終了タグも省略できません。

左から右の方向の場合の書き方です

このように表示されます。

日本語は昭和初期まで右書きでした。

右から左の場合の書き方です

このように表示されます。

日本語は昭和初期まで右書きでした。

書字方向が右から左に変わりましたね。
bdoタグで段落や見出しを囲むなど、文字を装飾したい目的では使わないようにしましょう。

bdoタグと類似する要素との違い

bdiタグ

書字方向を周囲から切り離したい時に使います。

アラビア語やヘブライ語などの言語のように、右から左へと表示される言語が含まれそうな部分に使います。

書字方向が逆の言語が混在すると、その周囲の書字方向までおかしくなってしまうのです。

Ken – 1位
Lee – 2位
ゆうすけ – 3位
إيان – 4位

このように、アラビア語を含む文章がおかしくなっていますね。

そこで、bdiタグを使うと以下のようになります。

このように正常になりました。

bdiタグはどのような言語が入るかわからないところ、例えば名前や著作物などに使いましょう。

CSSで文章の方向を指定する

このように表示されます。

スタイルシートで右書き

こちらもbdoタグと同じように書字方向が右から左になりました。

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

Webページ全体がアラビア語で書かれている場合、<bdo dir=”rtl”>を使う必要はありません。

以下のCSSのdirectionプロパティを使えば、ページ全体の書字方向を変えることができます。

bdoタグの応用的な使い方

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

bdoタグは段落などの文章の中で使われます。

「英語とアラビア語、どちらがいいのでしょう?」はアラビア語でبدك ياه بالإنكليزي ولا بالعربي؟と言います。

بالإنكليزي لو سمحت.‏とは、アラビア語で「英語でお願いします。」と言う意味です。

まとめ

いかがでしたか?今回はbdoタグの

・基本的な使い方
・応用的な使い方

を説明しました。

基本的に日本語でのページは、書字方向が左から右なのでltrはあまり使う機会がないかもしれません。

しかし、rtlが指定されている文章の中で、一部分だけ逆方向にしたい場合などには使えると思います。また、国際社会なのでいつどのような言語が使われるかわかりませんので、覚えておくといいでしょう。

この記事がお役に立てれば幸いです。

参考文献:Weblio辞書 |bdo 

     東京外国語大学 |シリアのアラビア語語彙モジュール