CSS 論理プロパティと値モジュール レベル1

1. 導入

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

異なる書記体系では記述方向が異なるため、 様々な書字モードが存在します： 左から右、上から下; 右から左、上から下; 下から上、右から左; などです。 “ページの開始” や “行の開始” などの論理的な概念は、 “行の上端” や “段落の左端” など物理的な概念と異なるマッピングになります。 レイアウトの一部の側面は実際には書字方向に対して相対的に決定されるため、 ページが別のシステムに翻訳されるときに変化し得ます。 一方、他の側面はページの物理的な向きに本質的に依存します。

例えば、 英語ではリスト、見出し、段落は通常左揃えになりますが、 実際には「開始揃え」です。アラビア語では同じ構造が右揃えとなるため、 多言語文書では両方の書記体系に対応できる必要があります。

以下のコードは論理構文を使うことで異なる書記体系を横断して動作するコードを書ける例を示しています：

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

blockquote {
    text-align: start; /* ラテン文字はleft、アラビア語はright */
    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 valueであるwriting-mode、direction、text-orientation の値によって、フロー相対キーワード・プロパティの解釈が変わります。

注: text-orientation: upright との相互作用のため、 used direction は computed value である writing-mode および text-orientation に依存します。

1.1. 値の定義

この仕様は、CSS2のCSSプロパティ定義慣例に従い、[CSS2] および 値定義構文 ([CSS-VALUES-3]) を用います。 この仕様で定義されていない値型は CSS Values & Units [CSS-VALUES-3] で定義されています。 他モジュールとの組み合わせでこれらの値型の定義が拡張される場合があります。

各定義に記載されているプロパティ固有値の他、 本仕様で定義されるすべてのプロパティは CSS全域キーワードを値として受け付けます。 読みやすくするため本文中には明示的に繰り返していません。

2. フロー相対値: block-start, block-end, inline-start, inline-end

多くのCSSプロパティは歴史的に、方向キーワード値 （物理的、top、bottom、left、right）を受け入れてきました。 本仕様では、方向キーワード値としてフロー相対値（block-start、block-end、inline-start、inline-end）を導入します。

プロパティの効果は1次元または2次元のいずれかです。 文脈的に1次元に制限される場合は フロー相対キーワードは短縮形（startおよびend）になります。

CSS Level 2のプロパティはここで、フロー相対方向キーワードも受け付けるよう再定義されます。 これらの値は対応する物理値の代わりに利用できます。 複数キーワードをとるプロパティでは、 フロー相対値と物理値の併用はできません（将来の仕様で別途定義される場合を除く）。

注: 最近のCSS仕様では多くの場合、フロー相対ないし行相対の値を 物理値に加えて、あるいは代わりに定義することが期待されています。 これら相対値のマッピングは、一般に ボックス自身に影響する場合は書字モードを包含ブロックに従い、 内容に対しては自身の書字モードを使うのが原則です。 ただし、どの書字モードに従うかは明示定義が必要です。

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

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

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

このプロパティのマッピングは、キャプションの 書字モード を、その 包含ブロック（すなわち table wrapper box）で使用します。

2.2. float および clear プロパティのフロー相対値

これらのプロパティのマッピングは、要素の書字モードをその包含ブロックに従って行います。

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

2.3. text-align プロパティのフロー相対値

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

3. フロー相対ページ分類

CSS では、すべてのページはユーザーエージェントにより左ページまたは右ページのいずれかに分類されます。[CSS2] ただし見開きでどちらが先頭ページになるかは、 ページ進行が左から右か右から左かによります。

見開きの左側や右側ではなく、見開き内で早い側・遅い側を指定して 改ページ制御ができるようにするため、 このモジュールでは page-break-after および page-break-before プロパティのために、次の追加キーワードを導入します [CSS2]:

recto

左から右のページ進行では right、 右から左のページ進行では left に相当します。

verso

左から右のページ進行では left、 右から左のページ進行では right に相当します。

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

著者は通常ページ番号を物理的な位置指定で配置しますが、 ヘッダーの内容は見開き中のどちらのページが早い側かによる慣習に従うことが多いです。 そのため、フロー相対の ページセレクタ も、フロー相対ページ選択をサポートするために次のように追加されました：

:recto

左から右のページ進行では ':right'、 右から左のページ進行では ':left' に相当します。

:verso

左から右のページ進行では ':left'、 右から左のページ進行では ':right' に相当します。

フロー相対ページセレクタの詳細度（specificity）は ':left' および ':right' ページセレクタと等しいです。

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

多くの整形効果においては、 影響を受ける軸や方向が値ではなくプロパティ名に符号化されています。 各プロパティの方向や軸のマッピングタイプ （フロー相対または物理） を マッピングロジック と呼びます。 これまで、すべてのプロパティは物理用語で符号化されてきましたが、 本仕様ではCSS2の物理ボックスモデルプロパティに フロー相対となる等価プロパティを新たに導入します。

注: 最近のCSS仕様では多くの場合、フロー相対または行相対プロパティを 物理的プロパティの代わりに、または加えて定義することが期待されています。

各組のフロー相対プロパティと物理プロパティは （ショートハンドプロパティを無視して） 箱の各辺や寸法に等価なスタイルを設定する関係にあり、 これを 論理プロパティグループ と呼びます。 例えば padding-* プロパティは 一つの論理プロパティグループを形成、 margin-* プロパティは 別の論理プロパティグループ、 border-*-style プロパティは さらに別の論理プロパティグループ などです。 （各ロングハンドプロパティは高々1つの論理プロパティグループに属します。）

各論理プロパティグループ内で 対応づけられるフロー相対プロパティと物理プロパティは 要素自身の算出済み 書字モードによってペアになります。 各プロパティの指定値は distinct のままですが、 ペアとなるプロパティは算出値を共有します。 この共有値はカスケード手順で両方の宣言をまとめて評価して決まります。 つまり、そのペアの両プロパティの算出値は CSSカスケードで優先度の高い方の指定値から導出されます。 [CSS-CASCADE-3]

注：これは実装において CSS宣言ブロック内での宣言順序の相対維持を必要とします（従来のCSSカスケードにはありませんでした）。 また、writing-mode、direction、text-orientation を先に算出済みにする必要があります。 フロー相対宣言と物理宣言のカスケードを正しく行い 論理プロパティグループの 算出値を決定する必要があります。

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

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

注: 要素自身の書字モードでそれぞれのフロー相対プロパティから 物理的等価プロパティへのマッピングを判断するのは、 カスケード計算を単純にし、著者の理解を容易にします。 ただし実際には多くのケースで問題があり、このディスカッションなどを参照してください。 要素の書字モードを親から変更する場合には 正しいマッピング動作を得るために入れ子要素を使う必要があるかもしれません。

各プロパティの継承元は親の対応プロパティです。 例えば、inline-start マージンがrtlボックスで右マージンに相当していても、 このボックスの margin-inline-start は 親の margin-inline-start を継承します（たとえ実際それが親の 左マージンに相当する場合でも）。

別途定義がない限り、論理・物理ロングハンド両対応のショートハンドプロパティ （例：all ショートハンド）は 物理ロングハンドを最後に設定します。 たとえば all: inherit は すべてのmarginプロパティをinheritにしますが、 物理ロングハンドが最後に設定されるため、 子要素のマージンは親の物理対応プロパティから継承されます。

4.1. 論理的高さおよび論理的幅: block-size／inline-size、min-block-size／min-inline-size、 およびmax-block-size／max-inline-sizeプロパティ

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

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

これらのプロパティは max-height および max-width プロパティに対応します。 マッピングは要素の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 をそれぞれ設定します。 最初の値は開始辺のスタイルを表し、 2 番目の値は終端辺のスタイルを表します。 1つだけ値が与えられた場合、開始と終端の両辺に適用されます。

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

top、left、bottom、right などの物理プロパティ、それに対応する inset-block-start、inset-block-end、inset-inline-start、inset-inline-end などのフロー相対プロパティ、 そして inset-block、inset-inline、inset ショートハンドは、まとめて inset プロパティと呼ばれます。

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

これら 2 つのショートハンドプロパティは inset-block-start、inset-block-end、inset-inline-start、inset-inline-end をそれぞれ設定します。 最初の値は開始辺のスタイルを表し、 2 番目の値は終端辺のスタイルを表します。 1つだけ値が与えられた場合、開始と終端の両辺に適用されます。

このショートハンドプロパティは 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 をそれぞれ設定します。 最初の値は開始辺のスタイルを表し、 2 番目の値は終端辺のスタイルを表します。 1つだけ値が与えられた場合、開始と終端の両辺に適用されます。

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 をそれぞれ設定します。 最初の値は開始辺の幅を表し、 2 番目の値は終端辺の幅を表します。 1つだけ値が与えられた場合、開始と終端の両辺に適用されます。

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 をそれぞれ設定します。 最初の値は開始辺のスタイルを表し、 2 番目の値は終端辺のスタイルを表します。 1つだけ値が与えられた場合、開始と終端の両辺に適用されます。

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 をそれぞれ設定します。 最初の値は開始辺の色を表し、 2番目の値は終端辺の色を表します。 1つだけ値が与えられた場合、開始と終端の両辺に適用されます。

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 に依存し、最初の start/end がブロック軸側、2番目がインライン軸側を指定します（つまり 'border-block-inline-radius' のようになります）。

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

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

この機能の提案構文は 議論中 であり、ここで記述されたものから変更される可能性が極めて高いです。 代替案の議論促進、該当プロパティの記録、そして最終的に選ばれる構文スイッチの解釈への期待されるインパクトを明確にするため、この節はドラフトに残されています。

以下の [CSS2] のショートハンドプロパティは 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つの場合、最初がblock-start・block-end、2番目がinline-start・inline-end用。
• 値が3つの場合、最初が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, Oriol Brufau, Shinyu Murakami, Tab Atkins

6. 変更点

2018年8月27日ワーキングドラフト以降の変更点:

• フロー相対プロパティの継承を定義。
• resize のフロー相対値を [CSS-UI-4] に移動。
• 仕様の大部分を明確さのため編集上書き。
• text-orientation をマッピング依存リストに追加。
• border-inline と border-block が両側に同じ値をセットすることを明記。
• border-radius のマッピングを明確化。
• 物理margin/border/paddingプロパティの適用要素を明記し、ルビ基底コンテナや注釈コンテナ除外を説明。
• margin/paddingプロパティを一貫性のため*-topプロパティ参照に変更。
• inset propertiesという用語を定義。
• その他細かな明確化。
• Web Platform Testsカバレッジを追加。

以前のエディタードラフトと2017年5月18日FPWD間の変更点:

• すべてのプロパティが親ではなく要素自身のwriting modeを用いてカスケードするように。
• margin系ショートハンド内でロングハンドの順序をinline-start→inline-endに。
• margins/borders/padding向けに*-inlineおよび*-blockショートハンド形式を追加。
• offset-*プロパティをinset-*にリネーム、「要議論」表記。
• 導入セクションを追加。
• CSS Writing Modesの最新用語に更新。
• その他文章修正。

プライバシー考慮事項

本仕様について新たなプライバシー考慮事項は報告されていません。

セキュリティの考慮事項

本仕様について新たなセキュリティ考慮事項は報告されていません。