＜bdi要素＞ - 周囲の双方向アルゴリズムからの分離

公開日: 2017/02/09

bdi要素は、周囲の双方向アルゴリズムから分離させたい範囲をマークアップするための要素です。

概要

名前

bdi (BIDI isolate)

カテゴリー

Flow content

Phrasing content

Palpable content

配置できる場所

Phrasing contentが期待される場所。

コンテンツモデル

Phrasing content。

タグの省略

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

DOM Interface

HTMLElement

デフォルトのスタイル

bdi {
	unicode-bidi: -webkit-isolate;
}

仕様書

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

属性

dir

文字の方向をキーワードで指定する。このグローバル属性は、この要素では働きが違います。初期値はautoで、親要素の値を継承しません。

auto: ブラウザの判定に任せる。
rtl: 右から左。
ltr: 左から右。

グローバル属性

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

説明

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

HTML

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

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

デモを開く

さて、下記の例を見て下さい。開発者は名前(<span>أورسولا</span>)の後に8 pointと表示されると期待しますが、実際には、8 أورسولا pointと表示されてしまいます。これは、双方向アルゴリズムが前後の文字を巻き込むからです。8がアラビア語の一部だと解釈されてしまったということですね。

HTML

<h2>成績表</h2>
<p><span>Daniel</span> 4 point</p>
<p><span>鈴木</span> 5 point</p>
<p><span>أورسولا</span> 8 point</p>

デモを開く

この問題を解決するのがbdi要素です。ブラウザが双方向アルゴリズムの処理をする時に、bdi要素でマークアップしたテキストは、それ以外のテキストから独立した存在となります。そのため、先ほどのような、意図しない前後のテキストの巻き込みの心配がなくなるというわけです。

HTML

<h2>成績表</h2>
<p><bdi>Daniel</bdi> 4 point</p>
<p><bdi>鈴木</bdi> 5 point</p>
<p><bdi>أورسولا</bdi> 8 point</p>

デモを開く

サンプルコード

HTML

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

<p>bdi要素は、双方向アルゴリズムの適用範囲を、周辺から分離させるための要素です。</p>

<h2>bdi要素の場合</h2>
<p><bdi>Daniel</bdi> 4 point</p>
<p><bdi>鈴木</bdi> 5 point</p>
<p><bdi>أورسولا</bdi> 8 point</p>

<h2>span要素の場合</h2>
<p><span>Daniel</span> 4 point</p>
<p><span>鈴木</span> 5 point</p>
<p><span>أورسولا</span> 8 point</p>

	</body>
</html>

デモを開く

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

<!DOCTYPE html> <html> <head> <base href="/622/"> <meta charset="utf-8"> <title>【デモ】＜bdi要素＞ - 周囲の双方向アルゴリズムからの分離</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/bdi/"> </head> <body>

<p>bdi要素は、双方向アルゴリズムの適用範囲を、周辺から分離させるための要素です。</p> <h2>bdi要素の場合</h2> <p><bdi>Daniel</bdi> 4 point</p> <p><bdi>鈴木</bdi> 5 point</p> <p><bdi>أورسولا</bdi> 8 point</p> <h2>span要素の場合</h2> <p><span>Daniel</span> 4 point</p> <p><span>鈴木</span> 5 point</p> <p><span>أورسولا</span> 8 point</p>

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

<style>

body { background-color: #fff ; }

</style>

</script>