[css-snappoints] Margin -> area

Author: ChumpChief

css-snappoints/Overview.bs

@@ -113,7 +113,7 @@ Motivating Examples {#examples}
 
             <figcaption>
                 The layout of the scroll container's contents in the example.
-                The snap alignment container is represented by the red rectangle, and the snap margin is represented by the yellow rectangle.  Since the scroll-snap-align is "center" in the X axis, a snap position is established at each scroll offset which aligns the X-center of the snap alignment container (represented by a red dotted line) with the X-center of a snap margin (represented by a yellow dotted line).
+                The snap alignment container is represented by the red rectangle, and the snap area is represented by the yellow rectangle.  Since the scroll-snap-align is "center" in the X axis, a snap position is established at each scroll offset which aligns the X-center of the snap alignment container (represented by a red dotted line) with the X-center of a snap area (represented by a yellow dotted line).
             </figcaption>
         </figure>
     </div>
@@ -135,7 +135,7 @@ Motivating Examples {#examples}
                 width: 500px;
                 overflow-x: hidden;
                 overflow-y: auto;
-                /* Specifies that each element's snap margin should
+                /* Specifies that each element's snap area should
                    align with a 100px offset from the top edge. */
                 scroll-snap-padding: 100px 0 0;
                 /* Encourages scrolling to end at a snap position when the
@@ -158,7 +158,7 @@ Motivating Examples {#examples}
 
             <figcaption>
                 The layout of the scroll container's contents in the example.
-                The snap alignment container is represented by the red rectangle (inset from the top by 100px due to the scroll-snap-padding), and the snap margin is represented by the yellow rectangle.  Since the scroll-snap-align is "start" in the Y axis, a snap position is established at each scroll offset which aligns the Y-start of the snap alignment container (represented by a red dotted line) with the Y-start of a snap margin (represented by a yellow dotted line).
+                The snap alignment container is represented by the red rectangle (inset from the top by 100px due to the scroll-snap-padding), and the snap area is represented by the yellow rectangle.  Since the scroll-snap-align is "start" in the Y axis, a snap position is established at each scroll offset which aligns the Y-start of the snap alignment container (represented by a red dotted line) with the Y-start of a snap area (represented by a yellow dotted line).
             </figcaption>
         </figure>
     </div>
@@ -186,7 +186,7 @@ Overview {#overview}
 
     <a>Snap positions</a> can be specified
     as a particular alignment ('scroll-snap-align')
-    of an element's <a>scroll snap margin</a> ('scroll-snap-margin', defaulting to its border box)
+    of an element's <a>scroll snap area</a> ('scroll-snap-margin', defaulting to its border box)
     within the <a>scroll container</a>’s <a>snap alignment container</a>
     (its visual viewport, as reduced by its 'scroll-snap-padding').
     This is conceptually equivalent to specifying the alignment of
@@ -222,9 +222,9 @@ Definitions {#definitions}
 
             Issue: Better name for this concept?
 
-        <dt><dfn lt="scroll snap margin" local-lt="snap margin" export>snap margin</dfn>
+        <dt><dfn lt="scroll snap area" local-lt="snap area" export>snap area</dfn>
         <dd>
-            An element's snap margin is the rectangle obtained by expanding its border box by its 'scroll-snap-margin'.
+            An element's snap area is the rectangle obtained by expanding its border box by its 'scroll-snap-margin'.
 
         <dt><dfn lt="scroll snap position" local-lt="snap position" export>snap position</dfn>
         <dd>
@@ -355,16 +355,16 @@ Properties on the elements {#properties-on-the-elements}
 ========================================================
 
 <!--
-██     ██    ███    ████████   ██████   ████ ██    ██
-███   ███   ██ ██   ██     ██ ██    ██   ██  ███   ██
-████ ████  ██   ██  ██     ██ ██         ██  ████  ██
-██ ███ ██ ██     ██ ████████  ██   ████  ██  ██ ██ ██
-██     ██ █████████ ██   ██   ██    ██   ██  ██  ████
-██     ██ ██     ██ ██    ██  ██    ██   ██  ██   ███
-██     ██ ██     ██ ██     ██  ██████   ████ ██    ██
+   ███    ████████  ████████    ███   
+  ██ ██   ██     ██ ██         ██ ██  
+ ██   ██  ██     ██ ██        ██   ██ 
+██     ██ ████████  ██████   ██     ██
+█████████ ██   ██   ██       █████████
+██     ██ ██    ██  ██       ██     ██
+██     ██ ██     ██ ████████ ██     ██
 -->
 
-Scroll Snap Margin: the 'scroll-snap-margin' property {#scroll-snap-margin}
+Scroll Snap Area: the 'scroll-snap-margin' property {#scroll-snap-margin}
 ---------------------------------------------------------------------------
 
     <pre class="propdef">
@@ -379,7 +379,7 @@ Scroll Snap Margin: the 'scroll-snap-margin' property {#scroll-snap-margin}
     Animatable: as length
     </pre>
 
-    The 'scroll-snap-margin' property defines the <a>scroll snap margin</a> on elements within a <a>scroll container</a>, used in calculating <a>snap positions</a> for that scroll container.
+    The 'scroll-snap-margin' property defines the <a>scroll snap area</a> on elements within a <a>scroll container</a>, used in calculating <a>snap positions</a> for that scroll container.
 
     The 'scroll-snap-margin' property defines
     the <dfn lt="scroll snap area" local-lt="snap area">scroll snap area</dfn>
@@ -390,7 +390,7 @@ Scroll Snap Margin: the 'scroll-snap-margin' property {#scroll-snap-margin}
     plus the specified outsets,
     axis-aligned in the <a>scroll container’s</a> coordinate space.
 
-    Note: This ensures that the <a>scroll snap margin</a> is always rectangular and axis-aligned to the <a>scroll container's</a> coordinate space.
+    Note: This ensures that the <a>scroll snap area</a> is always rectangular and axis-aligned to the <a>scroll container's</a> coordinate space.
 
     This property is a <a>shorthand property</a> that sets all of the <a href="#longhands"><css>scroll-snap-margin-*</css> longhands</a> in one declaration.
 
@@ -419,7 +419,7 @@ Scroll Snap Alignment: the 'scroll-snap-align' property {#scroll-snap-align}
     Animatable: no
     </pre>
 
-    The 'scroll-snap-align' property specifies how an element's scroll snap margin should align with its ancestor scroll container's snap alignment container.  The two values specify the snapping behavior in the x and y axes, respectively.  If only one value is specified, the second value defaults to the same value.
+    The 'scroll-snap-align' property specifies how an element's scroll snap area should align with its ancestor scroll container's snap alignment container.  The two values specify the snapping behavior in the x and y axes, respectively.  If only one value is specified, the second value defaults to the same value.
 
     Issue: Should this be x/y axes, or inline/block?  Starting with x/y axes for consistency with padding/area, otherwise a writing mode change would result in a axis mismatch (since padding is physical by default).
 
@@ -430,15 +430,15 @@ Scroll Snap Alignment: the 'scroll-snap-align' property {#scroll-snap-align}
 
         <dt><dfn>start</dfn>
         <dd>
-            The scroll offset which aligns the start edge of this box's scroll snap margin with the start edge of its ancestor scroll container's region defined by 'scroll-snap-padding' in the specified axis is a <a>snap position</a> in that axis.
+            The scroll offset which aligns the start edge of this box's scroll snap area with the start edge of its ancestor scroll container's region defined by 'scroll-snap-padding' in the specified axis is a <a>snap position</a> in that axis.
 
         <dt><dfn>end</dfn>
         <dd>
-            The scroll offset which aligns the end edge of this box's scroll snap margin with the end edge of its ancestor scroll container's region defined by 'scroll-snap-padding' in the specified axis is a <a>snap position</a> in that axis.
+            The scroll offset which aligns the end edge of this box's scroll snap area with the end edge of its ancestor scroll container's region defined by 'scroll-snap-padding' in the specified axis is a <a>snap position</a> in that axis.
 
         <dt><dfn>center</dfn>
         <dd>
-            The scroll offset which aligns the center of this box's scroll snap margin with the center of its ancestor scroll container's region defined by 'scroll-snap-padding' in the specified axis is a <a>snap position</a> in that axis.
+            The scroll offset which aligns the center of this box's scroll snap area with the center of its ancestor scroll container's region defined by 'scroll-snap-padding' in the specified axis is a <a>snap position</a> in that axis.
     </dl>
 
 <!--
@@ -519,7 +519,7 @@ Physical Longhands for 'scroll-snap-margin'  {#margin-longhands-physical}
     Animatable: as length
     </pre>
 
-    These <a>longhands</a> of 'scroll-snap-margin' specify the top, right, bottom, and left edges of the <a>scroll snap margin</a>, respectively.
+    These <a>longhands</a> of 'scroll-snap-margin' specify the top, right, bottom, and left edges of the <a>scroll snap area</a>, respectively.
 
 Flow-relative Longhands for 'scroll-snap-margin'  {#margin-longhands-logical}
 ---------------------------------------------------------------------------
@@ -536,7 +536,7 @@ Flow-relative Longhands for 'scroll-snap-margin'  {#margin-longhands-logical}
     Animatable: as length
     </pre>
 
-    These <a>longhands</a> of 'scroll-snap-margin' specify the block-start, inline-start, block-end, and inline-end edges of the <a>scroll snap margin</a>, respectively.
+    These <a>longhands</a> of 'scroll-snap-margin' specify the block-start, inline-start, block-end, and inline-end edges of the <a>scroll snap area</a>, respectively.
 
     <pre class="propdef">
     Name: scroll-snap-margin-block, scroll-snap-margin-inline
@@ -550,7 +550,7 @@ Flow-relative Longhands for 'scroll-snap-margin'  {#margin-longhands-logical}
     Animatable: as length
     </pre>
 
-    These <a>shorthands</a> of 'scroll-snap-margin-block-start' + 'scroll-snap-margin-block-end' and 'scroll-snap-margin-inline-start' + 'scroll-snap-margin-inline-end' are <a>longhands</a> of 'scroll-snap-margin', and specify the block-axis and inline-axis edges of the <a>scroll snap margin</a>, respectively.
+    These <a>shorthands</a> of 'scroll-snap-margin-block-start' + 'scroll-snap-margin-block-end' and 'scroll-snap-margin-inline-start' + 'scroll-snap-margin-inline-end' are <a>longhands</a> of 'scroll-snap-margin', and specify the block-axis and inline-axis edges of the <a>scroll snap area</a>, respectively.
 
     If two values are specified, the first gives the start value and the second gives the end value.