CSS 論理プロパティおよび値 レベル 1

1. はじめに

注: 書字モードの適切な導入については [css-writing-modes-4] を参照してください。本モジュールではその用語に慣れていることを前提とします。

異なる書記体系は異なる方向で書かれるため、 さまざまな 書字モード が存在します: 左から右、上から下; 右から左、上から下; 下から上、右から左; など。 ページや行の「開始」のような論理的な概念は、 行の「上部」や段落の「左端」のような物理的な概念と異なる対応を持ちます。 レイアウトのいくつかの側面は実際には書字方向に依存しており、 ページが別の体系に翻訳された場合に変化します; 他のものは本質的にページの物理的な向きに依存しています。

例えば、 英語ではリスト、見出し、段落は通常左揃えですが、 実際には開始位置に揃えられています。アラビア語では同じ構成要素が右揃えになり、 多言語文書では両方の書記体系に対応する必要があります。

次のコード例は、論理構文を使うことで 異なる書記体系で動作するコードを書きやすくなることを示しています：

<blockquote dir="auto">Quotation in English</blockquote>
<blockquote dir="auto">اقتباس في العربية</blockquote>

blockquote {
    text-align: start; /* ラテン語では左、アラビア語では右 */
    margin-inline-start: 0px; /* ラテン語ではmargin-left、アラビア語ではmargin-right */
    border-inline-start: 5px solid gray; /* ラテン語ではborder-left、アラビア語ではborder-right */
    padding-inline-start: 5px; /* ラテン語ではpadding-left、アラビア語ではpadding-right */
}

文書には論理プロパティと物理プロパティの両方が必要な場合があります。例えば ページ上のボタンのドロップシャドウは常に一貫性を保つ必要があるため、 そのオフセットは視覚的な観点や物理的な方向に基づいて選択され、 書字体系によって変化しません。

CSSは元々物理座標のみをコントロールして設計されたため、 本モジュールはテキストフロー依存の同等プロパティを導入し、 CSSスタイルシートの宣言を フロー依存 の用語で表現できるようにします。 同等プロパティのマッピングとカスケーディング、 CSS2.1と同等の新しいプロパティと値、 それらの構文を導出するための原則を定義します。 今後のCSS仕様は両座標セットをプロパティと値の定義に取り入れることが期待されており、 本モジュールでは新しいCSS機能の フロー依存 バリアントの導入は追跡しません。

CSS Writing Modes の 抽象ボックス用語 セクションでは、 フロー依存と物理用語とのマッピング方法を定義しています。 このマッピングは、 used values の writing-mode と direction に依存し、 フロー依存キーワードやプロパティの解釈を制御します。

注: text-orientation: upright との組み合わせにより、 used direction は computed values の writing-mode および text-orientation に依存します。

2. フロー依存値: block-start, block-end, inline-start, inline-end

物理方向のキーワード値 (top, bottom, left, または right) を受け付けるプロパティは 適切な フロー依存 方向キーワードも受け付けるように再定義されています。 この場合、 フロー依存値は対応する物理値の代わりに利用できます。 複数のキーワードを指定できるプロパティでは、 フロー依存値と物理値の組み合わせは許可されません （将来の仕様で別途指定されない限り）。

プロパティは一次元または二次元のいずれかです。 文脈によって一次元に限定される場合、 フロー依存キーワードは省略形になります。

2.1. caption-side プロパティ用の論理値

これら2つの値は left および right の値を caption-side でサポートする実装のみに追加されます。 left および right の値自体は 行依存 として定義されます。

既存の top および bottom の値は慣習的に再定義され、 それぞれ block-start および block-end 側に割り当てられます。

このプロパティのマッピングはキャプションの 書字モード （つまり テーブルラッパーボックス）の 包含ブロック を使います。

2.2. float および clear プロパティ用のフロー依存値

これらのプロパティのマッピングは要素の 書字モード の 包含ブロック を使います。

