サイト制作
HTMLのbdiとは？名前と数字が並ぶ場所で書字方向を分離する
2026-11-02
この記事には広告・アフィリエイトリンクが含まれます。
bdiは、文章中の一部分の書字方向を周囲から分離するHTML要素です。投稿者名など、右から左へ書く文字が入る可能性のある表示で、隣の数字や記号の並びを扱うときに使います。
文字の向きが周囲に影響しない区間を作る
HTMLのbdiは、囲んだ文字列の書字方向を周囲から分離する要素です。英字のように左から右へ書く文字と、アラビア文字のように右から左へ書く文字が混ざる場所で役立ちます。
ブラウザーは通常、文字の種類から並び方を処理します。ただし空白や一部の記号などは周囲の影響を受けるため、名前の隣に付けた数字や区切りが、想定外の位置に見える場合があるんです。bdiは、その影響を区間の内外で分けるために使います。
投稿者名の後ろに件数を付ける場面を考える
たとえば投稿一覧で「投稿者名 − 3件」のように表示するとします。投稿者名がどの言語で入力されるか分からないなら、名前の部分だけをbdiで囲む方法が候補になります。件数を名前の一部として扱わず、周囲の文に残す考え方です。
これは仕組みを説明する表示例です。すべての文字列で必ず並びが崩れる、という意味ではありません。数字や括弧、前後の文章との組み合わせによって見え方が変わるので、実際の表示条件で確かめます。
すでに囲んである要素ならdirのautoも候補
W3Cの国際化解説では、方向を事前に予測できない短い文字列がすでに要素で囲まれている場合、その要素へdir属性のautoを指定する方法も案内しています。まだ囲まれていなければbdiを使う、という整理です。
bdiはdirの指定がないとき、autoが指定されたように内容から方向を判断します。ページ全体を右寄せするための要素ではなく、文字列の方向を扱うものだと区別してください。文字を翻訳したり、保存済みの名前を書き換えたりする機能でもありません。
日本語だけでなく、数字や括弧を含む例で確認する
確認用のデータには、日本語・英字・右から左へ書く文字の名前を用意し、それぞれの前後に数字や括弧、区切り記号を置いてみます。名前だけでなく、一行全体が意図どおり読めるかを見ることが大切です。
また、ユーザー入力をHTMLとして直接挿入してよいという意味ではありません。安全に文字列として出力する処理は別に必要です。書字方向の分離と入力の安全な扱いを、それぞれの役割として確認しましょう。
