HTML の書字方向分離要素 (<bdi>) は、ブラウザーの書字方向アルゴリズムにこのテキストが周囲のテキストから独立していると扱うよう指示します。これは特に、ウェブサイトがテキストを動的に挿入し、挿入されるテキストの書字方向が不明な場合に便利です。

双方向のテキストとは、文字の並びが左から右 (左書き、LTR) のものと、右から左 (右書き、RTL) のものの両方を含むテキストであり、英語の文字列の中に埋め込まれたアラビア語の引用のようなものです。ブラウザーはこれを扱うために、 Unicode Bidirectional Algorithm を実装しています。このアルゴリズムでは、文字には暗黙の書字方向が与えられます。例えば、ラテン文字は左書きとして扱われるのに対し、アラビア文字は右書きとして扱われます。その他の一部の文字 (空白や一部の区切り文字など) は中立として扱われ、周囲の文字に従って書字方向が割り当てられます。

ふつう、書字方向アルゴリズムは特別なマークアップを行わずに正しく動作しますが、時々、アルゴリズムが助けを必要とすることがあります。これが <bdi> の出番です。

<bdi> 要素はテキストの区間を囲んで、書字方向アルゴリズムにこのテキストが周囲から独立していることを指示します。これは二通りに動作します。

  • <bdi> で囲まれたテキストの書字方向は、周囲のテキストの書字方向に影響を与えない
  • <bdi> で囲まれたテキストの書字方向は、周囲のテキストの書字方向から影響を受けない

例えば、以下のようなテキストを想定してください。

EMBEDDED-TEXT - 1st place

EMBEDDED-TEXT が左書きである場合、これは正しく動作します。しかし、 EMBEDDED-TEXT が右書きである場合は、 - 1 は右書きのテキストとして扱われます (中立または弱い文字で構成されているためです)。結果は次のように混乱します。

1 - EMBEDDED-TEXTst place

さらに、 EMBEDDED-TEXT の書字方向が分かる場合は、 dir 属性のついた <span>EMBEDDED-TEXT を囲むことでこの問題を修正できます。しかし、書字方向が分からない場合は - 例えば、 EMBEDDED-TEXT がデータベースから読み込まれたり、ユーザーに入力されたりするものであれば - <bdi> を使用して、 EMBEDDED-TEXT の書字方向が周囲に影響されることを防ぐべきです。

同様の視覚効果は、 CSS の unicode-bidi: isolate<span> またはその他の文字書式のための要素に付けることで達成できますが、これは意味が含まれず、ブラウザーは CSS の整形を無視することが許されているので、 HTML ではこのアプローチを使用しないでください。

<span dir="auto"> に囲まれた文字は、 <bdi> を使用するのと同様の効果が得られますが、意味論的には不明確になります。

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

属性

この要素は、他のすべての HTML 要素と同様にグローバル属性に対応していますが、 dir 属性の挙動が普通とは異なります。初期値は auto であり、親要素から値を継承しないことを示します。つまり、 dir"rtl" 又は "ltr" のどちらかの値を指定しない限り、ユーザーエージェント<bdi> の内容に基づいて正しい方向を特定します。

競争の勝者のリストを想定してください。

<ul>
 <li><span class="name">Henrietta Boffin</span> - 1st place</li>
 <li><span class="name">Jerry Cruncher</span> - 2nd place</li>
</ul>

これは名前が左書きである限りは正しく動きますが、右書きの名前を入れると、書字方向が中立または弱い文字で構成された "- 1" は右書きのテキストの書字方向に合わられ、結果が混乱してしまいます。

<ul>
 <li><span class="name">اَلأَعْشَى</span> - 1st place</li>
 <li><span class="name">Jerry Cruncher</span> - 2nd place</li>
</ul>

<bdi> を使用して、ブラウザーに埋め込まれたコンテキストから分離することを指示することができます。

<ul>
 <li><bdi class="name">اَلأَعْشَى</bdi> - 1st place</li>
 <li><bdi class="name">Jerry Cruncher</bdi> - 2nd place</li>
</ul>

仕様書

仕様書 状態 備考
HTML Living Standard
<bdi> の定義
現行の標準  
HTML5
<bdi> の定義
勧告  

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 16Edge 未対応 なしFirefox 完全対応 10IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 未対応 なしFirefox Android 完全対応 10Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応

関連情報