【HTML Living Standard】bdi要素の使い方

bdi要素の使い方について、初心者にもわかりやすく解説します。

作成日: 2025年09月29日更新日: 2026年03月24日

基本的な使い方

bdiオブジェクトは、HTMLドキュメント内でテキストの書字方向を分離するためのオブジェクトです。このHTML要素は、その内容が持つ書字方向（文字が左から右へ書かれるか、右から左へ書かれるかなど）が、その周囲のテキストの書字方向や、親要素の書字方向設定から影響を受けたり、逆に周囲に影響を与えたりするのを防ぐ目的で使用されます。

特に、書字方向が不明確であったり、周囲のコンテンツとは異なる書字方向を持つ外部からのテキスト（例えば、ユーザーが入力した多言語のコメントやユーザー名など）をウェブページに挿入する際に非常に有効です。bdi要素で囲まれたテキストは、書字方向を決定するUnicodeのアルゴリズムにおいて、周囲の文脈から独立した「双方向性分離 (Bidirectional Isolate)」として扱われます。これにより、異なる書字方向のテキストが混在した場合でも、表示が乱れることなく、それぞれのテキストブロックが意図した通りの順序で正しくレンダリングされることを保証します。例えば、左書きの文章中に右書きのアラビア語のユーザー名が表示される際に、そのユーザー名が正しく右書きで表示され、かつ周囲の左書きの文章の並びを崩さないようにするために活用されます。

公式リファレンス: <bdi>: The Bidirectional Isolate element

構文(syntax)


1<p>ユーザー名: <bdi>RTLユーザー</bdi></p>

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

サンプルコード

bdiタグで書字方向を分離する


1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>bdiタグのサンプル</title>
7</head>
8<body>
9    <h1>bdiタグの使用例</h1>
10
11    <p>
12        <!-- bdiタグは、周囲のテキストとは異なる書字方向を持つ可能性のあるテキストを分離し、
13             その内容が独立した書字方向で表示されるようにします。
14             主に、ユーザーが生成したコンテンツなど、書字方向が不明なテキストに利用されます。 -->
15        ユーザー <bdi>اسم المستخدم</bdi> がログインしました。
16    </p>
17</body>
18</html>

HTMLのbdiタグは、「Bi-Directional Isolation」の略で、特定のテキスト部分を周囲のテキストの書字方向から分離するために使用される要素です。このタグを使用することで、ウェブページ内のテキストに異なる書字方向の言語が混在する場合でも、その特定のテキストブロックが独立した書字方向で適切に表示されるようになります。

具体的な利用シナリオとしては、英語や日本語のように左から右へ記述する言語の文章の中に、アラビア語やヘブライ語のように右から左へ記述する言語のテキストが挿入されるようなケースが挙げられます。bdiタグは、特にユーザーが入力したコンテンツなど、表示されるまで書字方向が不明確なテキストを扱う際に非常に有用です。これにより、意図しないレイアウトの崩れや表示の問題を防ぐことができます。

提供されたサンプルコードでは、「ユーザー <bdi>اسم المستخدم</bdi> がログインしました。」という箇所でbdiタグが使われています。ここで「اسم المستخدم」はアラビア語で「ユーザー名」を意味し、右から左へ記述されます。bdiタグでこのアラビア語のテキストを囲むことにより、前後の日本語テキスト（左から右へ記述）に影響を与えることなく、アラビア語の部分が正しい書字方向で表示されます。

bdiタグには特定の引数はなく、また、処理結果として値を返す戻り値もありません。このタグは、HTML文書内でテキストの書字方向の挙動を適切に制御し、多言語対応における表示の正確性を高める役割を担っています。

HTMLのbdiタグは、周囲のテキストとは異なる書字方向を持つ可能性のあるテキストを隔離し、独立した書字方向で表示されるようにするためのものです。このタグ自体は直接的な見た目の変更（太字や斜体など）をもたらすことはありませんので、その点を混同しないよう注意が必要です。主に、ユーザーが生成したコンテンツや外部からのデータなど、書字方向が不明確または周囲と異なるテキストをウェブページに安全に組み込む際に利用します。これにより、テキストの書字方向が原因でレイアウトが崩れたり、周囲のテキストに予期せぬ影響を与えたりすることを防ぎます。bdiタグは日常的に多用するものではなく、特に多言語対応や国際化されたウェブアプリケーションにおいて、書字方向の適切な処理が必要な場合に効果を発揮します。書字方向を単に上書きするbdoタグとは目的が異なりますので、使い分けに注意してください。

