<bdi></bdi>

更新日
仕様 HTML Living Standard
分類 フロー・コンテンツ / フレージング・コンテンツ / パルパブル・コンテンツ
利用場所 フレージング・コンテンツが置ける場所
内容 フレージング・コンテンツ

bdi要素は、周囲から隔離されたテキストを表します。この要素によって隔離されたテキストは、周囲の書字方向に影響を及ぼしません。


<bdi>隔離されたテキストを表します</bdi>
属性 値
グローバル属性（この要素上では、dir属性が特別な意味を持ちます）
dir="" 書字方向 auto 自動（既定値）
ltr 左から右へを指定
rtl 右から左へを指定
  • dir属性をbdi要素で使用する場合は、既定値が auto になります。この値は、親要素からdir属性の値を継承しないことを意味します。

bdi要素は、書字方向が混在する箇所で使用することになります。

例えば、下記の名前の部分に日本語 英語 アラビア語の名前を書き込んだとします。

User 名前 : 2022/12/26

日本語と英語の場合は問題ありませんが、右から左へと表記されるアラビア語の場合は、双方向アルゴリズムの影響によって次のような表示になってしまいます。（名前に続く内容が、本来とは逆の方向に配置されてしまいます）

表示例：User 2022/12/26 :アラビア語の名前

名前の部分をbdi要素で隔離しておくと、次のように本来の配置で表示されるようになります。

User <bdi>名前</bdi> : 2022/12/26

表示例：User アラビア語の名前: 2022/12/26

旧HTMLからの変更点
  • HTML5：bdi要素が定義されました。

使用例


<ul style="font-size: 150%;">
<li>User 太郎 : 2022/12/26</li>
<li>User Eric : 2022/12/26</li>
<li>User &#1571;&#1614;&#1587;&#1618;&#1593;&#1614;&#1583; : 2022/12/26</li>
</ul>

<ul style="font-size: 150%;">
<li>User 太郎 : 2022/12/26</li>
<li>User Eric : 2022/12/26</li>
<li>User <bdi>&#1571;&#1614;&#1587;&#1618;&#1593;&#1614;&#1583;</bdi> : 2022/12/26</li>
</ul>
表示例
  • User 太郎 : 2022/12/26
  • User Eric : 2022/12/26
  • User أَسْعَد : 2022/12/26
  • User 太郎 : 2022/12/26
  • User Eric : 2022/12/26
  • User أَسْعَد : 2022/12/26