おい、みんな。今日も一日お疲れさん。
国際化対応の案件で、右から左へ書く言語（RTL: Right-to-Left）のレイアウト調整に頭を悩ませた経験、あるんじゃないか？ `dir=”rtl”`属性を指定しても、細かなUIコンポーネントの調整が上手くいかず、結局`[dir=”rtl”] .some-element`みたいなセレクタを乱発して、CSSがどんどん肥大化していく…なんて泥臭い現場のリアル、俺も何度も経験してきたよ。

そんな国際化対応の「かゆいところに手が届く」存在として、今回は`:dir()`というCSSの方向疑似クラスに焦点を当てて、その真価と活用法を深掘りしていく。ただの属性セレクタじゃない、ブラウザの書字方向決定ロジックの奥底に触れる、まさに「極限の知見」だ。

—

【CSS極限の知見】国際化対応の切り札！`:dir()`方向疑似クラスを徹底解説

グローバルなサービス展開が当たり前になった現代において、Webサイトの国際化対応（i18n）は避けて通れない課題だ。特に中東やヘブライ語圏で使われるRTL言語への対応は、UI/UXの設計において大きな障壁となることがある。
これまで、HTMLの`dir`属性やCSSの`direction`プロパティを使って対応してきただろう。しかし、それだけではどうしても力不足な場面が出てくる。そんな時に、影ながら強力なサポートを提供してくれるのが、今回解説する`:dir()`疑似クラスなんだ。

1. `:dir()`とは何か？ — 基本のキホンと標準仕様

まず、`:dir()`疑似クラスが一体何者なのか、その基本的な仕様から紐解いていこう。

`:dir()`は、要素の書字方向（writing direction）が`ltr`（Left-to-Right: 左から右）か`rtl`（Right-to-Left: 右から左）かに基づいて要素を選択するための疑似クラスだ。

書式は非常にシンプルで、`セレクタ:dir(ltr)`または`セレクタ:dir(rtl)`のように記述する。

なぜ`[dir=”ltr”]`や`[dir=”rtl”]`ではダメなのか？ `:dir()`の真価

ここで疑問に思うかもしれない。「`[dir=”rtl”]`っていう属性セレクタで十分じゃないの？」と。
いや、それが違うんだ。ここに`:dir()`の真価が隠されている。

1. 継承された方向も考慮: `[dir]`属性セレクタは、HTML要素に直接`dir`属性が指定されている要素しか選択できない。しかし、要素の書字方向は親要素から継承されるんだ。つまり、``タグに`dir=”rtl”`が指定されていれば、明示的に`dir`属性を持たない子孫要素もすべてRTL方向になる。`:dir()`は、この最終的に決定された要素の書字方向を見て選択してくれる。
2. `direction`プロパティとの連携: CSSの`direction`プロパティによって書字方向が変更された場合も、`:dir()`はそれを正しく認識する。`[dir]`属性セレクタでは、CSSによる変更は検知できない。
3. ブラウザのデフォルト方向: 例えば、``タグに`dir`属性が指定されていない場合、ブラウザはデフォルトで`ltr`と判断する。`:dir(ltr)`はこのデフォルトの`ltr`要素も選択できる。

つまり、`:dir()`は単にHTMLの属性を見ているわけではない。ブラウザが「この要素の最終的な書字方向はこれだ」と内部的に判断した結果を利用する、よりセマンティックでパワフルなセレクタなんだ。国際化対応のCSSを書く上で、この「最終的な方向」に基づいてスタイルを適用できるのは、非常に大きなメリットになる。

2. ブラウザは`:dir()`をどう解釈しているのか？ — レンダリングエンジンの舞台裏

ここがまさにCSSの「極限の知見」と言える部分だ。ブラウザのレンダリングエンジンは、`:dir()`疑似クラスをどのように処理しているのだろうか？

要素の書字方向は、ブラウザにとって非常に重要なプロパティだ。テキストの描画、インライン要素の配置、スクロールバーの方向など、多くの視覚的な振る舞いに影響するからね。ブラウザは以下の優先順位で各要素の書字方向を決定している。

