なぜ「左から右」だけでは世界は救えないのか？ ― 双方向テキスト(BiDi)とインライン要素の制御術
フロントエンドの世界に足を踏み入れたばかりの頃は、「テキストは左から右（LTR）に流れるもの」と疑いもしないかもしれません。しかし、グローバルなプロダクトを開発していると、必ずと言っていいほど「悪魔」に遭遇します。そう、アラビア語やヘブライ語に代表される、右から左（RTL）へ流れるテキストとの遭遇です。
「単に`dir=”rtl”`をつければ終わりだろう？」
そう思っているなら、まだあなたは幸運です。インライン要素（``, ``, ``など）が混在したとき、ブラウザのレンダリングエンジンが裏側で何をしているのかを知ると、その認識は一変するはずです。今日は、Unicodeの双方向アルゴリズムという深淵を覗きつつ、実務でハマりやすい罠と、それを華麗にかわすための実装論を共有しましょう。
ブラウザの中で何が起きているのか：Unicode双方向アルゴリズムの正体
ブラウザはテキストをレンダリングする際、Unicodeの「双方向アルゴリズム（Unicode Bidirectional Algorithm）」に従って、視覚的な順序（Visual Order）を決定します。
重要なのは、「ソースコード上の記述順」と「画面上の表示順」は一致しないことがあるという事実です。
例えば、英語の文中にアラビア語が混ざった場合、ブラウザは「ここはLTR、ここはRTL」と、コンテキストを切り替えながらインライン要素の配置を再計算します。このとき、``や``といったインラインタグは「境界」として振る舞いますが、`dir`属性や制御文字（RLM: Right-to-Left Markなど）が正しく設定されていないと、括弧や記号が文末に飛び出したり、リンクの範囲が崩れたりという悲劇が起こります。
現場で直面する「崩壊」を防ぐベストプラクティス
多くの中級エンジニアが犯すミスは、「CSSの`text-align`で解決しようとする」ことです。しかし、BiDiの問題はCSS以前の「HTMLの構造」と「Unicodeの制御」にあります。
実践：BiDi対応のクリーンな実装パターン
以下のコードは、LTRとRTLが混在する環境下で、インライン要素を正しく維持するためのテンプレートです。
この商品は
[AR-12345]
というコードで管理されています。
مرحباً بكم! (こんにちは！)
プロとして押さえておきたい「unicode-bidi」の奥義
上記のコードで最も重要なのが `unicode-bidi: isolate;` です。
デフォルトでは、インライン要素はその親要素の方向に影響を受けますが、`isolate`を指定することで、「この要素の中身は独自の方向性を持つ」とブラウザに宣言できます。これにより、意図しない文末の崩れや、句読点の配置ミスを劇的に減らすことができます。
まとめ：泥臭い検証こそが品質の証
BiDi対応は、単なる「多言語化対応」のチェックリストを埋める作業ではありません。ユーザーが母国語で情報を正しく読み取れるかという、Webアクセシビリティの根幹に関わる部分です。
1. `dir=”auto”` を使いこなす: コンテンツの動的な切り替えには最強のツールです。
2. 論理プロパティへ移行する: `margin-left` と書く癖を今すぐ捨ててください。
3. `unicode-bidi: isolate` をお守りにする: 複雑な装飾が必要な要素には必ずこれです。
最後に一つだけ。どんなに理論武装しても、実際のアラビア語圏のユーザー環境でどう見えるかは別問題です。必ず実機、あるいはブラウザの検証ツールで「RTLモード」をエミュレートし、文字の並び順が論理的に正しいかを確認する――この泥臭い検証を厭わないエンジニアこそが、真のスペシャリストだと僕は思います。
皆さんのコードが、世界中のユーザーに正しく届くことを願っています。
コメント