【HTML】bdo要素の使い方【テキストの書字方向を指定します】

Program

bdo要素を使うことで、テキストの書字方向を指定することができます。

bdo要素の基本的な使い方

まず、次のプログラムと、ブラウザの表示結果を見てください。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bdo要素</title>
</head>
<body>
    <p><bdo>吾輩は猫である。名前はまだ無い。</bdo></p>
    <p><bdo dir="rtl">吾輩は猫である。名前はまだ無い。</bdo></p>
</body>
</html>

body要素の中に、「文のかたまり(段落)」を示すp要素が2つあります。

それぞれのp要素の中には、「吾輩は猫である。名前はまだ無い。」と書かれた文章があります。いずれのp要素においても、文章をbdo要素でマークアップしてあります。

1つ目のp要素は、「吾輩は猫である。名前はまだ無い。」と書かれた文章について、属性の値の指定はしてありません。

一方、2つ目のp要素では、bdo要素でマークアップされた「吾輩は猫である。名前はまだ無い。」と書かれた文章について、dir属性の値を指定してあります。

2つ目のp要素では、bdo要素の中のdir属性の値を「rtl」にしてあります。「rtl」は、「Right to Left.」の略を意味します。つまり、bdo要素でマークアップされた文章について、右から左に向けて記載するよう指定しています。

このため、2つ目のp要素では、ブラウザの表示結果の通り、「吾輩は猫である。名前はまだ無い。」は、書字方向が右から左に向けて記載された状態で表示されています。

なお、1つ目のp要素におけるbdo要素では、テキストの書字方向を具体的に指定するdir属性が使われていないため、「吾輩は猫である。名前はまだ無い。」と書かれた文章は、通常通り、左から右に向けた書字方向で記載(表示)されています。

通常、Webページでp要素等で表示されるテキストは、ブラウザに備わっている「双方向アルゴリズム」により、予め言語ごとに書字方向が設定されており、実際にWeb表示する際に、ブラウザがp要素等のテキストの言語を自動的に判断し、判断された言語に従い予め設定されていた書字方向に基づいて、ブラウザ上に表示します。

例えば、日本語や英語は、左から右に向けた書字方向で表示され、アラビア語などは、右から左に向けた書字方向で表示されるように、予め設定されています。

このため、上記のプログラムにおける1つ目のp要素では、dir属性の値を指定していませんが、通常の通り、左から右に向けた書字方向で表示されました。当然のことながら、bdo要素を使わず、単にp要素のみによる日本語テキストのマークアップをした場合であっても、左から右に向けた書字方向で表示されます。

なお、bdo要素によるdir属性の指定について、改めて、左から右に向けた書字方向でテキストを表示させる指定をする場合には、dir属性の値を「ltr」に指定します。「ltr」は、「Left to Right.」の略を示します。

英語(英文)ではどうなる?

次に、英語(英文)について、bdo要素でマークアップしてみましょう。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bdo要素</title>
</head>
<body>
    <p><bdo>吾輩は猫である。名前はまだ無い。</bdo></p>
    <p><bdo dir="rtl">吾輩は猫である。名前はまだ無い。</bdo></p>
    <p><bdo>I am a cat. I don't have a name yet.</bdo></p>
    <p><bdo dir="rtl">I am a cat. I don't have a name yet.</bdo></p>
</body>
</html>

先ほどのプログラムに、更にもう2行、英文を追加しました。

追加した英文は、いずれも「I am a cat. I don’t have a name yet.」について、bdo要素でマークアップしてあります。

そして、追加した2つの英文のうち、2つ目のp要素では、bdo要素でマークアップした英文について、dir属性の値を「rtl」に指定してあります。

このため、ブラウザの表示結果の通り、2つ目の英文のp要素における「I am a cat. I don’t have a name yet.」は、書字方向が右から左に向けて記載された状態で表示されています。

なお、dir属性の値を指定していない1つ目の英文では、通常の英語の書字方向に基づき、左から右に向けた書字方向で表示されています。

各種ブラウザでの表示結果

bdo要素の各種ブラウザにおける最新のサポート状況は、以下のようになってます。

【HTML】Internet ExplorerGoogle ChromeMicrosoft EdgeSafariFirefoxOpera
bdo要素
〇:サポートあり、△:制限あり、×:サポートなし。?:不明

以上、bdo要素の使い方について、ご参考になさってください!

タイトルとURLをコピーしました