[css-rhythm] Sketch out block-step-height feaure.

Author: fantasai

css-rhythm/Overview.bs

@@ -71,7 +71,7 @@ Adjusting Line Box Heights: the 'line-height-step' property {#line-height-step}
 	When the <a>step unit</a> is set to a positive <<length>>,
 	the line box heights are rounded <i>up</i> to
 	the closest multiple of the unit.
-	Non-negative <<length>>s are valid.
+	Negative <<length>> values are invalid.
 
 	[[!CSS21]] <a href="https://drafts.csswg.org/css2/visudet.html#line-height">&#xA7;10.8 Line height calculations</a>
 	defines how to compute the height of a line box from its inline-level content.
@@ -150,7 +150,8 @@ Adjusting Line Box Heights: the 'line-height-step' property {#line-height-step}
 	the use of 'vertical-align' or font fallback.
 	</div>
 
-Notes on Block-level Boxes {#block-height}
+<!--
+Notes on Block-level Boxes {#inline-block}
 ------------------------------------------
 
 	<i>This section is not normative.</i>
@@ -180,6 +181,191 @@ Notes on Block-level Boxes {#block-height}
 	to the multiple of ''18pt''.
 	See <a href="examples/snap-height.html">a sample in action</a>.
 	</div>
+-->
+
+Adjusting Block-level Box Heights {#block-height}
+=================================
+
+	ISSUE: This proposal can be simplified down to just the 'block-step-size' property, represented solely through its shortened form as 'block-step'.
+	This level will likely at most contain 'block-step-size' and 'block-step-insert', leaving 'block-step-align' and 'block-step-round' to be added if the future demands.
+	The full design is described herein for current discussion and future reference.
+
+	ISSUE: This proposal is currently defined to apply only to block-level boxes. This limitation is solely to simplify the first iteration; it should eventually be extended to all layout modes that honor specified heights.
+
+Specifying the Step Size: the 'block-step-size' property {#block-step-size}
+--------------------------------------------------------
+
+	<pre class="propdef">
+	Name: block-step-size
+	Value: none | <<length>>
+	Initial: none
+	Applies to: block-level boxes
+	Inherited: no
+	Animatable: ???
+	Percentages: N/A
+	Media: visual
+	Computed Value: keyword or absolute length
+	</pre>
+
+	This property defines the <a>step unit</a> for a block-level box’s <a>block size</a>.
+	When the <a>step unit</a> is set to a positive <<length>>,
+	the box’s outer height is rounded
+	(see 'block-step-round')
+	to the closest multiple of the unit.
+	Negative <<length>> values are invalid.
+
+	Values other than ''block-step-size/none''
+	cause the box to establish a new formatting context.
+
+	In situations where margins <a href="">collapse</a>,
+	only the box’s own margin is considered
+	in calculating its outer size.
+
+Specifying the Spacing Type: the 'block-step-insert' property {#block-step-insert}
+--------------------------------------------------------
+
+	<pre class="propdef">
+	Name: block-step-insert
+	Value: margin | padding
+	Initial: margin
+	Applies to: block-level boxes
+	Inherited: no
+	Animatable: no
+	Percentages: N/A
+	Media: visual
+	Computed Value: as specified
+	</pre>
+
+	This property specifies whether extra spacing
+	derived from applying 'block-step-size'
+	is inserted inside (like 'padding') or outside (like 'margin')
+	the box’s border.
+
+	Values have the following meanings:
+
+	<dl dfn-for="block-step-insert" dfn-type="value">
+		<dt><dfn>margin</dfn>
+		<dd>
+			Any extra space resulting from a 'block-step-size'-induced adjustment
+			is inserted outside the box’s border, as extra margin.
+
+		<dt><dfn>padding</dfn>
+		<dd>
+			Any extra space resulting from a 'block-step-size'-induced adjustment
+			is inserted inside the box’s border, as extra padding.
+	</dl>
+
+Specifying Alignment: the 'block-step-align' property {#block-step-align}
+-----------------------------------------------------
+
+	<pre class="propdef">
+	Name: block-step-align
+	Value: auto | center | start | end
+	Initial: auto
+	Applies to: block-level boxes
+	Inherited: no
+	Animatable: no
+	Percentages: N/A
+	Media: visual
+	Computed Value: as specified
+	</pre>
+
+	This property specifies whether extra spacing
+	derived from applying 'block-step-size'
+	is inserted before, inserted after, or split between both sides of the box.
+
+	Values have the following meanings:
+
+	<dl dfn-for="block-step-align" dfn-type="value">
+		<dt><dfn>auto</dfn>
+		<dd>
+			If 'block-step-insert' is ''margin'':
+			if 'align-self' is ''start'', ''end'', or ''center'', treat as that value,
+			otherwise treat as ''center''.
+
+		<dt><dfn>center</dfn>
+		<dd>
+			Any extra space resulting from a 'block-step-size'-induced adjustment
+			is split, and applied half on either side of the box.
+		<dt><dfn>start</dfn>
+		<dd>
+			Any extra space resulting from a 'block-step-size'-induced adjustment
+			is inserted on the <a>start</a> side of the box.
+		<dt><dfn>end</dfn>
+		<dd>
+			Any extra space resulting from a 'block-step-size'-induced adjustment
+			is inserted on the <a>end</a> side of the box.
+	</dl>
+
+Rounding Method: the 'block-step-round' property {#block-step-round}
+------------------------------------------------
+
+	<pre class="propdef">
+	Name: block-step-round
+	Value: up | down | nearest
+	Initial: up
+	Applies to: block-level boxes
+	Inherited: no
+	Animatable: no
+	Percentages: N/A
+	Media: visual
+	Computed Value: as specified
+	</pre>
+
+	This property specifies whether adjustments due to 'block-step-size'
+	insert positive or negative space.
+
+	Values have the following meanings:
+
+	<dl dfn-for="block-step-align" dfn-type="value">
+		<dt><dfn>up</dfn>
+		<dd>
+			The outer size of the box is <em>increased</em>
+			(positive space is inserted)
+			to fulfill the 'block-step-size' constraint.
+
+		<dt><dfn>down</dfn>
+		<dd>
+			The outer size of the box is <em>decreased</em>
+			(negative space is inserted)
+			to fulfill the 'block-step-size' constraint.
+
+		<dt><dfn>nearest</dfn>
+		<dd>
+			The outer size of the box is either
+			<em>increased</em> (as for ''up'') or <em>decreased</em> (as for ''down''--
+			whichever results in the smallest absolute change--
+			to fulfill the 'block-step-size' constraint.
+			If both options would result in the same amount of change,
+			the size is increased.
+	</dl>
+
+Block Step Adjustment Shorthand: the 'block-step' shorthand {#block-step}
+-----------------------------------------------------------
+
+	<pre class="propdef">
+	Name: block-step
+	Value: <'block-step-size'> || <'block-step-insert'> || <'block-step-align'> || <'block-step-round'>
+	Initial: See individual properties
+	Applies to: block-level boxes
+	Inherited: no
+	Animatable: See individual properties
+	Percentages: N/A
+	Media: visual
+	Computed Value: See individual properties
+	</pre>
+
+	This <a>shorthand property</a> allows for setting
+	'block-step-size',
+	'block-step-insert',
+	'block-step-align',
+	and
+	'block-step-round'
+	in one declaration.
+	Omitted values are set to the property’s initial value.
+
+	Advisement: Authors are advised to use this shorthand rather than the longhands
+	unless there is a specific need for its individual longhands to cascade independently.
 
 Privacy and Security Considerations {#priv-sec}
 ===============================================