【入門編】dir属性による双方向テキスト（BiDi）の制御 – HTML実践ガイド

「右から左へ？」HTMLの`dir`属性で世界中の言葉をきれいに並べる魔法

Webサイトを作っていると、日本語や英語のような「左から右に読む」言語だけでなく、アラビア語やヘブライ語のように「右から左に読む」言語と出会う瞬間がやってきます。

「えっ、言語によって並び方が変わるの？パニック！」と不安になる必要はありません。HTMLには、そんな多言語の波を華麗に乗りこなすための`dir`属性という強力な武器が用意されています。

今日は、この`dir`属性を使って、テキストの配置やカーソルの動きを自由自在に操る方法を、一緒に紐解いていきましょう！

—

`dir`は「direction（方向）」の略です。HTML要素に「この中の文字はどっち向きに流れるの？」と教えるための道しるべのようなものですね。

基本の指定はとてもシンプルです。

—

まずは、基本的な使い方を見てみましょう。`p`タグや`h1`タグにこの属性を付けるだけで、ブラウザは「お、ここは右から書くんだな」と理解してくれます。

こんにちは！左から右へ流れるテキストです。

مرحبا (こんにちは！右から左へ流れるテキストです)

ここで面白いのが、カーソルの動きです。`dir=”rtl”`を指定すると、矢印キーでカーソルを動かしたときの挙動が、まるで鏡合わせのように反転します。右を押すと左に移動する……最初は少し不思議な感覚ですが、現地のユーザーにとってはそれが「自然な操作」なんです。

—

世界中からユーザーが来るサイトを作っていると、「どの言語が来るかわからない！」という状況がありますよね。そんな時に便利なのが `dir=”auto”` です。

これは、「中身の最初の文字を見て、右からか左からか自動判定する」という賢い機能です。

自動判定してくれる頼れる味方です。

お買い物のサイトで、ユーザーが自分の名前を入力するフォームなどを想像してみてください。ユーザーがアラビア語を入力した瞬間に、パッと入力欄が右揃えに切り替わったら……とても親切だと思いませんか？

—

さて、ここからが少しだけプロの領域。「`dir`属性を使っても、どうしても混ざってしまう！」というケースがあります。

例えば、左から右の文章の中に、突然右から左の言葉が混ざると、ブラウザは「どっちを優先すればいいの？」と混乱してしまいます。そんな時、Unicode制御文字という「隠しコマンド」を使うことがあります。

目には見えませんが、文字の間に「ここは右から書いてね！」「ここで方向をリセットして！」と指示を送る特殊なコード（制御文字）を忍ばせるんです。

「なんだか難しそう」と思いましたか？大丈夫です！まずは「`dir`属性を適切に指定すること」が基本中の基本。制御文字は、どうしても解決できないパズルに出会った時の「奥の手」として覚えておけばバッチリですよ。

—

最後に一つだけ大切なアドバイスです。`dir=”rtl”`を指定すると、CSSの`text-align`の設定にも影響が出ます。

「左」や「右」という固定の場所を指定するのではなく、「書き始め（start）」や「書き終わり（end）」と指定することで、言語の向きが変わっても柔軟に対応できるサイトになります。

—

`dir`属性は、単なるHTMLのタグではありません。それは、世界中の誰があなたのサイトに訪れても「使いやすい！」と感じてもらうためのおもてなしの心そのものです。

最初は難しく感じるかもしれませんが、まずは`dir=”rtl”`と書いてみて、カーソルが右から動く様子を眺めてみてください。「おっ、面白い！」と思えたら、もうあなたは立派なフロントエンドのエンジニアへの第一歩を踏み出しています。

迷ったときはいつでも戻ってきてくださいね。一緒に、世界中の人に届くWebサイトを作っていきましょう！