目次に戻る

bdi要素:HTML Living Standard各要素別メモ

概要

カテゴリー
配置できる場所
内容モデル
属性
  • グローバル属性
  • dir属性の状態は親要素から承継せず、特に指定しない限りデフォルトautoとなる。
HTML構文におけるタグの省略
  • 省略不可。
WAI-ARIA
  • すべてのroleが指定可能。
視覚系ブラウザデフォルトとして期待されるCSS

  bdi:dir(ltr) {direction: ltr;}
  bdi:dir(rtl) {direction: rtl;}
  bdi {unicode-bidi: isolate;}
  
意味・用法

双方向テキスト書式設定の意図に対してその周囲から隔離されるべきテキストの範囲を表す。

著者以外の利用者によって作成された書字方向が不明なコンテンツを埋め込む場合に、特に有用である。

私見・補足

この要素で囲った部分は書字方向の状態について祖先から継承しないので、dir属性を明示的に指定せずとも、その文字本来の書字方向となる。

これ以外の要素で囲った部分のデフォルト書字方向、あるいは、dir属性による書字方向を指定は、前後の記号類をも巻き込むことになる。

この要素で囲った部分のデフォルト書字方向、あるいは、dir属性による書字方向の指定は、前後の記号類を巻き込まない。

表示確認

ソース

  <ul>
    <li>bdi要素不使用
    <ul>
      <li>User <span>hober</span>: 5 posts.</li>
      <li>User <span>إيان</span>: 3 posts.</li>
    </ul></li>
    <li>bdi要素使用
    <ul>
      <li>User <bdi>hober</bdi>: 5 posts.</li>
      <li>User <bdi>إيان</bdi>: 3 posts.</li>
    </ul></li>
  </ul>
  
表示結果
  • bdi要素不使用
    • User hober: 5 posts.
    • User إيان: 3 posts.
  • bdi要素使用
    • User hober: 5 posts.
    • User إيان: 3 posts.

未対応ブラウザにおいては、不使用と使用で表示は変わらない。

IE6表示のスクリーンショット
IE6表示:bdi要素使用でもアラビア文字の前後の記号類がアラビア文字の書字方向にひきづられている

IE7からIE11も同様。