1. 要素自身の`dir`属性: 最も優先度が高いのは、その要素に直接指定された`dir`属性（`ltr`または`rtl`）。
2. CSSの`direction`プロパティ: `direction: ltr;`や`direction: rtl;`といったCSSプロパティ。ただし、これは`dir`属性より優先度が低いというより、`dir`属性が指定されていない場合の「最終的な解決策」として機能することが多い。厳密には、CSSの`direction`プロパティは書字方向を制御するが、`:dir()`疑似クラスが参照する「要素の基準となる書字方向」は、HTMLの`dir`属性や親からの継承が主となるケースが多い。ここが少し複雑で、`direction`プロパティは主にテキストの流れる方向に影響し、`:dir()`が参照するのはHTML要素のセマンティックな書字方向だ。しかし、多くのブラウザ実装では、`direction`プロパティも`:dir()`の評価に影響を与える。
3. 親要素からの継承: `dir`属性も`direction`プロパティも指定されていない場合、親要素の書字方向を継承する。
4. ``要素の`dir`属性: ドキュメントルートである``要素に指定された`dir`属性が、すべての要素のデフォルトの書字方向となる。
5. ブラウザのデフォルト: ``にも`dir`属性がない場合、多くのブラウザはデフォルトで`ltr`と判断する。

ブラウザのCSSエンジンは、DOMツリーを構築する過程で、このロジックに従って各要素の「解決済みの書字方向（resolved writing direction）」を決定している。`:dir()`疑似クラスは、この解決済みの書字方向が`ltr`なのか`rtl`なのかをチェックして、セレクタにマッチするかどうかを判断するんだ。

つまり、`:dir()`はレンダリングエンジンの内部で計算された、より正確な情報を元に選択を行うため、開発者が`dir`属性の有無や継承を気にすることなく、シンプルに「書字方向がRTLの場合」といった形でスタイルを記述できるわけだ。パフォーマンスへの影響については、ごく通常のセレクタと同じレベルで、特に心配する必要はない。

3. 現場で活きる！`:dir()`の具体的なユースケースと実践コード

さあ、いよいよ本番だ。この`:dir()`を実際の開発現場でどう活用していくか、具体的なコード例を交えて見ていこう。

ユースケース1: アイコンの反転 — UXを損なわない細やかな配慮

これはRTL対応で最も頻繁に遭遇するケースの一つだろう。右向きの矢印アイコンが「次へ」を意味するなら、RTL環境では左向きが自然だ。手動でアイコン画像を切り替えるなんて野暮なことはしない。CSSでスマートに解決しよう。

アイコンの方向調整

現在の書字方向: ltr

書字方向を切り替える (LTR/RTL)

解説:
`mask`プロパティでSVGアイコンを適用し、`:dir(rtl)`の時に`transform: scaleX(-1)`を使ってX軸で反転させている。これにより、一つのアイコンリソースでLTR/RTL両方に対応できる。これは非常にクリーンなアプローチだ。Font Awesomeのようなアイコンフォントを使う場合も同様に`transform`を適用できる。

ユースケース2: テキストアラインメントとマージンの調整 — 自然な視線誘導のために

RTL環境では、テキストは右揃えが自然に見えることが多い。また、マージンも左右が反転しているかのように調整する必要がある。例えば、リストアイテムのインデントやフォームのラベルと入力フィールドの間隔などだ。

テキストアラインメントとマージンの調整

現在の書字方向: ltr

書字方向を切り替える (LTR/RTL)

解説:
`text-align: right;`を`:dir(rtl)`に適用することで、ブロック内のテキスト全体を右揃えにしている。
また、`margin-inline-end`のようなCSS論理プロパティを使用している点に注目してほしい。これは`:dir()`疑似クラスと相性抜群のモダンなCSSプロパティで、`margin-inline-start`は書字方向の「開始側」（LTRなら左、RTLなら右）のマージン、`margin-inline-end`は「終了側」（LTRなら右、RTLなら左）のマージンを意味する。これを使えば、`:dir(ltr) .item-label { margin-right: 10px; } :dir(rtl) .item-label { margin-left: 10px; }`といった記述は不要になり、より簡潔で国際化に対応しやすいCSSが書けるんだ。`:dir()`と論理プロパティは、国際化対応の強力な両輪だと思っていい。

ユースケース3: レイアウトの方向転換 — Flexbox/Gridとの合わせ技

コンポーネント全体の配置をLTR/RTLで反転させたい場合も`:dir()`が役立つ。特にFlexboxやCSS Gridと組み合わせることで、複雑なレイアウトも柔軟に対応できる。

