[css-snap-size] Renamed to line-height-step and inline-size-step

Author: kojiishi

css-snap-size/Overview.bs

@@ -14,7 +14,8 @@ Status: ED
 Work Status: exploring
 Editor: Koji Ishii, Google, kojiishi@gmail.com
 ED: https://drafts.csswg.org/css-snap-size/
-Abstract: This module contains CSS features for aligning content size to a multiple of unit size.
+Abstract: This module contains CSS features for aligning content size
+  to multiple of unit size.
 </pre>
 <pre class=link-defaults>
 spec:css21; type:property; text:max-height
@@ -25,31 +26,33 @@ spec:css21; type:property; text:min-width
 Introduction {#intro}
 =====================
 
-This specification provides features to snap sizes of CSS objects
+This specification provides features to control sizes of CSS objects
 according to the rules desired by use cases.
 
-Snapping sizes of CSS objects is desired in many cases.
+Controlling sizes of CSS objects to be multiple of a unit
+is desired in many cases.
 This level of the specification focuses on following cases.
 
-* Snapping heights of line boxes to the multiple of specified length.
-* Snapping widths of block-level boxes to the multiple of specified length.
+* Adjust heights of line boxes to the multiple of the specified unit.
+* Adjust widths of block-level boxes to the multiple of the specified unit.
 
-By snapping heights of line boxes,
+By controlling heights of line boxes,
 lines of text in different fonts can create consistent visuals
 to help readability.
 
-Also by stacking such snapped line boxes,
-authors can create a vertical rhythm by aligning lines across columns,
-pages, scroll-snapped blocks, or multiple blocks placed absolutely.
+Also by stacking such line boxes,
+authors can align lines across columns,
+pages, scroll-snapped blocks, or multiple blocks placed absolutely,
+to produce vertical rhythm.
 
 <div class="figure">
 <a href="examples/snap-height.html">
 <img src="images/snap-height-sample.png"></a>
 <p class="caption">Vertical rhythm kept through pictures and different size of text in a multi-column document.
 </div>
 
-Snapping widths of block-level boxes gives the ability
-to control the width of a block
+Controlling widths of block-level boxes to the multiple of the specified unit
+gives the ability to control a block
 so that it can fit mono-space characters
 without remainders.
 One of the use cases this feature addresses is
@@ -58,14 +61,14 @@ In Han ideographic-based scripts such as Chinese or Japanese,
 most characters have 1em advance,
 and due to that nature, most such documents are justified.
 
-Snapping widths of block-level boxes to the multiple of 1em helps to
+Adjusting widths of block-level boxes to the multiple of 1em helps to
 minimize cases where justification needs to expand spacing.
 
-Snapping Heights: the 'snap-height' property {#snap-height}
-===========================================================
+Adjusting Line Box Heights: the 'line-height-step' property {#line-height-step}
+===============================================================================
 
 <pre class='propdef'>
-  Name: snap-height
+  Name: line-height-step
   Value: <<length>> <<integer>>?
   Initial: 0px
   Applies to: block containers
@@ -78,25 +81,24 @@ Snapping Heights: the 'snap-height' property {#snap-height}
 
 Values have the following meanings:
 
-<dl dfn-for="snap-height">
+<dl dfn-for="line-height-step">
   <dt><<length>>
   <dd>
-    This value defines the <dfn>snap unit</dfn>.
+    This value defines the <dfn>step unit</dfn> for line box heights.
     Non-negative <<length>>s are valid.
   <dt><<integer>>
   <dd>
-    This value defines the <dfn>snap baseline position</dfn>
-    within the <a>snap unit</a>.
+    This value defines the <dfn>step baseline position</dfn>
+    within the <a>step unit</a>.
     Values between 1 and 100 (inclusive) are valid.
 </dl>
 
-Issue: Renaming proposed to height-factor and width-factor,
-to be discussed.
+Issue: Naming under discussion.
 
-Snapping Line Box Heights {#snap-line-height}
----------------------------------------------
+Stepping Line Box Heights {#height}
+-----------------------------------
 
-When the <a>snap unit</a> is set to a positive <<length>>,
+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.
 
@@ -112,16 +114,16 @@ in the line box.
   <p class="caption">Rounding up the computed line box height.
 </div>
 
-The <a>snap baseline position</a> determines
+The <a>step baseline position</a> determines
 how the additional spaces are distributed.
 
 * When it is not set,
     the space is distributed to
     <a>over</a>-side (T) and <a>under</a>-side (B) equally,
     so that the original line box appears at the center of the
-    multiple of <a>snap units</a>.
+    multiple of <a>step unit</a>.
 * When it is set,
-    refer to the <a href="#snap-baseline">snapping baselines</a> section below.
+    refer to the <a href="#baseline">baseline</a> section below.
 
 <div class="example">
   <div class="figure" style="float:right">
@@ -131,14 +133,14 @@ how the additional spaces are distributed.
   </div>
 
   In the following example,
-  the height of line box in each paragraph is rounded up to the <a>snap unit</a>.
+  the height of line box in each paragraph is rounded up to the <a>step unit</a>.
 
   <pre class="lang-css">
   :root {
     --my-body-font-size: 12pt;
     --my-grid: 18pt;
     font-size: var(--my-body-font-size);
-    snap-height: var(--my-grid);
+    line-height-step: var(--my-grid);
   }
   h1 {
     font-size: calc(1.618 * var(--my-body-font-size));
@@ -149,102 +151,102 @@ how the additional spaces are distributed.
   }
   </pre>
 
-  The line box in <code>&lt;h1&gt;</code> does not fit into one <a>snap unit</a>
+  The line box in <code>&lt;h1&gt;</code> does not fit into one <a>step unit</a>
   and thus occupies two,
-  but it is still centered within the two <a>snap unit</a>.
+  but it is still centered within the two <a>step unit</a>.
 </div>
 
-Snapping Baselines {#snap-baseline}
------------------------------------
+Aligning Baselines {#baseline}
+------------------------------
 
 <div class="figure" style="float:right">
   <img src="images/line-grid-baseline.svg"
     >
 </div>
 
-When the <a>snap baseline position</a> is set,
+When the <a>step baseline position</a> is set,
 the additional spaces are distributed using the following formula:
 
 * space-over = P - T % U, add U if the result is negative
 * space-under = U - (space-over + T + B) % U
 
 Given:
 
-* U: the <a>snap unit</a>.
-* P: the <a>snap baseline position</a> &times; U / 100.
+* U: the <a>step unit</a>.
+* P: the <a>step baseline position</a> &times; U / 100.
 * T: the distance between the top of the line box and the baseline.
 * B: the distance between the bottom of the line box and the baseline.
 
 This formula pushes the baseline of the line box
-down to the closest <a>snap baseline position</a>,
-and the bottom to the next <a>snap unit</a>.
+down to the closest <a>step baseline position</a>,
+and the bottom to the next <a>step unit</a>.
 
 <div class="example">
   <div class="figure" style="float:right">
     <img src="images/line-grid-baseline-multicol.svg"
       >
   </div>
 
-  The following CSS sets the <a>snap baseline position</a>
-  to 14pt (20pt &times; 0.70) within each <a>snap unit</a>.
+  The following CSS sets the <a>step baseline position</a>
+  to 14pt (20pt &times; 0.70) within each <a>step unit</a>.
 
   <pre class="lang-css">
   :root {
-    snap-height: 20pt 70;
+    line-height-step: 20pt 70;
   }
   </pre>
 
   The baseline of the line box is pushed down
-  to the closest <a>snap baseline position</a>
+  to the closest <a>step baseline position</a>
   by adding the space-over.
 
   <code>&lt;h1&gt;</code> is as tall as
-  its baseline being lower than the second <a>snap baseline position</a>
-  that it is pushed down to the third <a>snap baseline position</a>.
+  its baseline being lower than the second <a>step baseline position</a>
+  that it is pushed down to the third <a>step baseline position</a>.
 </div>
 
 <div class="note">
-  Since the bottom of the line box is rounded to the closest <a>snap unit</a>
+  Since the bottom of the line box is rounded to the closest <a>step unit</a>
   next to the descenders of the line box,
   large descenders may result in unintended spaces under the line box.
-  Oftentimes changing <a>snap baseline position</a> can control such situations.
+  Oftentimes changing <a>step baseline position</a> can control such situations.
 </div>
 
-Snapping Block-level Boxes {#snap-block-height}
------------------------------------------------
+Notes on Block-level Boxes {#block-height}
+------------------------------------------
 
 <i>This section is not normative.</i>
 
 This level of the specification does not provide features
-to snap heights of block-level boxes.
+to adjust heights of block-level boxes.
 
 <div class="example">
   The following CSS turns <code>&lt;h2&gt;</code> to inline-blocks.
 
   <pre class="lang-css">
   :root {
-    snap-height: 18pt;
+    line-height-step: 18pt;
   }
   h2 {
     display: inline-block;
     width: 100%;
-    snap-height: 0;
+    line-height-step: 0;
     line-height: 1.2;
   }
   </pre>
 
   When an <code>&lt;h2&gt;</code> is long enough to wrap,
   text inside the <code>&lt;h2&gt;</code> uses ''line-height: 1.2'', while
-  the height of the <code>&lt;h2&gt;</code> block is snapped
+  the height of the <code>&lt;h2&gt;</code> block is rounded up
   to the multiple of ''18pt''.
-  See <a href="examples/snap-height.html">a sample in action</a>.
+  See <a href="examples/line-height-step.html">a sample in action</a>.
 </div>
 
-Snapping Widths: the 'snap-width' property {#snap-width}
-========================================================
+Stepping Widths: the 'inline-size-step' property {#width}
+=========================================================
 
 <pre class='propdef'>
-  Name: snap-width
+  Name: inline-size-step
   Value: <<length>>
   Initial: 0px
   Applies to: all elements but non-replaced inline elements, table rows, and row groups
@@ -264,9 +266,9 @@ to the closest multiple of the specified <<length>>
 before it is used.
 
 <div class="note">
-Since this property only snaps <a>available inline size</a>,
+Since this property only adjusts <a>available inline size</a>,
 it does not guarantee that the <a>inline size</a> of child boxes
-are snapped to the multiple of the specified <<length>>
+are the multiple of the specified <<length>>
 if there were other constraints.
 </div>
 
@@ -281,12 +283,12 @@ if there were other constraints.
   but the expansion occurs
   only when there are non-CJK characters in the line
   because their logical widths are
-  snapped to the multiple of 1em.
+  adjusted to the multiple of 1em.
   <pre class="lang-css">
   article, .bodytext {
     font-size: 12pt;
     text-align: justify;
-    snap-width: 1em;
+    inline-size-step: 1em;
   }
   </pre>
 </div>