CSS 論理的プロパティと値

CSS 論理的プロパティと値 (CSS logical properties and values) モジュールは、物理的ではなく論理的に方向や寸法を対応付けて、レイアウトを制御することができるようにします。論理的プロパティは、対応する物理的プロパティに対する書字方向に関連した同等のものを定義します。

行の先頭は、常にその行の左側であるとは限りません。書き方によって、進行方向はさまざまです。例えば、

• 英語とポルトガル語は左から右に書き、新しい行は前の行の下に追加します。
• ヘブライ語とアラビア語は右から左に書く言語で、新しい行は前の行の下に追加します。
• 一部の書字方向では、テキストの行は垂直で、上から下に向かって書かれます。中国語、ベトナム語、韓国語、日本語は、伝統的に上から下に向かって垂直に書かれ、新しい行は前の行の左側に追加します。
• 伝統的なモンゴル語も上から下へ書く言語ですが、新しい行は前の行の右側に書きます。

このモジュールで定義される論理的プロパティにより、物理的な方向ではなく、コンテンツの書き方向に対する相対的なプロパティを定義することができます。これは、異なる書き方を持つ言語に翻訳されたコンテンツも、意図通りに表示されることを意味します。

論理的プロパティおよび値は、そのフローの方向を記述するために、「ブロック」と「インライン」という抽象的な用語を使用します。これらの用語の物理的な意味は、書字方向によって異なります。

ブロック寸法 は、行内のテキストのフローに対して垂直な寸法、つまり横書きでは縦の寸法、縦書きでは横の寸法です。標準的な英語のテキストでは、縦の寸法になります。

インライン寸法 は、行内のテキストのフローと並列です。つまり、横書きでは水平方向、縦書きでは垂直方向です。標準的な英語のテキストでは、水平方向です。

CSS は当初、物理的な座標のみで設計されていました。論理的プロパティおよび値モジュールは、多くの値およびプロパティについて、フローに関連した同等のものを定義します。以前は物理値のみを受け入れていたプロパティ (top, bottom, left, right) は、これでフローに関連した論理値 (block-start, block-end, inline-start, inline-end) も受け入れるようになりました。