MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-survey

HTML の <bdi> 要素 (双方向アイソレート要素) は、他部位とは異なる書字方向で書式設定するテキストの範囲を表します。

この要素は、書字方向が一定のページに対して、書字方向が不定の文字列を(たとえばデータベースから)埋め込む際に、その文字列の書字方向を指定して表示する際に便利です。

コンテンツカテゴリー フローコンテンツ記述コンテンツ、知覚可能コンテンツ
許可された内容 記述コンテンツ
タグの省略 不可。開始と終了タグの両方が必要。
許可された親要素 記述コンテンツ を受け入れるすべての要素
許可された ARIA ロール すべて
DOM インターフェイス HTMLElement

属性

この要素は、他のすべての HTML 要素と同様に グローバル属性 を持ちますが、他の要素と異なり、dir 属性が継承されません。無指定の場合の初期値は auto となり、ブラウザーは要素の内容に基づいてその書字方向を決定します。

使用上の注意

同様の視覚効果は、 CSS の規則で unicode-bidi: isolate<span> または他のテキストフォーマット要素に使用することで実現できますが、意味情報は <bdi> 要素だけが伝えることができます。特に、ブラウザーは CSS スタイルを無視することができるので特に重要です。このような場合、 HTML 要素を使用すれば文字列は適切に表示されますが、意味情報を伝えるために CSS スタイルだけを使用すると無意味になってしまいます。

<p dir="ltr">このアラビア語の <bdi>ARABIC_PLACEHOLDER</bdi> は右から左に向かって文字がレンダリングされます。</p>

表示結果

このアラビア語の REDLOHECALP_CIBARA は、右から左に向かってレンダリングされます。

仕様書

仕様書 策定状況 コメント
HTML Living Standard
<bdi> の定義
現行の標準  
HTML5
<bdi> の定義
勧告  

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本サポート16 無し10 無し 無し 無し
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本サポート 無し 無し 無し10 無し 無し ?

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: mfuji09, yyss, ethertank
 最終更新者: mfuji09,