文字列の「並び順」に迷ったら？HTMLの「bdo」と「bdi」で多言語の世界を整えよう！
Webサイトを作っていると、英語や日本語だけでなく、アラビア語やヘブライ語といった「右から左へ流れる言語」と出会うことがあります。
「あれ、文字が変な方向に混ざっちゃった…」
「ブラウザが勝手に順番を入れ替えて表示してくる！」
そんな経験、ありませんか？ 実はこれ、ブラウザが気を利かせて「ここは右から書く言語だよね？」と自動で判断しようとして起きる、ちょっとしたおせっかいなんです。
今日は、そんな文字列の「順序」という、地味だけど奥が深い世界をコントロールするための秘密兵器、``要素と``要素についてお話しします。難しそうに聞こえますが、身近な例えでサクッと解決しちゃいましょう！
—
1. なぜ文字の順番が勝手に変わるの？
まず、なぜブラウザがそんなおせっかいをするのか、イメージしてみましょう。
例えば、「行列」を想像してください。普段の日本語や英語は「左から右」へ並びますよね。でも、アラビア語などは「右から左」へ並びます。もし、左から並ぶ人たちの列に、突然「右から並ぶルール」の人が混ざったらどうなるでしょう？
ブラウザは、「おっと、ここは右から書くルールの人だ。場所を入れ替えてあげなきゃ！」と、親切心で並び順を調整しようとします。これが「Unicode双方向アルゴリズム」と呼ばれる仕組みです。ただ、この自動調整が、時にはレイアウトを崩してしまう原因になるんですね。
—
2. 強制的に並び順をひっくり返す「bdo」
まずは ``（Bi-Directional Override：双方向のオーバーライド）です。これは、「ブラウザの自動判断なんて無視して、俺の指定した通りに並べろ！」という強制力を持つタグです。
お買い物リストを作る時に、あえて逆から読ませたいような特殊な演出をしたいときや、どうしても表示順を固定したいときに使います。
コード例
通常の表示：Hello!
bdoで逆転：
Hello!
ここがポイント：
`dir=”rtl”` と書くと右から左へ、`dir=”ltr”` と書くと左から右へ強制されます。本当に「どうしても今の順序を無視したい！」という時に使う、強力なスパナのような道具だと思ってください。
—
3. 混在する言語の「境界線」を守る「bdi」
次に登場するのが ``（Bi-Directional Isolate：双方向の隔離）です。こちらは `` よりもずっと優しくて、現代のWeb開発で非常によく使われます。
これは、「この中にある文字は、周りの空気に流されずに独立させておいてね」と伝えるタグです。
例えば、Webサイトのユーザー名表示を想像してください。
「ユーザーの `[名前]` さん、こんにちは！」という文章で、名前の部分に「アラビア語のユーザーさん」が入ったとします。もし名前が特殊な並び順だと、後ろの「さん、こんにちは！」まで巻き込まれて、表示順序がグチャグチャになってしまうことがあります。
コード例
こんにちは、
アラビア語の名前
さん！
ここがポイント：
`bdi` は「ここだけ別の島（独立した空間）」として扱うイメージです。周りの文章と干渉しないので、どんな言語がユーザー名に入ってきても、レイアウトが崩れる心配がありません。ユーザー投稿型のサイトを作るなら、ぜひ覚えておいてほしいテクニックです。
—
まとめ：使い分けはこれだけ！
難しく考えすぎてしまったかもしれませんが、基本はこの2つだけです。
- ``：とにかく指定した方向に強制的にひっくり返したいとき。「命令」するイメージ。
- ``：中身がどんな言語でも周りに影響を与えないように守りたいとき。「隔離」するイメージ。
Webサイトは世界中の人が見るものですから、こうした「文字の並び」を少し意識するだけで、あなたの作るサイトはグッとプロフェッショナルで、誰にとっても読みやすいものになりますよ。
最初は仕組みが不思議に感じるかもしれませんが、実際にコードを書いてみて「あ、本当に順番が変わった！」と実験してみるのが一番の近道です。ぜひ、今日のコードをエディタにコピペして遊んでみてくださいね！
大丈夫、一つずつ理解していけば、どんな言語の波も乗りこなせますよ。応援しています！
コメント