「右から左へ？」HTMLで迷子にならないための双方向テキスト（bidi）入門
こんにちは！Web制作の学習、順調に進んでいますか？
HTMLを書いていると、「あれ、これってどう並ぶのが正解なんだろう？」と、文字の並び順で頭を抱える瞬間が一度は訪れるはずです。
特に、日本語や英語のような「左から右へ（LTR：Left-to-Right）」書く言語と、アラビア語やヘブライ語のように「右から左へ（RTL：Right-to-Left）」書く言語が混ざったとき。ブラウザという名の優秀なAIですら、たまに混乱して「えっ、どこから読み始めればいいの？」と挙動不審になることがあります。
今日は、そんなテキストの「方向音痴」を治すための魔法の呪文、`direction`と`unicode-bidi`について、一緒に紐解いていきましょう。
—
なぜテキストの「方向」を意識する必要があるの？
想像してみてください。あなたは今、海外旅行に来ています。目の前には、左から右に書かれた英語の看板と、右から左に書かれた現地語の案内板が混ざった掲示板があります。
もし、この掲示板の文字がぐちゃぐちゃに混ざっていたら、どちらを先に読めばいいのかパニックになりますよね？
Webサイトも同じです。特に、多言語展開を考えているサイトや、引用で異言語を混ぜる場合、「ここから先は右から読んでね！」「ここは混ぜないで独立させてね！」とブラウザに教えてあげないと、デザインが崩れたり、スクリーンリーダー（視覚障がい者のための読み上げソフト）が文章を読み飛ばしてしまったりする原因になります。
—
魔法の呪文：directionとunicode-bidi
この「並び順」を制御するCSSのプロパティが、`direction`と`unicode-bidi`のセットです。
1. direction：進む方向を指定する
まずは、文字がどちらに向かって進むかを指定します。
- `ltr`：左から右（日本語や英語など、デフォルトの状態）
- `rtl`：右から左（アラビア語やヘブライ語など）
2. unicode-bidi：制御の「強さ」を決める
これだけだと、時々ブラウザが「いや、俺はもっと複雑なルールで並べたいんだ！」と勝手に気を利かせて失敗することがあります。そこで登場するのが`unicode-bidi`です。
- `embed`：指定した要素を、その中のテキストの方向で囲い込みます。
- `isolate`：これぞ最強の解決策。「この中身は外の世界（周囲のテキスト）とは別のルールで動くから、干渉しないでね！」と宣言する役割です。
—
実践！コードで見てみよう
例えば、日本語の文章の中に、少しだけ右書きの言葉を混ぜたいとき。こんなふうに書いてみましょう。
ここは普通の日本語です。
アラビア語のテキスト
また普通の日本語に戻ります。
このコードの「ここがポイント！」
- `direction: rtl;` で、その枠の中の文字を右詰め・右読みの流れに設定しました。
- `unicode-bidi: isolate;` を使うことで、その枠の外にある日本語と、枠の中のアラビア語が混ざってパズルみたいに崩れるのを防いでいます。
もし`isolate`を忘れると、ブラウザは「あれ？このアラビア語、外側の日本語と繋がってるのかな？」と混乱して、表示がガタガタになってしまうことがあるんです。この`isolate`は、いわば「パーテーションを置く」ようなイメージですね。
—
困ったときは「大丈夫！」
このあたりの技術は、普段の日本語サイト制作ではあまり出番がないかもしれません。だからこそ、いざという時に「なんだっけ？」とつまずきやすいポイントなんです。
でも、安心してください。「文字が変な方向に飛んでいっちゃった！」というときは、「あ、ブラウザがどっちから読むか迷ってるんだな」と思い出して、この`direction`と`unicode-bidi`のことを思い出してみてください。
まとめ：今日のおさらい
1. directionは「読み進める方向」を決めるもの。
2. unicode-bidi: isolateは「外と混ぜないための隔離壁」を作るもの。
3. この2つをセットで使うと、多言語が混ざっても怖くない！
Webの世界は広大です。ときにはこんな風に「文字の書き方」という、少し深いところまで覗いてみると、また一段と制作の楽しみが増えますよ。
もし動かしてみてうまくいかなくても、それはあなたが成長している証拠です。焦らず、少しずつ試してみてくださいね。応援しています！
コメント