レイアウトの方向転換

現在の書字方向: ltr

Flexboxコンポーネント

サイドバーレイアウト

書字方向を切り替える (LTR/RTL)

解説:
Flexboxの`flex-direction`プロパティは、`row`（デフォルト、左から右）と`row-reverse`（右から左）を切り替えるだけで、アイテムの並び順を簡単に反転できる。`:dir(rtl)`の時に`flex-direction: row-reverse;`を指定することで、メインコンテンツとサイドバーの位置関係をRTL向けに一発で調整できる。CSS Gridでも`grid-auto-flow: dense;`や`grid-template-areas`と組み合わせて、`:dir(rtl)`でレイアウトを調整することが可能だ。

4. `:dir()`を使う上でのベストプラクティスと注意点

ここまで`:dir()`の強力な活用法を見てきたが、もちろん万能ではないし、いくつか注意点がある。

セマンティクスとの兼ね合い

`:dir()`はあくまで視覚的な表現を調整するためのツールだ。HTMLの`dir`属性は、ドキュメントや要素の書字方向のセマンティクスを伝えるためのもの。これらを適切に使い分けることが重要だ。特にユーザーが入力するテキストなど、言語の書字方向が混在する可能性がある場合は、`bdi`要素や`unicode-bidi`プロパティも検討する必要がある。

CSS論理プロパティ（`margin-inline-start`など）との併用

これは先にも触れたが、`:dir()`と並んで国際化対応CSSのデファクトスタンダードになりつつあるのが、CSS論理プロパティだ。
`margin-left`の代わりに`margin-inline-start`、`padding-right`の代わりに`padding-inline-end`、`left`の代わりに`inset-inline-start`など、物理的な方向ではなく、書字の「流れ」に基づいたプロパティを使うことで、`:dir()`での条件分岐を減らし、より保守性の高いCSSを書くことができる。

/ 従来の書き方 (冗長) /
.element {
margin-left: 10px;
}
:dir(rtl) .element {
margin-left: 0; / リセット /
margin-right: 10px;
}

/ 論理プロパティを使った書き方 (スマート) /
.element {
margin-inline-start: 10px; / LTRなら左、RTLなら右のマージンになる /
}

論理プロパティのサポート状況も非常に良いので、積極的に取り入れていこう。`:dir()`は、論理プロパティでは対応しきれない「特定のコンポーネント全体を反転させる」ようなケースで真価を発揮すると考えると良いだろう。

ブラウザサポート状況とフォールバック

`:dir()`疑似クラスは、主要なモダンブラウザ（Chrome, Firefox, Safari, Edge）では問題なくサポートされている。ただし、Internet Explorerはサポート対象外だ。もしIEのサポートが必要なプロジェクトであれば、`:dir()`は使えず、`[dir=”rtl”]`のような属性セレクタと、JavaScriptによる`dir`属性の動的付与を組み合わせるなどのフォールバックを検討する必要がある。

JavaScriptとの連携

基本的にはCSSで完結させるべきだが、動的に要素の書字方向が変更されるような、より複雑なアプリケーションでは、JavaScriptで`dir`属性を操作したり、`direction`プロパティを変更したりすることがある。その際、`:dir()`は自動的にその変更を検知してスタイルを適用してくれるため、非常に効率的だ。

まとめ

`:dir()`方向疑似クラスは、単なる`dir`属性セレクタの延長線上にあるものではない。ブラウザが内部的に解決した要素の書字方向を正確に捉え、スタイルを適用できる、非常にセマンティックでパワフルなツールだ。

国際化対応のUI開発において、アイコンの反転、テキストアラインメントの調整、そしてFlexboxやGridを使ったレイアウトの方向転換など、`:dir()`は我々の「かゆいところ」にしっかりと手が届く。

特にCSS論理プロパティとの組み合わせは、これからの国際化対応CSS設計の強力なベストプラクティスとなるだろう。モダンブラウザのサポート状況も良好なので、IE対応の必要がないプロジェクトであれば、積極的に導入して、より堅牢で保守しやすい多言語対応サイトを構築してほしい。

この`:dir()`を使いこなすことができれば、国際化対応の課題に直面したとき、きっと頼りになる切り札となるはずだ。
さあ、この知見を胸に、また明日からの開発も頑張っていこうぜ！