＜bdo要素＞ - 双方向アルゴリズムの上書き

公開日: 2017/02/09

bdo要素でマークアップした範囲には、双方向アルゴリズムよりも優先して文字の方向を適用できます。文字の方向を明確にdir属性で指定しなければいけません。

概要

名前

bdo (BIDI overwrite)

カテゴリー

Flow content

Phrasing content

Palpable content

配置できる場所

Phrasing contentが期待される場所。

コンテンツモデル

Phrasing content。

タグの省略

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

DOM Interface

HTMLElement

デフォルトのスタイル

bdo {
	unicode-bidi: bidi-override;
}

仕様書

https://html.spec.whatwg.org/multipage/semantics.html#the-bdo-element

属性

dir

文字の方向をキーワードで指定する。このグローバル属性は、この要素では働きが違います。auto以外の値を指定しなければいけません。省略できません。

rtl: 右から左。
ltr: 左から右。

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

説明

ブラウザは、日本語や英語は左から右に、アラビア語は右から左に表示します。言語によって表示される文字の方向を振り分けるこの働きを双方向アルゴリズムと呼びます。

HTML

<h2>左から右(→)</h2>
<p>ありがとうございます。</p>
<p>Thank you very much.</p>

<h2>右から左(←)</h2>
<p>شكرا جزيلا.</p>

デモを開く

さて、グローバル属性であるdir属性は、文字の方向をヒントとしてブラウザに与えますが、実際の表示を左右するものではありません。例えば、次のようにマークアップしても、表示される文字の方向は変わらないということです。SYNCERと表示されるのを確認しましょう。

HTML

<!-- bdo要素以外でdir属性を指定 -->
<p><span dir="rtl">SYNCER</span></p>

デモを開く

もはや想像が付くと思いますが、bdo要素にdir属性を指定すると、その方向で文字を表示するよう強制できます。bdo要素のoは、overwrite(上書き)のoです。双方向アルゴリズムを上書きしてしまうのが、bdo要素の特徴というわけです。

HTML

<!-- bdo要素でdir属性を指定 -->
<p><bdo dir="rtl">SYNCER</bdo></p>

デモを開く

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜bdo要素＞ - 双方向アルゴリズムの上書き</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/bdo/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>bdo要素は、双方向アルゴリズムを上書きして、表示する文字の方向を強制します。</p>

<h2>bdo要素にdir=rtlの属性を指定</h2>
<p><bdo dir="rtl">SYNCER</bdo></p>

<h2>span要素にdir=rtlの属性を指定</h2>
<p><span dir="rtl">SYNCER</span></p>

	</body>
</html>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/623/"> <meta charset="utf-8"> <title>【デモ】＜bdo要素＞ - 双方向アルゴリズムの上書き</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/bdo/"> </head> <body>

<p>bdo要素は、双方向アルゴリズムを上書きして、表示する文字の方向を強制します。</p> <h2>bdo要素にdir=rtlの属性を指定</h2> <p><bdo dir="rtl">SYNCER</bdo></p> <h2>span要素にdir=rtlの属性を指定</h2> <p><span dir="rtl">SYNCER</span></p>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; }

</style>

</script>