こんにちは。君たち、日々のコーディングご苦労様。
最近、アラビア語圏やヘブライ語圏といった、いわゆる「RTL（Right-to-Left：右から左へ流れる言語）」を含むグローバル案件を任されることが増えてきたんじゃないかな？
「とりあえず `dir=”rtl”` を `` タグにぶち込んでおけば、ブラウザが勝手に反転してくれるっしょ」なんて甘い考えでいると、後から「デザインカンプと余白が逆なんですけど！」という戦慄のチャットが飛んできたりして、夜も眠れなくなる。分かるよ、その痛みは私も昔嫌というほど味わった。
さて、そんな国際化（i18n）の荒波にもまれる君たちに、今日はとっておきの切り札を紹介しよう。CSSの擬似クラス、`:dir()` だ。
これを使えば、ドキュメントの記述方向に応じたスタイリングが、これまでの「場当たり的なハック」から「洗練されたアーキテクチャ」へと生まれ変わる。さあ、ブラウザの裏側の挙動まで含めて、しっかりと頭に叩き込んでいってくれ。
—
1. なぜ従来の `[dir=”rtl”]` ではダメなのか？（現場の泥臭い現実）
まず、これまでのCSSで方向性を制御しようとしたとき、君たちはどう書いていた？
大体こんな感じのセレクタを書いているはずだ。
/ 従来の属性セレクタによるアプローチ /
.box {
margin-left: 20px;
}
[dir=”rtl”] .box {
margin-left: 0;
margin-right: 20px;
}
一見、これで動くように見える。だが、ここに大きな落とし穴が2つある。
1. カスケードの肥大化と特異度（Specificity）の戦い
属性セレクタを挟むことで、どうしてもCSSのセレクタ詳細度が上がってしまう。上書き、また上書きの連続で、気がつけばCSSのメンテンス性が地獄のようになっている現場を何度も見てきた。
2. 「継承」と「ネスト」の罠（ここが最重要）
ここが最大のポイントだ。例えば、大元が `dir=”ltr”`（英語など）であっても、一部分だけアラビア語の引用などを挿入するために、子要素に `dir=”rtl”` を明示的に指定することがあるよね？
従来の `[dir=”rtl”] .box` というセレクタだと、「親に `[dir=”rtl”]` があれば、その中の `.box` は全部反転する」ことになる。つまり、`dir=”ltr”` の親の中に `dir=”rtl”` の要素がネストしているような複雑な多言語混在ドキュメントにおいて、意図しないスタイルの継承バグを引き起こすんだ。
—
2. 救世主 `:dir()` 擬似クラスとは何か？
そこで登場するのが、今回の主役である `:dir()` 擬似クラス だ。
`:dir(ltr)` または `:dir(rtl)` は、HTML要素自身が持っている（あるいはブラウザが言語仕様から自動判定した）「実際の流れる方向」に直接マッチする。属性セレクタのように「親の属性を無理やり子孫にセレクタで引っかける」のではなく、要素そのもののステートを見に行く仕組みだ。
ブラウザの裏側で何が起きているか？
ブラウザのレンダリングエンジン（BlinkやWebKit、Geckoなど）は、HTMLの `dir` 属性（明示的な指定）だけでなく、HTML5の仕様に基づいて、文字コードや言語（`lang` 属性など）からテキストの方向性を動的に計算・解決している。
つまり、`:dir()` は単なる「属性の文字一致」を監視しているわけじゃない。ブラウザがDOMツリー構築時に算出した「論理的な方向性のコンテキスト」を直接フックしているんだ。だからこそ、先ほど挙げた「ネスト問題」に対しても、きわめて正確に、意図した要素ピンポイントでスタイルを当てることができる。
—
3. 実務で即戦力になるコード例
百聞は一見に如かずだ。モダンなフロントエンド開発において、論理プロパティ（Logical Properties）と `:dir()` を組み合わせた、最も美しく堅牢な実装パターンを見てみよう。
通常（LTR）のコンテンツ
この部分は左から右へ流れます。
محتوى RTL (عربي)
هذا النص مكتوب من اليمين إلى اليسار.
このコードの美しいポイント
1. 論理プロパティ（Logical Properties）とのシナジー
`margin-left` や `padding-right` といった物理的な指定を極力排除し、`margin-inline-end` や `border-inline-start` といった論理プロパティをベースに組んでいる。これにより、大半のレイアウト崩れは `:dir()` さらにはブラウザのデフォルト挙動だけで吸収できる。
2. ネスト時の圧倒的な安定感
仮に `dir=”ltr”` のコンテナの中に、一部だけ `dir=”rtl”` のエリアを作ったとしても、`:dir(rtl)` を付与した `.card` には確実にピンポイントでRTL用のスタイルが適用される。属性セレクタのように「親がどうであれセレクタの階層で誤爆する」という事故がピタリと止まるんだ。
—
4. チーフアーキテクトからの実践アドバイス（注意点）
さて、ここまで聞くと「明日から全部 `:dir()` に置き換えるぞ！」と意気込むかもしれないが、プロとして一点だけ注意点を伝えておこう。
- ブラウザサポートの現在地
`:dir()` 擬似クラス自体は、現在のモダンブラウザ（Chrome, Safari, Firefox, Edge）の主要バージョンでしっかりとサポートされている。レガシーブラウザ（IE11など、もう絶滅したはずだが）を考慮する必要がなければ、実務で投入して何ら問題ないフェーズにすでにきている。
- フォールバックの考え方
万が一、古いブラウザで `:dir()` が解釈されなかった場合を恐れる必要はない。大抵の場合、論理プロパティ（`inline-start` 等）が現代のブラウザで適切に解釈されていれば、方向性の制御はブラウザのデフォルト機能で最低限担保される。どうしても心配な場合は、従来通りの `[dir=”rtl”]` をベースにしたフォールバックを組み合わせるレイヤー構造を設計しておくと完璧だ。
国際化対応は、単に文字を翻訳するだけじゃない。UIの体験そのものをその文化圏のユーザーに最適化する、最高にエンジニアリングしがいのある領域だ。
この `:dir()` 擬似クラスの武器を懐に忍ばせて、次のグローバル案件ではレビューアーをうならせるような美しいコードを書いてみせてくれ。期待しているよ！
コメント