混ざり合う言語のパズル！「双方向テキスト」とインライン要素の不思議な世界へようこそ
Webサイトを作っていると、たまに「おや？」と思うような現象に出会うことがありますよね。例えば、英語の中にいきなりアラビア語やヘブライ語が混ざったとき、なぜか文字の並び順が変な方向に飛んでいってしまったり、インライン要素が意図しない場所でカクッと折れ曲がったり……。
「これ、バグかな？」と焦る必要はありません。それはWebブラウザが、Unicodeの双方向アルゴリズム（BiDi）という、ちょっと賢いルールに従って一生懸命テキストを整列させているからなんです。
今日は、そんな「文字の並び順」という少し奥深い世界を、初心者の方にも分かりやすく紐解いていきましょう。
—
「左から右へ」だけじゃない！世界の書き順
私たちが普段書いている日本語や英語は「左から右（LTR: Left-to-Right）」へ進みます。でも、アラビア語やヘブライ語は「右から左（RTL: Right-to-Left）」へと進むのがルールです。
想像してみてください。「右から左へ流れる行列」の中に「左から右へ流れる行列」が割り込んでくる状況を。これ、現場ではめちゃくちゃ混乱しますよね。
Webブラウザは、この「行列の衝突」を解決するために、文字の属性を読み取って自動的に並び順を計算してくれています。これが「双方向アルゴリズム」です。
インライン要素は「箱」ではなく「添え物」
HTMLの `` や `` 、 `` といったインライン要素は、実は「箱」ではなく「テキストの列の中にそっと置かれる添え物」のようなものだと考えてみてください。
例えば、お買い物のレシートに「合計金額」というシールを貼るようなイメージです。
- テキスト（文章）: 流れる水のようなもの
- インライン要素: その水の中に浮かぶ小さな葉っぱ
この「葉っぱ」は、水流（LTRやRTL）の向きに合わせて、一緒に流れたり、時にはひっくり返ったりします。ここで大切なのは、「インライン要素は、親となるテキストの向きに逆らえない」ということです。
—
実際に見てみよう：コードで解決する「並び順」の制御
もし、意図した並び順にならないときは、HTMLの `dir` 属性を使って、「ここはこういう向きで読んでね！」とブラウザにヒントを与えてあげましょう。
こんにちは！
مرحبا
（これはアラビア語でこんにちはという意味です）
つまずきやすいポイント：「強い」要素と「弱い」要素
ここで一つ、豆知識を。`` や `` 、 `` といった要素は、中身の文字の「性質」を強く持っています。
例えば、`` 要素の中にRTLのテキストを入れると、ブラウザは「これはコードの一部だから、並び順を崩さないように丁寧に扱おう」と判断します。逆に、何も指定しないと、ブラウザの「自動判断（推測）」に任せることになり、これが時々「あれ？文字が逆さま？」という現象を引き起こす原因になるんです。
「おかしいな？」と思ったら：
1. その要素がどの言語のグループに属しているかを確認する。
2. `dir` 属性（`ltr` か `rtl`）を明示的に指定して、ブラウザの「推測」を「確信」に変えてあげる。
---
最後に：Webは世界と繋がる場所だから
多言語対応のサイトを作るとき、この「双方向テキスト」の制御は避けて通れない道です。最初は難しく感じるかもしれませんが、「言葉にも、川の流れのような向きがあるんだな」とイメージしてみてください。
HTMLやCSSは、決して冷たいルールだけではなく、世界中のどんな言語でも正しく伝えようとする「優しさ」で溢れています。
もし制作中に文字の並びが変になってしまっても、それはあなたが「世界を繋ぐWebサイト」を作っている証拠です。ぜひ、怖がらずに `dir` 属性という魔法を使って、文字たちを正しい方向へ導いてあげてくださいね！
何か分からないことがあれば、いつでもまた聞きに来てください。応援しています！
コメント