[css-snap-size] Misc edits, image updated

Author: kojiishi

css-snap-size/Overview.bs

@@ -43,16 +43,16 @@ Values have the following meanings:
 <dl dfn-for="snap-height">
   <dt><<length>>
   <dd>
-    This value defines the <dfn>grid unit</dfn>.
+    This value defines the <dfn>snap unit</dfn>.
     Non-negative lengths are valid.
   <dt><<integer>>
   <dd>
-    This value defines the <dfn>grid baseline position</dfn>
-    within the <a>grid unit</a>.
+    This value defines the <dfn>snap baseline position</dfn>
+    within the <a>snap unit</a>.
     Values between 1 and 100 (inclusive) are valid.
 </dl>
 
-When the <a>grid unit</a> is set to a positive length,
+When the <a>snap unit</a> is set to a positive length,
 the line box heights are rounded <i>up</i> to
 the closest multiple of the unit.
 
@@ -61,13 +61,13 @@ defines how to compute the line box height
 after the line box was constructed from inline-level boxes.
 The rounding is applied to the computed line box height.
 
-The <a>grid baseline position</a> then determines
+The <a>snap baseline position</a> then determines
 how the additional spaces are distributed to <a>over</a> and <a>under</a>.
 When it is not set,
 the space is distributed to <a>over</a> and <a>under</a> equally,
 so that the line box appears at the center of the
-multiple of <a>grid units</a>.
-When the <a>grid baseline position</a> is set,
+multiple of <a>snap units</a>.
+When the <a>snap baseline position</a> is set,
 refer to the <a href="#snap-baseline">snapping baselines</a> section below.
 
 For block-level replaced elements,
@@ -87,7 +87,7 @@ by increasing the used value of 'margin-block-start' and 'margin-block-end' equa
   </div>
 
   In the following example,
-  the height of line box in each paragraph is rounded up to the <a>grid unit</a>.
+  the height of line box in each paragraph is rounded up to the <a>snap unit</a>.
 
   <pre class="lang-css">
   :root {
@@ -105,9 +105,9 @@ by increasing the used value of 'margin-block-start' and 'margin-block-end' equa
   }
   </pre>
 
-  The line box in &lt;h1&gt; does not fit into one <a>grid unit</a>
+  The line box in &lt;h1&gt; does not fit into one <a>snap unit</a>
   and thus occupies two,
-  but it is still centered within the two <a>grid unit</a>.
+  but it is still centered within the two <a>snap unit</a>.
 </div>
 
 Snapping Baselines {#snap-baseline}
@@ -118,22 +118,18 @@ Snapping Baselines {#snap-baseline}
     >
 </div>
 
-When the <a>grid baseline position</a> is a positive value less than or equals to 100,
+When the <a>snap baseline position</a> is a positive value less than or equals to 100,
 the additional spaces are distributed using the following formula:
 
-* space-over = BP - T % GU, add GU if negative
-* space-under = GU - (space-over + T + B) % GU
-* GU: the <a>grid unit</a>.
-* BP: the <a>grid baseline position</a> &times; GU / 100.
+* space-over = P - T % U, add U if negative
+* space-under = U - (space-over + T + B) % U
+* U: the <a>snap unit</a>.
+* P: the <a>snap 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.
 
-<div class="issue">
-  The formula needs verifications.
-</div>
-
 This formula pushes the baseline of the line box
-down to the closest <a>grid baseline position</a>
+down to the closest <a>snap baseline position</a>
 as a consequence.
 
 <div class="example">
@@ -142,8 +138,8 @@ as a consequence.
       >
   </div>
 
-  The following CSS sets the <a>grid baseline position</a>
-  to 16pt (20pt &times; 0.70) from the top.
+  The following CSS sets the <a>snap baseline position</a>
+  to 14pt (20pt &times; 0.70) from the top.
 
   <pre class="lang-css">
   :root {
@@ -153,12 +149,12 @@ as a consequence.
   </pre>
 
   The baseline of the line box is pushed down
-  to the closest <a>grid baseline position</a>
+  to the closest <a>snap baseline position</a>
   by adding the space-over.
 
   &lt;h1&gt; is as tall as
-  its baseline is lower than the second <a>grid baseline position</a>
-  that it is pushed down to the third <a>grid baseline position</a>.
+  its baseline is lower than the second <a>snap baseline position</a>
+  that it is pushed down to the third <a>snap baseline position</a>.
 </div>
 
 Snapping Block Boxes {#snap-block-height}
@@ -171,23 +167,22 @@ Snapping Widths: the 'snap-width' property {#snap-width}
 
 <pre class='propdef'>
   Name: snap-width
-  Value: none | <<length>>
-  Initial: none
+  Value: <<length>>
+  Initial: 0px
   Applies to: block, flex and grid containers
   Inherited: yes
   Animatable: no
   Percentages: N/A
   Media: visual
-  Computed Value: length becomes the absolute length, others as specified
+  Computed Value: the absolute length
 </pre>
 Values have the following meanings:
 
 <dl dfn-for="snap-width">
-  <dt><dfn>none</dfn>
-  <dd>
-    This value indicates that there is no snapping behavior.
   <dt><<length>>
   <dd>
+    Non-negative lengths are valid.
+
     When this property is set to a positive <<length>>,
     the logical width of the content-box is rounded <i>down</i>
     to the closest multiple of the <<length>>