Widely available すべての主要ブラウザで対応済み。安心して使用可能。

<bdi>

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

テキスト・構造

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
<bdi>
16
79
10
6
18
6
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

HTML 
<ul>
  <li>Username: <bdi>إيان</bdi> — Score: 90</li>
  <li>Username: <bdi>John</bdi> — Score: 85</li>
</ul>

ライブデモ

多言語ユーザー名

bdi 要素でRTL言語のユーザー名をテキスト方向から分離。

プレビュー全画面表示

bdi あり・なしの比較

bdi（自動方向分離）と通常テキストの挙動の違いを確認。

プレビュー全画面表示

投稿一覧での使用

ユーザー生成コンテンツを安全に表示するための bdi の活用。

プレビュー全画面表示

実務での使いどころ

  • <bdi> の活用

    <bdi> は HTML の要素で、ブラウザーの書字方向アルゴリズムに、このテキストが周囲のテキストから独立しているものと扱うよう指示します。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。

参考リンク