<bdi> - 双方向テキスト

• トップ
• HTMLリファレンス
• <bdi>

• 概要
• 説明
• 属性
• 使用例
• 関連項目
• リンク

概要

形式

<bdi>～</bdi>

サポート

https://caniuse.com/mdn-html_elements_bdi

カテゴリ

フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ

親要素

フレージングコンテンツ を子要素に持てるもの

子要素

フレージングコンテンツ

タグの省略

開始タグ:必須 / 終了タグ:必須

属性

グローバル属性

説明

bdi は bidirectional(双方向)の略で、英語などの左から右に読む言語と、アラビア語などの右から左に読む言語が混在するテキストにおいて、周囲の方向と独立して存在する区分を示します。

例えば、アラビアの محمد(モハメッド) さんが 82ポイント、米国の Smith(スミス) さんが 75ポイントの場合に下記の様に記述したとします。

<div>محمد : 80 points</div>
<div>Smith : 75 points</div>

この時ブラウザは 「 : 80」が左から読む文書の一部なのか、右から読む文書の一部なのかを判断することができず、下記の様に表示してしまいます。

محمد を <bdi>～</bdi> で囲むことによりこの問題を防ぐことができます。

属性

グローバル属性

詳細は グローバル属性 を参照してください。

使用例

<div><bdi>محمد</bdi> : 80 points</div>
<div>Smith : 75 points</div>

関連項目

• <bdo>

リンク

• https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-bdi-element
• https://developer.mozilla.org/ja/docs/Web/HTML/Element/bdi
• https://caniuse.com/mdn-html_elements_bdi