CSS リズミック・サイジング・モジュールレベル 1

1. 序論

この仕様は、ユースケースが望む規則に従って CSS オブジェクトのサイズを制御するための機能を提供します。

CSS オブジェクトのサイズをステップ単位の倍数にすることは、多くの場合に望まれます。この仕様のこのレベルは、次のケースに焦点を当てます。

ブロックレベルボックスの高さを、指定された長さの倍数に調整します。
行ボックスの高さを、指定された長さの倍数に調整します。

ブロックを倍数単位で積み重ねることで、著者は、段組、ページ、スクロールスナップされたブロック、または絶対配置された複数のブロックにわたって内容を整列させ、縦方向のリズムを維持できます。

また、行ボックスの高さを制御することで、異なるフォントのテキスト行でも一貫した見た目を作り、可読性の向上に役立てることができます。

段組文書において、画像と異なるサイズのテキストを通して縦方向のリズムが保たれている。

1.1. 東アジアのカジュアルな縦方向リズム

東アジアでは、縦方向リズムのカジュアルな変種が広く用いられています。

縦方向リズムは通常、プロの組版で用いられます。可読性を向上させる一方で、その間隔の制約は、空白の設計に慎重でよく考えられたデザインを要求します。

東アジアのカジュアルな変種は、もともとは 80 年代の従来型ワープロにおける技術的制約の産物でした。しかし、より現代的な技術で技術的制約が取り払われると、表意文字の正方形に近い見た目の助けもあり、東アジアの著者はその特徴の一部を保持することを好みました。

この縦方向リズムの変種では、非専門の著者が使いやすいよう、要件が緩和されています。テキストは依然としてリズムに乗っており、その結果、表意文字の大半は概ねグリッド上に収まりますが、著者が枠線、マージン、あるいはリズムを崩しうる他のオブジェクトを指定した場合には、リズムは強制されるのではなく、ずらされます。厳密な縦方向リズムは、そのような場合に強制的なジャンプによって非専門の著者をしばしば驚かせますが、この変種は、テキスト上のリズムと非専門の著者にとっての使いやすさを両立させます。

この変種は 90 年代半ば以降、東アジアで非常に広く受け入れられ、東アジアで使用される主要なワープロの大半が、既定で同様の機能を提供していました。

東アジアの出版組版では、縦方向リズムは重要な特性の一つですが、他の特性と比べた優先度は文書の種類によって異なります。単段組の文書では、段組文書に比べて優先度は弱くなります。テキストは縦方向リズム上にあるべきですが、枠線、マージン、あるいは他の特性がリズムより優先されることがしばしば好まれます。そのような場合、カジュアルな変種と同様に、リズムはずらされます。

この仕様では、 line-height-step プロパティが block-step プロパティまたは line-grid プロパティとの組み合わせなしで使用されると、東アジアのカジュアルな縦方向リズムと同様の効果を生みます。

また、縦方向リズムに求める強さによっては、東アジアの出版組版にも有用に働く可能性があります。

縦方向リズムの他のケースでは、 block-step プロパティまたは line-grid プロパティが使用されること、あるいは line-height-step プロパティがそれらと併用されることが期待されます。

1.2. 値の定義

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

各定義に列挙されたプロパティ固有の値に加えて、この仕様で定義されるすべてのプロパティは、プロパティ値として CSS 全体キーワードも受け付けます。可読性のため、それらは明示的に繰り返していません。

2. ブロックレベルボックスの高さの調整

最も一般的な組版のリズム問題は、ブロックレベルの割り込みです: 連続する段落レベルのテキストが、挿絵や見出しのようなサイズの異なる内容によって中断されると、行間のリズムが崩れる可能性があります。ブロックステップ関連プロパティは、そのような要素に対し、指定されたステップサイズの倍数に高さを制約することで、リズムの間隔に適合させることを可能にします。これにより、中断の前後の内容が連続したリズムを維持できます。

見出しと引用ブロックはフォントサイズと行の高さがさまざまで、段をまたいで不均一なテキストになっている。

ブロックの前後に空白（色付きの枠線で表示）を挿入することで、縦方向のリズムが復元される。

ブロックステップ関連プロパティを一貫して使用すると、並行する内容フローに必要な厳密なグリッドレイアウトを生成できますが、要素ごとにステップサイズを指定することで、いくつかの割り込みはフロー内で自然なサイズを取り、その後に縦方向リズムを再開することも可能になります。これは単段組レイアウトで、縦方向リズムが視覚的な連続性の維持に重要である一方で、横に整列させる対象が存在しない場合に有用です。これらのケースでは、前後のフローを視覚的に分断する大きな割り込みは、連続したグリッドへの厳密な追従よりも、項目の周囲の最適な余白を優先できます（初期値である block-step: none を指定することで）。

