bdi要素とbdo要素

Unicode Bidirectional Algorithmは通常、方向が混在するテキストを適切に処理します。しかし、周囲のテキストの方向がユーザー提供の名前によって変わらないように分離したり、コードブロック内で特定の方向を強制したりするために、上書きが必要になる場合があります。

<bdi>（双方向分離）は、コンテンツを独立したbidiコンテキストとして扱います。<bdi>内のテキストの方向が外側のテキストの方向に影響を与えることはなく、逆も同様です。

英語とアラビア語の名前が混在するユーザー一覧では、アラビア語の名前のRTLの流れが周囲のテキストに「漏れ出す」おそれがあります。各名前を<bdi>で囲むと分離できるため、名前ごとの方向にかかわらずレイアウトが一貫します。

<bdo dir="rtl">（双方向上書き）は、コンテンツに特定の方向を強制し、自然なbidiの解決を上書きします。自然な方向とは異なる方向でテキストを表示したい場合に使用します。たとえば、RTLページ内でコードスニペットをLTRとして表示する場合です。

通常の要素に設定したdir属性は基準方向を設定しますが、その内部ではbidiアルゴリズムが引き続き適用されます。<bdo>はコンテンツに対するbidiアルゴリズムを無効にします。そのため、スクリプトにかかわらず、すべての文字が指定された方向に厳密に流れます。

ユーザー生成テキストを周囲のUIに埋め込む場合は、いつでも使用してください。たとえば、チャットヘッダーの名前、コメント内のユーザー名、フィード項目のタイトルなどです。分離によって、ユーザーの入力内容が周囲のUIのレイアウトに影響しないことが保証されます。

ほとんどありません。主な正当な用途は、双方向テキストについて説明する場合（文字列を反転するとどのように見えるかを示す場合）や、自然な双方向テキストの解決によって視覚的な順序が誤ってしまう、タグ付けが不適切なデータを修正する場合です。

方向が不明なユーザーコンテンツには、二重に安全性を高めるために<bdi dir="auto">を組み合わせます。自動検出によってコンテンツから基本方向が選択され、bdiによってその方向が周囲のテキストに漏れ出すのを防ぎます。

bdiとbdoは、すべてのモダンブラウザーでサポートされています。これらはHTML5の一部であり、長年にわたって安定して動作しています。古いバージョンのIEにはbdiがありませんが、現在では実質的に廃止されているため、モダンなサイトではbdiを自由に使用できます。

スクリーンリーダーはbidiの分離を尊重します。内のテキストは、langが設定されていればその言語の音声で読み上げられ、周囲の文脈が入り込むことはありません。bdiは、分離されたフレーズの前後に適切な間を入れて音声合成するのにも役立ちます。

プレースホルダーを含むテンプレート（"Welcome, {name}"）では、プレースホルダーを<bdi>で囲む必要があります：Welcome, <bdi>{name}</bdi>。ユーザー名が英語、アラビア語、混在のいずれであっても、挨拶文の他の部分に影響を与えず正しく表示できます。

との実用上の違いは何ですか？

bdiは、セクション内のテキスト方向が周囲に影響を与えないよう分離します。テンプレート内の名前など、埋め込まれたユーザーコンテンツに使用します。bdoは特定の方向を強制し、bidiの処理結果を上書きします。教育用の例以外では、ほとんど必要ありません。方向が不明な言語のユーザー入力を安全に扱うには、bdiとdir="auto"を組み合わせます。