注: これらのプロパティはCSS2では一次元ですが、 二次元に拡張される予定があり、 そのため省略されていない フロー依存 キーワードが与えられています。

2.3. text-align プロパティ用のフロー依存値

これらの値は [css-text-3] で規定されています。

2.4. resize プロパティ用のフロー依存値

3. フロー依存ページ分類

CSSでは、すべてのページはユーザーエージェントによって左ページまたは右ページに分類されます。[CSS21] ただし、スプレッド内で最初のページがどちらになるかは、ページ進行が左から右か右から左かによって異なります。

ページ分割の制御をスプレッドの左側や右側ではなく、 スプレッドのより早い側または遅い側のページに対して行えるようにするため、 本モジュールは page-break-after および page-break-before プロパティに対して次の追加キーワードを導入します [CSS21]:

recto

左から右のページ進行では right、 右から左のページ進行では left と同等です。

verso

左から右のページ進行では left、 右から左のページ進行では right と同等です。

これらの値は指定通りに算出され、 [css-break-3] でさらに定義されています。

著者は通常ページ番号を物理的な配置で配置しますが、 ヘッダーの内容はスプレッド内のどちらが先かにより慣習に従う場合があります。 そのため、次のフロー依存 ページセレクター も追加され、 フロー依存ページ選択をサポートします：

:recto

左から右のページ進行では ':right'、 右から左のページ進行では ':left' と同等です。

:verso

左から右のページ進行では ':left'、 右から左のページ進行では ':right' と同等です。

フロー依存ページセレクターの詳細度は ':left' および ':right' ページセレクターと同じです。

4. フロー依存ボックスモデルプロパティ

この仕様は、フロー依存な 物理ボックスモデルプロパティの同等物となる 新しいCSSプロパティを導入します。 関連するフロー依存のロングハンドプロパティと それに対応する物理プロパティのセットは、 論理プロパティグループ を構成します。 例えば、padding-* プロパティ群は 1つの 論理プロパティグループ を構成し、 margin-* プロパティ群は別の 論理プロパティグループ を構成します。 など。 方向や軸のマッピングの種類 （フロー依存または物理）は プロパティの マッピングロジック と呼ばれます。

注: 各ロングハンドプロパティは、最大で1つの 論理プロパティグループ に属します。

指定値は フロー依存プロパティと 物理プロパティで異なりますが、 フロー依存プロパティと物理プロパティは算出値を共有します。 どのプロパティペアが算出値を共有するかは、 要素の writing-mode、 direction、 text-orientation の算出値によって決まります。

注: 要素自身の writing-mode に基づいて 各 フロー依存プロパティを 物理プロパティにマッピングすることで カスケード計算が単純化され、 著者にとって分かりやすいモデルとなります。 しかし多くの場合問題があり、 例えば この議論 を参照してください。 要素の writing-mode が親と異なる場合、 著者は正しいマッピング動作を得るために ネストした要素を使う必要があるかもしれません。

フロー依存プロパティと物理プロパティの両方を入力とする算出値は、 両方の宣言にCSSカスケードを適用することで決定されます。 上書きは宣言がフロー依存か物理かではなく、 CSSカスケードの規則 [css-cascade-3] のみで決まります。

このため実装はCSS宣言ブロック内の宣言の相対順序を維持する必要がありますが、 これは以前のCSSカスケードでは要求されていませんでした。

p {
  margin-inline-start: 1px;
  margin-left: 2px;
  margin-inline-end: 3px;
}

[CSSOM] のような算出値を返すAPI （getComputedStyle() など）は、 そのようなプロパティの同等ペアに対して同じ値を返さなければなりません。

フロー依存プロパティの継承順序とマッピング、 ショートハンドと論理プロパティの相互作用 について未解決の課題があります。

4.1. 論理的高さ・幅: block-size と inline-size プロパティ

これらのプロパティは width、 height プロパティに対応します。 マッピングは要素の writing-mode に依存します。

これらのプロパティは min-width、 min-height プロパティに対応します。 マッピングは要素の writing-mode に依存します。