この提案は、block-step-size プロパティのみへ単純化でき、その短縮形である block-step としてのみ表現できます。このレベルには、おそらく最大でも block-step-size と block-step-insert を含み、 block-step-align と block-step-round は、将来の需要があれば追加することになります。完全な設計は、現在の議論および将来の参照のために、ここに記述されています。

この提案は現在、ブロックレベルボックスにのみ適用されるよう定義されています。この制限は、最初の反復を単純化するためだけのものであり、最終的には指定された高さを尊重するすべてのレイアウトモードへ拡張されるべきです。

2.1. ステップサイズの指定: block-step-size プロパティ

名前:	block-step-size
値:	none \| <length [0,∞]>
初期値:	none
適用対象:	ブロックレベルボックス
継承:	いいえ
百分率:	N/A
算出値:	指定キーワードまたは絶対長さ
正規順序:	文法に従う
アニメーション種別:	算出値型による

Tests

このプロパティは、ブロックレベルボックスのブロックサイズに対するステップ単位を定義します。ステップ単位が正の <length> に設定されると、ボックスの外側の高さは丸められ（block-step-round を参照）、単位の最も近い倍数になります。負の <length> 値は無効です。

none 以外の値は、ボックスに独立した整形コンテキストを確立させます。

注: これは、祖先のフロートがボックス内へ張り出すことによる複雑さを避けるためです: 有効な上マージンまたはパディングを変更すると、どの内容がどれだけフロートの影響を受けるかが変わりうるため、再レイアウトが必要になります（また、ボックスの高さが内容に依存する場合、循環を生む可能性があります）。