bdi要素で双方向テキストを分離する


1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>bdi Element Example</title>
7</head>
8<body>
9    <h1>&lt;bdi&gt; (Bidirectional Isolation) Element Demonstration</h1>
10
11    <p>
12        The <code>&lt;bdi&gt;</code> element isolates a part of text from its surrounding text directionality.
13        This is particularly useful when embedding user-generated content whose directionality (e.g., Left-to-Right or Right-to-Left)
14        is unknown and might conflict with the base direction of the document.
15    </p>
16
17    <h2>Example: Displaying a username with mixed directionality</h2>
18
19    <!-- Scenario without <bdi>: The browser might struggle to correctly place surrounding punctuation
20         if the embedded text is Right-to-Left (RTL) like Arabic or Hebrew. -->
21    <p>
22        <!-- This line is primarily Left-to-Right (LTR). The name "أحمد" is Arabic (RTL). -->
23        User Score: 95. Name: أحمد.
24        <!-- Without <bdi>, the period might visually appear before "أحمد" in some rendering engines,
25             or the bidirectional algorithm might produce unexpected results depending on the context. -->
26    </p>
27
28    <!-- Scenario with <bdi>: The <bdi> element explicitly isolates the RTL text,
29         ensuring correct rendering of the surrounding LTR text. -->
30    <p>
31        <!-- The <bdi> element ensures that "أحمد" (Arabic, RTL) is treated as an independent block,
32             preventing it from affecting the LTR direction of "User Score: 95. Name: " and the following period. -->
33        User Score: 95. Name: <bdi>أحمد</bdi>.
34    </p>
35
36    <p>
37        As you can see, the <code>&lt;bdi&gt;</code> element helps maintain the correct order
38        of the surrounding English (Left-to-Right) text, even when an embedded
39        Right-to-Left text (like Arabic or Hebrew) is present.
40    </p>
41</body>
42</html>

HTMLの<bdi>要素は、「Bidirectional Isolation（双方向テキストの分離）」の略で、特定のテキスト部分をその周囲の書字方向から独立させる役割を持っています。これは、英語のように左から右へ書くテキストの中に、アラビア語やヘブライ語のように右から左へ書くテキストを埋め込む際に特に重要な要素です。

例えば、ウェブサイトでユーザーが入力した名前など、書字方向が不明確なテキストや、ページの基本方向と異なる書字方向を持つテキストを表示する場合に役立ちます。<bdi>要素を使用しないと、埋め込まれた右から左へのテキストが、その前後の左から右へのテキストの表示順序に予期せぬ影響を与え、句読点などの位置がずれて表示されてしまう可能性があります。

サンプルコードでは、「User Score: 95. Name: أحمد.」という例を通じてその効果を示しています。「أحمد」はアラビア語で右から左へ書くテキストです。<bdi>要素でこの部分を<bdi>أحمد</bdi>のように囲むことで、「أحمد」が完全に独立した書字方向を持つブロックとして扱われます。これにより、その前後にある「User Score: 95. Name: 」や最後の「.」といった英語のテキストが、アラビア語の影響を受けずに正しい順序で表示され、全体のテキストの視覚的な整合性が保たれます。

この要素は引数を持ちませんし、特定の値を返す戻り値もありません。ただ、囲んだテキストの書字方向を分離するという機能を提供します。多言語対応のウェブサイトや、ユーザーが多様な言語で入力する可能性のあるコンテンツを扱うシステム開発において、テキスト表示の正確性を保証するために非常に有用な要素です。

bdi要素は、主に多言語環境において、周囲のテキストとは異なる方向性を持つテキスト（例えば、英語の中にアラビア語など右から左へ書く言語の単語）が混在する際に使用します。特にユーザー入力など、テキストの方向性が不明な内容を埋め込む場合に重要です。この要素で囲まない場合、周囲のテキストや句読点の表示位置が意図せずずれたり、全体のテキストフローが乱れたりする可能性があります。bdi要素を適切に利用することで、埋め込まれたテキストが周囲のテキストの方向性に影響を与えることなく、正しく表示されるよう隔離し、コンテンツの可読性を保つことができます。多言語サイトを開発する際は、表示の正確性を確保するために活用を検討してください。