このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

bdi要素:書字方向が異なるテキストHTML5で追加

記事May 19th,2015
July 7th,2020
他のテキストとは書字方向が異なるテキストを表す要素
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

要素について

bdi”要素はまわりのテキストとは書字方向が異なるテキストであることを示す要素です。

通常テキストはそれぞれの文字にもともと設定されている書字方向に従って“双方向アルゴリズム”により並ぶ順番が決められています。しかし、書字方向が異なる文字が混在したテキストでは“双方向アルゴリズム”によって数字や記号などの書字方向が曖昧な文字がその前後の文字に影響されて正しい順番にならないことがあります。“bdi”要素によって前後のテキストから分離することでこの問題を解消することができます。

dir”属性を指定しない場合は“bdi”要素の内容の書字方向はその文字に設定されている書字方向に従って決められます。

書字方向が一定のテキストの中に書字方向が異なる可能性があるテキストをユーザーの入力などで埋め込む場合などに有効です。

サンプルコード

<ul>
<li><bdi>ﺗﺎﺭﻭﺃﻭ</bdi>:明日は何時に来られる?</li>
<li><bdi>ﻫﺎﻧﺎﻛﻮ</bdi>:12時ぐらい。</li>
<li><bdi>ﺗﺎﺭﻭﺃﻭ</bdi>:3号館の前に集合ね。</li>
<li><bdi>ﻫﺎﻧﺎﻛﻮ</bdi>:わかった。</li>
</ul>
  • ﺗﺎﺭﻭﺃﻭ:明日は何時に来られる?
  • ﻫﺎﻧﺎﻛﻮ:12時ぐらい。
  • ﺗﺎﺭﻭﺃﻭ:3号館の前に集合ね。
  • ﻫﺎﻧﺎﻛﻮ:わかった。

bdi”要素によって双方向アルゴリズムを分離しない場合、右から左へ書くアラビア語に影響されて書字方向が曖昧な記号(“:”)と数字が右から左へ書く文字であると判定されてしまうため本来右側へ並ぶはずのものが左側へ配置されてしまいます。

<ul>
<li>ﺗﺎﺭﻭﺃﻭ:明日は何時に来られる?</li>
<li>ﻫﺎﻧﺎﻛﻮ:12時ぐらい。</li>
<li>ﺗﺎﺭﻭﺃﻭ:3号館の前に集合ね。</li>
<li>ﻫﺎﻧﺎﻛﻮ:わかった。</li>
</ul>
  • ﺗﺎﺭﻭﺃﻭ:明日は何時に来られる?
  • ﻫﺎﻧﺎﻛﻮ:12時ぐらい。
  • ﺗﺎﺭﻭﺃﻭ:3号館の前に集合ね。
  • ﻫﺎﻧﺎﻛﻮ:わかった。

属性と値

属性
属性 説明 説明
必須属性
なし
任意属性
グローバル属性
dir="" 書字方向の指定 auto 自動
ltr 左から右へ文字を書く
rtl 右から左へ文字を書く

グローバル属性dir”属性は“bdi”要素に指定した場合は他の要素に指定した場合と意味合いが異なります。

仕様書

bdi”要素はHTML5から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。

HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
<bdi>
定義なし

定義あり

定義あり

定義あり

定義あり
HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
dir=""
定義なし

定義あり

定義あり

定義あり

定義あり
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク