グローバルなWeb開発の落とし穴：Bidi（双方向テキスト）を制して「言語の壁」を超える
フロントエンドエンジニアとして経験を積んでいくと、いつかは必ず遭遇する壁がある。それが「多言語対応」、そしてその中でも特に厄介な「双方向テキスト（Bidi: Bidirectional text）」だ。
英語のような左から右へ流れる言語（LTR: Left-to-Right）と、アラビア語やヘブライ語のように右から左へ流れる言語（RTL: Right-to-Left）が混在するWebサイト。これらを適切に制御できているサイトは意外と少ない。レイアウトが崩れるだけならまだしも、ユーザーが文章を読み取れなくなれば、それはエンジニアとして致命的なUXの欠陥だ。
今日は、ブラウザの裏側で何が起きているのかを紐解きつつ、現場で即戦力となる「Bidi制御の勘所」を伝授しよう。
—
1. なぜブラウザは混乱するのか？：Unicode双方向アルゴリズムの正体
まず前提として、ブラウザは「Unicode双方向アルゴリズム（UBA）」という複雑なルールに従ってテキストの流れる方向を決定している。
例えば、アラビア語の文章の中に英単語が混ざったとき、ブラウザは「ここはRTLで、ここはLTRだから……」と、裏側でパズルのように文字の配置を計算しているんだ。しかし、この自動判別は万能じゃない。特に、記号や数字、あるいは括弧が含まれると、ブラウザはしばしば「意図しない方向」に文字を反転させてしまう。
ここで登場するのが、HTMLの `dir` 属性と `bdo` 要素だ。これらは単なるタグではなく、「ブラウザの自動判別を信頼せず、エンジニアが明示的に方向を指示するための強制力」だと捉えてほしい。
—
2. 現場で使うべき「武器」：dir属性とbdo要素
dir属性（方向の指定）
`dir=”ltr”` または `dir=”rtl”` は、要素のコンテンツの方向性を定義する。重要視すべきは、HTML5から導入された `dir=”auto”` だ。これは「コンテンツの最初の強い文字タイプに基づいて方向を自動決定する」というもの。ユーザー投稿型コンテンツなどで、言語が動的に変わる場合には必須のツールだ。
bdo要素（方向のオーバーライド）
`bdo`（Bi-Directional Override）は、UBAによる自動計算を完全に無視させたい時に使う。文字の並び順を強引に反転させるため、デザイン上の特殊な表現や、検証が必要な特殊記号を表示する以外では滅多に使わないが、知っておくと「いざという時」に泣きを見なくて済む。
—
3. 実践！コピペで使えるBidi制御ベストプラクティス
実際の業務では、以下のようにCSSとHTMLを組み合わせて制御するのが最も堅牢だ。
このテキストは自動で方向が決まります。
English sentence here.
مرحبا بالعالم
通常はこう見えますが、強制的に反転させるとこうなります。
CSSで補足する「unicode-bidi」プロパティ
HTMLの属性だけでなく、CSSの `unicode-bidi` プロパティも併せて覚えておく必要がある。
- `unicode-bidi: normal;`：デフォルトの動作。
- `unicode-bidi: embed;`：要素内で独立した方向性を持たせる。
- `unicode-bidi: isolate;`：周囲のテキストから影響を受けないようにする（コンテナとして最適）。
プロからのアドバイス：
`span` や `strong` などのインライン要素に方向性を適用する際は、必ず `unicode-bidi: isolate;` をセットで当てる癖をつけておこう。これで、意図しない文字の食い込みや、括弧の向きの反転を防げる。
—
4. 最後に：エンジニアとしての「誠実さ」
多言語対応において、「とりあえず英語で表示できればいい」と考えるのは古い。今やWebは国境を超え、あらゆる言語圏のユーザーが君の書いたコードを閲覧する可能性がある。
「なぜ右から左へ流れるのか？」「なぜこの括弧は逆を向いているのか？」――そうした細部にまで意識を向け、ブラウザ任せにせずコントロールする姿勢こそが、シニアエンジニアとそうでないエンジニアの境界線だ。
もし次に多言語案件が来たら、まずは `dir` 属性の適切な指定から始めてみてほしい。ユーザーはその小さな配慮に、言葉以上の安心感を感じてくれるはずだから。
コメント