これらのプロパティは max-width、 max-height プロパティに対応します。 マッピングは要素の writing-mode に依存します。

4.2. フロー依存マージン: margin-block-start、margin-block-end、margin-inline-start、margin-inline-end プロパティおよび margin-block、margin-inline ショートハンド

これらのプロパティは margin-top、margin-bottom、margin-left、margin-right プロパティに対応します。 マッピングは要素の writing-mode、 direction、 text-orientation に依存します。

これら2つの ショートハンドプロパティ は、 margin-block-start & margin-block-end、 margin-inline-start & margin-inline-end をそれぞれ設定します。 1つ目の値は start エッジのスタイルを表し、 2つ目の値は end エッジのスタイルを表します。 1つの値だけが指定された場合、startとendの両エッジに適用されます。

4.3. フロー依存オフセット: inset-block-start、inset-block-end、inset-inline-start、inset-inline-end プロパティおよび inset-block、inset-inline、inset ショートハンド

これらのプロパティは top、bottom、left、right プロパティに対応します。 マッピングは要素の writing-mode、direction、text-orientation に依存します。

これら2つの ショートハンドプロパティ は、 inset-block-start & inset-block-end、 inset-inline-start & inset-inline-end をそれぞれ設定します。 1つ目の値は start エッジのスタイルを表し、 2つ目の値は end エッジのスタイルを表します。 1つの値だけが指定された場合、startとendの両エッジに適用されます。

この ショートハンドプロパティ は、top、right、bottom、left プロパティを設定します。 値は 下位プロパティ に margin と同様に割り当てられます。

4.4. フロー依存パディング: padding-block-start、padding-block-end、padding-inline-start、padding-inline-end プロパティおよび padding-block、padding-inline ショートハンド

これらのプロパティは padding-top、padding-bottom、padding-left、padding-right プロパティに対応します。 マッピングは要素の writing-mode、direction、text-orientation に依存します。

これら2つの ショートハンドプロパティ は、 padding-block-start & padding-block-end、 padding-inline-start & padding-inline-end をそれぞれ設定します。 1つ目の値は start エッジのスタイルを表し、 2つ目の値は end エッジのスタイルを表します。 1つの値だけが指定された場合、startとendの両エッジに適用されます。

4.5. フロー依存ボーダー

4.5.1. フロー依存ボーダー幅: border-block-start-width、border-block-end-width、border-inline-start-width、border-inline-end-width プロパティおよび border-block-width、border-inline-width ショートハンド

これらのプロパティは border-top-width、border-bottom-width、border-left-width、border-right-width プロパティに対応します。 マッピングは要素の writing-mode、direction、text-orientation に依存します。

これら2つの ショートハンドプロパティ は、 border-block-start-width & border-block-end-width、 border-inline-start-width & border-inline-end-width をそれぞれ設定します。 1つ目の値は start エッジの幅を表し、 2つ目の値は end エッジの幅を表します。 1つの値だけが指定された場合、startとendの両エッジに適用されます。

4.5.2. フロー依存ボーダースタイル: border-block-start-style、border-block-end-style、border-inline-start-style、border-inline-end-style プロパティおよび border-block-style、border-inline-style ショートハンド

これらのプロパティは border-top-style、border-bottom-style、border-left-style、border-right-style プロパティに対応します。 マッピングは要素の writing-mode、direction、text-orientation に依存します。

これら2つの ショートハンドプロパティ は、 border-block-start-style & border-block-end-style、 border-inline-start-style & border-inline-end-style をそれぞれ設定します。 1つ目の値は start エッジのスタイルを表し、 2つ目の値は end エッジのスタイルを表します。 1つの値だけが指定された場合、startとendの両エッジに適用されます。

4.5.3. フロー依存ボーダーカラー: border-block-start-color、border-block-end-color、border-inline-start-color、border-inline-end-color プロパティおよび border-block-color、border-inline-color ショートハンド

