論理プロパティが必要な理由：国際化

従来のCSSでは、top、right、bottom、leftという物理的な方向を使用します。これらは英語のような左から右（LTR）の言語には適していますが、アラビア語やヘブライ語のような右から左（RTL）の言語や、伝統的な日本語のような縦書きの書字体系ではうまく機能しません。

次のように比較できます。

• 物理方向: top、right、bottom、left — 画面に固定された方向
• 論理方向: block-start、block-end、inline-start、inline-end — 書字モードを基準とする方向

すべての書字体系には、次の軸があります。

• ブロック軸: テキストブロックが積み重なる方向（LTR/RTLでは縦方向、縦書きでは横方向）
• インライン軸: 1行の中でテキストが流れる方向（LTR/RTLでは横方向、縦書きでは縦方向）

LTR（英語）では、inline-start = left、inline-end = rightです。RTL（アラビア語）では、inline-start = right、inline-end = leftです。論理プロパティを使うと、メディアクエリやJavaScriptなしで自動的に適応します。

物理プロパティで記述されたサイトでは、反転させる必要があるすべてのmargin、padding、border、position、テキストの配置プロパティについて、RTL用の上書きスタイルシートまたはプロパティごとの上書きが必要になります。これにより、保守作業が倍増します。

writing-mode: vertical-rl（日本語や韓国語の縦書き）を設定すると、ブロック軸は横方向になり、インライン軸は縦方向になります。論理プロパティは自動的に適応します。

主要なブラウザーはすべて論理プロパティをサポートしています。CSS仕様では現在、書字モードや方向によって変わる可能性がある方向に関係するプロパティには、論理プロパティを使うことを推奨しています。

論理プロパティを正しく使う単一のコードベースなら、重複なしでLTR、RTL、縦書きをサポートできます。CSSはルート要素のdirectionとwriting-modeの値に従うだけで済みます。

書字方向はCSSだけでなく、HTMLでも設定してください。

CSSを一度にすべて書き換える必要はありません。新しいコンポーネントから論理プロパティを使い始めてください。時間をかけて、国際化の影響を受けやすい領域にあるコンポーネントの物理プロパティを論理プロパティに置き換えていきます。

CSSのdirectionプロパティ（ltrまたはrtl）は、インライン方向に影響します。writing-modeと組み合わせて使うことで、要素の書字体系全体のコンテキストを定義します。

margin-leftのような物理CSSプロパティは、なぜRTLレイアウトで問題になるのでしょうか。

CSSの論理プロパティは、物理的なtop/right/bottom/leftではなく、ブロックとインラインのモデルを使用します。これにより、1つのスタイルシートでLTR、RTL、縦書きの書字体系に対応できます。directionとwriting-modeプロパティがコンテキストを定義し、論理プロパティはそのコンテキストに自動的に適応します。