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

概要

カテゴリー

• Flow content
• Phrasing content
• Palpable content

配置できる場所

• 上記カテゴリーの要素が置ける場所。

内容モデル

• Phrasing content

属性

• グローバル属性
• dir属性の状態は親要素から承継せず、特に指定しない限りデフォルトはautoとなる。

HTML構文におけるタグの省略

• 省略不可。

WAI-ARIA

• デフォルトroleは、generic。デフォルトroleをrole属性値に指定することは、推奨されない。
• デフォルトrole以外では、すべてのroleが指定可能。

視覚系ブラウザのデフォルトとして期待されるCSS

  bdi {unicode-bidi: isolate;}
  bdi:dir(ltr) {direction: ltr;}
  bdi:dir(rtl) {direction: rtl;}
  

意味・用法

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

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

私見・補足

この要素で囲った部分は書字方向の状態について祖先から継承しないので、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.