これらのプロパティは border-top-color、border-bottom-color、border-left-color、border-right-color プロパティに対応します。 マッピングは要素の writing-mode、direction、text-orientation に依存します。

これら2つの ショートハンドプロパティ は、 border-block-start-color & border-block-end-color、 border-inline-start-color & border-inline-end-color をそれぞれ設定します。 1つ目の値は start エッジのスタイルを表し、 2つ目の値は end エッジのスタイルを表します。 1つの値だけが指定された場合、startとendの両エッジに適用されます。

4.5.4. フロー依存ボーダーショートハンド: border-block-start、border-block-end、border-inline-start、border-inline-end プロパティおよび border-block、border-inline ショートハンド

これらのプロパティは border-top、border-bottom、border-left、border-right プロパティに対応します。 マッピングは要素の writing-mode、direction、text-orientation に依存します。

これら2つの ショートハンドプロパティ は、 border-block-start & border-block-end、 border-inline-start & border-inline-end をそれぞれ設定します。

4.6. フロー依存の角丸: border-start-start-radius、border-start-end-radius、border-end-start-radius、border-end-end-radius プロパティ

これらのプロパティは border-top-left-radius、border-bottom-left-radius、border-top-right-radius、border-bottom-right-radius プロパティに対応します。 マッピングは要素の writing-mode、direction、text-orientation に依存します。

4.7. 4方向ショートハンドプロパティ: margin、padding、border-width、border-style、border-color ショートハンド

margin、padding、border のショートハンドプロパティはデフォルトで物理プロパティの値を設定します。 しかし著者はプロパティ値の先頭に logical キーワードを指定することで、 その値が物理プロパティではなくフロー依存プロパティにマッピングされることを示すことができます。

この機能の提案された構文は 議論中であり、 ここで記載されている内容から変更される可能性が非常に高いです。 このセクションは代替案の議論を促進し、 影響を受けるプロパティを記録し、 最終的に選択される構文スイッチの解釈への影響を明確にするために草案に残しています。

次の [CSS21] のショートハンドプロパティは logical キーワードを受け付けます：

• inset
• margin
• padding
• border-width
• border-style
• border-color
• scroll-padding
• scroll-margin

これらのプロパティの構文は、

<value-type>{1,4}

を

logical? <value-type>{1,4}

に置き換えることで事実上変更されます。

logical キーワードが値に指定された場合、 その後に続く値は以下のようにフロー依存ロングハンドに割り当てられます：

• 値が1つだけの場合、その値は4つのフロー依存 ロングハンドすべてに適用されます。
• 値が2つの場合、1つ目が block-start と block-end、2つ目が inline-start と inline-end に適用されます。
• 値が3つの場合、1つ目が block-start、2つ目が inline-start と inline-end、3つ目が block-end に適用されます。
• 値が4つの場合、block-start、inline-start、block-end、inline-end の順に適用されます。

blockquote {
  margin: logical 1em 2em 3em 4em;
}
blockquote {
  margin-block-start:  1em;
  margin-inline-start: 2em;
  margin-block-end:    3em;
  margin-inline-end:   4em;
}

5. 謝辞

Cameron McCormack, David Baron, Shinyu Murakami, Tab Atkins

6. 変更点

前回の作業草案からの変更点：

• 論理 background および border-images の機能を削除。 （これらの案は今後の草案で再検討される可能性があります。）
• 論理 border-radius ロングハンドを追加。

以前の編集者草案と 2017年5月18日初公開草案 の間の変更点：

• すべてのプロパティが要素に指定された writing mode を使ってカスケードするよう変更（親ではなく）。
• margin 系ショートハンド内のロングハンド順序を inline-start を inline-end より前に。
• margin/border/padding 用に *-inline および *-block のショートハンド形式を追加。
• offset-* プロパティを inset-* に改名し、議論用の課題を付記。
• 「はじめに」セクションの追加。
• CSS Writing Modes の用語を最新化。
• その他の文章の整理。