このような循環を断ち切る最善の方法はこれでしょうか？ [Issue #1901]

マージンが相殺する状況では、外側サイズの計算において、ボックス自身のマージンのみが考慮されます。

ボックスが断片化する場合、ステップサイズ調整は断片ごとに適用されます。

これを text-box-edge/text-box-trim の継承および適用モデルと整合させるべきでしょうか？ [Issue #1902]

2.2. 間隔の種類の指定: block-step-insert プロパティ

名前:	block-step-insert
値:	margin-box \| padding-box \| content-box
初期値:	margin-box
適用対象:	ブロックレベルボックス
継承:	いいえ
百分率:	N/A
算出値:	指定キーワード
正規順序:	文法に従う
アニメーション種別:	離散的

Tests

このプロパティは、 block-step-size の適用から導出される追加の間隔を、ボックスの境界線の内側（padding のように）に追加の空白として挿入するか、あるいは外側（margin のように）に挿入するか、または内容に利用可能な高さを変更するか（min-height または max-height のように）を指定します。

各値の意味は次のとおりです:

margin-box: block-step-size による調整の結果生じる追加の空白は、ボックスの境界線の外側に、追加のマージンとして挿入されます。
padding-box: block-step-size による調整の結果生じる追加の空白は、ボックスの境界線の内側に、追加のパディングとして挿入されます。
content-box: block-step-size による調整の結果生じる追加の空白は、内容領域の高さを増やすことによって、ボックスの境界線の内側に挿入されます。

2.3. 整列の指定: block-step-align プロパティ

名前:	block-step-align
値:	auto \| center \| start \| end
初期値:	auto
適用対象:	ブロックレベルボックス
継承:	いいえ
百分率:	N/A
算出値:	指定キーワード
正規順序:	文法に従う
アニメーション種別:	離散的

Tests

このプロパティは、 block-step-size の適用から導出される追加の間隔を、ボックスの前に挿入するか、後に挿入するか、あるいは両側に分割するかを指定します。

各値の意味は次のとおりです:

auto: block-step-insert が margin-box の場合: align-self が start、end、または center であればその値として扱い、それ以外は center として扱います。
center: block-step-size による調整の結果生じる追加の空白は分割され、ボックスの両側に半分ずつ適用されます。
start: block-step-size による調整の結果生じる追加の空白は、ボックスの end 側に挿入されます。
end: block-step-size による調整の結果生じる追加の空白は、ボックスの start 側に挿入されます。

align-content との相互作用を定義する。 [Issue #11206]

すべての場合において、追加の間隔は、強制されない断片化の改ページにより切り詰められたり省略されたりするマージンには追加できません（[CSS3-PAGE] および [CSS-BREAK-3] を参照）; したがって block-step-insert が margin-box の場合、 block-step-size の適用から導出される余分な空白はすべて、断片の反対側に挿入されなければなりません（block-step-align にかかわらず）。

この規則は正しいでしょうか？それとも断片化境界でも block-step-align を尊重すべきでしょうか？ [Issue #1260]

2.4. 丸め方法: block-step-round プロパティ

名前:	block-step-round
値:	up \| down \| nearest
初期値:	up
適用対象:	ブロックレベルボックス
継承:	いいえ
百分率:	N/A
算出値:	指定キーワード
正規順序:	文法に従う
アニメーション種別:	離散的

Tests

このプロパティは、 block-step-size による調整が、正の空白を挿入するか負の空白を挿入するかを指定します。

各値の意味は次のとおりです:

up: ボックスの外側サイズは増加されます（正の空白が挿入されます）これは block-step-size 制約��満たすためです。
down: ボックスの外側サイズは減少されます（負の空白が挿入されます）これは block-step-size 制約を満たすためです。
nearest: ボックスの外側サイズは、up と同様に増加されるか、または down と同様に減少されます—いずれか、絶対変化量が最小となる方—により、 block-step-size 制約を満たします。どちらの選択肢でも同じ変化量になる場合は、サイズが増加します。

2.5. ブロックステップ調整の省略記法: block-step 省略プロパティ

名前:	block-step
値:	<'block-step-size'> \|\| <'block-step-insert'> \|\| <'block-step-align'> \|\| <'block-step-round'>
初期値:	個別プロパティを参照
適用対象:	ブロックレベルボックス
継承:	いいえ
百分率:	N/A
算出値:	個別プロパティを参照
アニメーション種別:	個別プロパティを参照
正規順序:	文法に従う

Tests

この省略プロパティは、 1 つの宣言で block-step-size、block-step-insert、block-step-align、および block-step-round を設定できます。省略された値は、そのプロパティの初期値に設定されます。

特定の必要があって個別のロングハンドを独立してカスケードさせる必要がある場合を除き、著者はロングハンドではなく、この省略記法を使用することが推奨されます。

3. 行ボックスの高さの調整: line-height-step プロパティ

名前:	line-height-step
値:	<length [0,∞]>
初期値:	0
適用対象:	ブロックコンテナ
継承:	はい
百分率:	N/A
算出値:	絶対長さ
正規順序:	文法に従う
アニメーション種別:	算出値型による

このプロパティは、行ボックスの高さに対するステップ単位を定義します。ステップ単位は縦方向リズムの長さであり、通常は本文テキストのあるベースラインから次のベースラインまでの距離です。本文テキストは 1 つのステップ単位に収まるべきであり、見出しのような背の高い行は 2 つ以上のステップ単位分の高さを持つべきです。縦方向リズムは、すべての行の高さをステップ単位の整数倍にすることで作られます。

ステップ単位が正の <length> に設定されると、行ボックスの高さは、単位の最も近い倍数へ 切り上げ られます。負の <length> 値は無効です。

[CSS2] §10.8 行の高さの計算は、インラインレベル内容から行ボックスの高さを算出する方法を定義します。丸めは、結果として得られた行ボックスの高さに適用され、追加の空白は、行ボックスの over 側と under 側へ等しく配分されます。その結果、元の行ボックスは、ステップ単位の倍数の中央に現れます。この調整は、行ボックス内に調整された A' と D' を持つインラインレベルボックスが存在すると仮定して行われます。このインラインレベルボックスは、行ボックスに対して相対的に整列する値を除き、 vertical-align プロパティの整列点に影響しません。

算出された行ボックスの高さを切り上げる。

これはアニメーション可能であるべきでしょうか？ユースケースは無さそうですが、一貫性のために必要でしょうか？

次の例では、各段落における行ボックスの高さがステップ単位へ切り上げられます。

:root {
  font-size: 12pt;
  --my-grid: 18pt;
  line-height-step: var(--my-grid);
}
h1 {
  font-size: 20pt;
  margin-top: calc(2 * var(--my-grid));
}
p {
  margin: 0;
}

<h1> の行ボックスは 1 つのステップ単位に収まらないため 2 つ分を占有しますが、それでも 2 つのステップ単位の中で中央に配置されます。

著者は、上の例のように var() と calc() を用いて、マージンなどのプロパティをステップ単位の倍数に保てます。

著者が望むなら、 Sass のようなツールでそのような宣言をより短くできます。

$gu: 18px;

@function gu($n) {
  @return $n * $gu;
}

h1 {
  font-size: 20pt;
  margin: gu(1.2) auto gu(1.8);
}

通常は、line-height をステップ単位より低く設定することが推奨されます。使用される行の高さは、vertical-align やフォントフォールバックなど、いくつかの要因によって増加し得ます。

4. プライバシーに関する考慮事項

この仕様は、「正しく実装する」以上の新たなプライバシー漏えいを導入しません。

5. セキュリティに関する考慮事項

この仕様は、「正しく実装する」以上の新たなセキュリティ上の考慮事項を導入しません。

6. 謝辞

この仕様は、次の方々の助けなくしては実現しませんでした: Masaharu Akutsu, Yoko Aoki, Takao Baba, Chris Eppstein, Ichiro Inaba, Jxck, Noriko Kase, Motoya Kinoshita, Shinyu Murakami, Tsutomu Nanjo, Kiyoshi Narishima, Charlie Neely, Takuya Nishimura, Katsuhiro Osumi, Florian Rivoal, Hiroshi Sakakibara, Alan Stearns, Masataka Yakura, KADOKAWA Corporation, PixelGrid Inc., and the CSS Working Group members.

7. 変更点

最初の公開ワーキングドラフト以降の変更��には次が含まれます:

序論に東アジアのカジュアルな縦方向リズムとの相互作用を追加。
切り詰められたマージンの扱いを定義。（Issue 1260）
margin-box を block-step-insert に追加し、他の値を *-box パターンに合わせて改名。（Issue 10486）
line-height-step から none 値を削除。（Issue 1151）
block-step と断片化との相互作用を定義。
プロパティメタデータを最新の慣行に整合。
Web Platform Tests のカバレッジを追加。
編集上の改善とバグ修正。

適合性

文書の表記規約

適合要件は、記述的な断定と RFC 2119 の用語の組み合わせによって表現されます。この文書の規定部分における “MUST”、“MUST NOT”、“REQUIRED”、“SHALL”、“SHALL NOT”、“SHOULD”、“SHOULD NOT”、 “RECOMMENDED”、“MAY”、および “OPTIONAL” のキーワードは、RFC 2119 に記述されているとおりに解釈されます。ただし、可読性のため、本仕様ではこれらの語をすべて大文字で表記していません。

本仕様の本文は、明示的に非規定であると示された節、例、注記を除き、すべて規定です。 [RFC2119]

本仕様における例は、“for example” という語で導入されるか、規定の本文から class="example" によって次のように区別されます:

参考（非規定）注記は “Note” という語で始まり、規定の本文から class="note" によって次のように区別されます:

注意喚起（advisement）は、特別な注意を喚起するようにスタイル付けされた規定の節であり、 <strong class="advisement"> によって他の規定テキストから次のように区別されます: UAs MUST provide an accessible alternative.

適合クラス

本仕様への適合は、次の 3 つの適��クラスについて定義されます:

スタイルシートが本仕様に適合するのは、本モジュールで定義される構文を使用するその宣言がすべて、一般的な CSS 文法および本モジュールで定義される各機能の個別文法に従って有効である場合です。

レンダラーが本仕様に適合するのは、適切な仕様によって定義されるとおりにスタイルシートを解釈することに加え、本仕様で定義されるすべての機能を、正しく解析し、それに従って文書をレンダリングすることによりサポートする場合です。ただし、デバイスの制限によって UA が文書を正しくレンダリングできないことは、 UA を不適合とするものではありません。（例えば、UA はモノクロモニター上で色をレンダリングする��とを要求されません。）

オーサリングツールが本仕様に適合するのは、一般的な CSS 文法および本モジュールの各機能の個別文法に従って構文的に正しいスタイルシートを書き、かつ、本モジュールで記述されるスタイルシートに関する他のすべての適合要件を満たす場合です。

部分的な実装

著者が前方互換の解析規則を利用してフォールバック値を割り当てられるようにするため、 CSS レンダラーは、利用可能なレベルのサポートを持たないあらゆる at-rule、プロパティ、プロパティ値、キーワード、およびその他の構文的構成物を無効として扱わなければならず（そして適切に無視しなければなりません）。特にユーザーエージェントは、単一の複数値プロパティ宣言の中で、未サポートのコンポーネント値だけを選択的に無視し、サポートされる値を尊重してはなりません: いずれかの値が無効と見なされる場合（未サポート値はそうでなければなりません）、 CSS は宣言全体を無視することを要求します。

不安定および独自機能の実装

非実験的な実装

仕様が Candidate Recommendation 段階に達すると、非実験的な実装が可能になり、実装者は、仕様に従って正しく実装されていることを示せるあらゆる CR レベルの機能について、プレフィックスなしの実装をリリースするべきです。

実装間での CSS の相互運用性を確立し維持するため、 CSS Working Group は、非実験的な CSS レンダラーが、あらゆる CSS 機能についてプレフィックスなしの実装をリリースする前に、実装報告書（必要なら、その実装報告書で使用されたテストケース）を W3C に提出することを要請します。 W3C に提出されたテストケースは、 CSS Working Group によるレビューと修正の対象となります。

テストケースおよび実装報告書の提出に関する追加情報は、 CSS Working Group のウェブサイト https://www.w3.org/Style/CSS/Test/ にて参照できます。質問は、メーリングリスト public-css-testsuite@w3.org 宛に送るべきです。

CSS リズミック・サイジング・モジュールレベル 1

概要

この文書のステータス