なぜ「左から右」だけでは世界は救えないのか？ `dir`属性とBidi制御で向き合う多言語対応の極意
フロントエンド開発の現場で、私たちはつい「Webサイトは左から右（LTR: Left-to-Right）へ流れるもの」という強固な思い込みに縛られがちです。しかし、アラビア語やヘブライ語圏のユーザーをターゲットにした瞬間、その前提は脆くも崩れ去ります。
今日は、インライン要素における「双方向テキスト（Bidi: Bidirectional text）」の制御について、標準仕様の深淵と、現場で頭を抱えないための実戦的な実装パターンを紐解いていきましょう。
1. `dir`属性の真の役割：ブラウザへの「方向宣言」
HTMLの`dir`属性は、単なる見た目の指定ではありません。これはブラウザのレンダリングエンジンに対し、「この要素の中身はどちらの方向からテキストが組み立てられるべきか」を指示する、極めて強力なメタデータです。
- `ltr`: 左から右へ（標準）。
- `rtl`: 右から左へ（アラビア語、ヘブライ語など）。
- `auto`: ブラウザが中身を解析し、最初の強い方向性を持つ文字に基づいて決定する。
ここで重要なのは、`dir=”auto”`の挙動です。これは、ユーザー入力フォームや動的に生成される多言語コンテンツにおいて、「何が来るか予測できない」場合に最強の武器となります。
2. ブラウザの裏側で起きていること
ブラウザは「Unicode Bidirectional Algorithm (UBA)」というルールセットに従ってテキストを配置しています。
通常、アルファベットなどの「強い方向性を持つ文字」は、その属性に従って並びます。しかし、数字や句読点といった「中立的な文字」が混ざると、ブラウザは「前後の強い文字の属性を継承する」という挙動をとります。
これが厄介なのは、UIの構造とテキストの並びが競合したときです。例えば、RTLの文脈の中にLTRのURLやコードブロックが混ざると、句読点の位置が逆転したり、文字列の順序が崩壊したりします。これを手懐けるのが、フロントエンドエンジニアの腕の見せ所です。
3. 実践：現場で使える「Bidi制御」のベストプラクティス
単に`dir`を指定するだけでなく、インライン要素をどう組み合わせるかが重要です。以下のコードは、国際的なチャットUIや管理画面の多言語対応でそのまま使えるパターンです。
こんにちは！ (日本語)
مرحبا! (アラビア語)
注文IDを確認してください:
ORDER-12345-XYZ
ID: 123456789
実装のヒント：`unicode-bidi`プロパティとの付き合い方
`dir`属性だけでなく、CSSの`unicode-bidi`プロパティも併用することがあります。
- `unicode-bidi: embed;`: インライン要素の方向性を独立させます。
- `unicode-bidi: isolate;`: これが最も推奨されます。周囲のテキストからその要素を「隔離」し、テキストの並び順に影響を与えないようにします。
4. なぜこれが「シニア」の視点なのか
駆け出しの頃の私は、CSSの`text-align: right`だけでRTL対応を済ませようとして痛い目を見ました。しかし、それは「見た目」を整えているだけで、「論理的な順序」を破壊しています。
「見た目の右寄せ」と「テキストの方向性（Writing Direction）」は別物です。
もしあなたがグローバルなサービスを作っているなら、`dir`属性を適切に指定することは、アクセシビリティの向上だけでなく、スクリーンリーダーによる読み上げ順序の正確化にも直結します。
まとめ：次にやるべきこと
1. 動的なテキストには必ず `dir=”auto”` を検討する。
2. コードブロックやURLなど、言語依存させたくない文字列には `dir=”ltr”` + `unicode-bidi: isolate` をセットで使う。
3. OSやブラウザの言語設定だけでなく、個別のテキストブロックが持つ属性を意識する。
技術は常に「誰のためにあるのか」という問いに帰着します。多言語対応は単なる仕様対応ではなく、多様なユーザーに対する敬意の表明です。ぜひ、次回の開発からこの視点を取り入れてみてください。
現場からは以上です。コードベースの国際化を、一緒に楽しんでいきましょう。
コメント