SYNCERのロゴ
アイキャッチ画像

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

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

概要

名前
bdi (BIDI isolate)
カテゴリ
Flow content
Phrasing content
Palpable content
配置できる場所
Phrasing contentが期待される場所。
コンテンツモデル
Phrasing content。
タグの省略
開始タグも終了タグも省略できません。
コンテンツ属性
dir - 文字の方向。
DOM Interface
HTMLElement
デフォルトのスタイル

Chrome / Firefox / Safari

bdi {
    unicode-bidi: -webkit-isolate;
}
bdi {
    unicode-bidi: isolate;
}
bdi {
	unicode-bidi: isolate;
}
仕様書
https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-bdi-element

属性

dir属性

この属性はグローバル属性の1つですが、bdi要素では役割が変わります。初期値はautoで、親要素の値を継承しません。

グローバル属性

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

チュートリアル

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

<!-- このコードは編集できます。 -->

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

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

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

<!-- このコードは編集できます。 -->

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

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

<!-- このコードは編集できます。 -->

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

デモ

bdi要素のデモです。

<!-- このコードは編集できます。 -->

<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>

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

FeaturesChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
bdi要素 16+ 10+ 6.0+×× 15+ 6.0+ 4.4+
dir属性
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年2月9日 (木)
コンテンツを公開しました。