こんにちは！フロントエンドの現場を渡り歩いているライターです。
Web制作を学んでいると、「HTMLのタグってこんなに種類があるの？」と途方に暮れてしまうこと、ありますよね。特に今回お話しする「bdo」や「bdi」といったタグは、普段の制作ではあまり出番がないため、まるで「忘れ去られた小道具」のように感じてしまうかもしれません。
でも、安心してください。これらは、世界中の人たちがインターネットを使うために用意された、とても優しくて「賢い」タグなんです。今日は、このちょっとマニアックだけど大切なタグたちについて、身近な例えを交えながら紐解いていきましょう！
—
テキストの「方向」って何？
普段私たちが書いている日本語や英語は、左から右へ文字が流れていきますよね。でも、世界にはアラビア語やヘブライ語のように、「右から左へ」向かって書く言語がたくさんあるんです。
Webブラウザは優秀なので、言語設定に合わせて自動的に文字の流れを調整してくれます。でも、「あえて強制的にひっくり返したい！」とか「周りの影響を受けずに守りたい！」というシーンが出てきたらどうしましょう？
そこで登場するのが、`bdo`タグと`bdi`タグです。
—
1. bdoタグ：テキストを「あえて」逆向きにする（命令）
`bdo`は「Bi-Directional Override（双方向のオーバーライド）」の略です。
イメージとしては、「鏡に映した文字」を作るようなもの。どんなにブラウザが賢くても、「この部分は絶対に反対から書け！」と強制的に指示を出すタグです。
どんな時に使うの？
例えば、デザイン上の遊び心で「あえて逆さまにしておしゃれに見せたい」というケースや、特殊な暗号のような表現を作りたい時に使います。
通常の文字：Hello!
逆さまの文字：Hello!
「右から左へ」という命令（`rtl`）を渡すことで、文字の並び順を物理的にひっくり返すことができるんです。まるでパズルみたいで面白いですよね。
—
2. bdiタグ：周囲から「隔離」して守る（保護）
次は`bdi`タグです。これは「Bi-Directional Isolation（双方向の隔離）」の略。
`bdo`が「強制」なら、`bdi`は「隔離」です。
想像してみてください。あなたは今、名札を並べて掲示板を作っています。そこに、色々な国から来た人たちの名前を並べるとします。もし、名前の中に「右から左へ書く言語」が含まれていたら、掲示板全体のレイアウトがグチャグチャに崩れてしまうかもしれません。
そんな時、`bdi`タグで名前を囲ってあげると、「この人の名前は、外側のルールに干渉させないでね！」とブラウザに伝えることができます。
お買い物のレシートで例えると…
通販サイトで「購入者：[名前] 様」という表示を作るとしましょう。ユーザー名にどんな文字が入ってくるか予測できませんよね？`bdi`を使っておけば、どんな言語の名前が来ても、周りの「購入者：」という日本語のレイアウトを壊さずに守ってくれるんです。
- 購入者：Taro 様
- 購入者：أحمد 様
—
迷ったときはこう考えよう！
「これ、いつ使うの？」と迷ったら、こうやって整理してみてくださいね。
- bdo：自分の意思で「あえて逆にしたい」とき。（デザインや演出）
- bdi：「他人の言語のクセから、自分のデザインを守りたい」とき。（掲示板、ユーザー名表示など）
最初は難しく感じるかもしれませんが、これらは「Webという世界共通のツールを、誰が使っても崩れないようにする」ための、エンジニアの優しさが詰まったタグたちなんです。
もし現場で「変な言語が混ざってレイアウトが崩れちゃった！」というトラブルに遭遇したら、この`bdi`のことを思い出してください。「大丈夫、隔離してあげれば解決するよ」と、きっと助けになってくれるはずです。
HTMLのタグ一つひとつには、必ず誰かの役に立つ理由があります。これからも一緒に、楽しみながら学んでいきましょうね！
コメント