[css-scroll-snap] Refactor scroll-snap-align again, bringing the syntax to three significant changes from last week: 1. Adding percentages as an alignment possibility (representing between start and end); 2. Adding the 'point' keyword to distinguish 1D from 2D snapping; and 3. Assigning a single alignment value's axis by referencing 'overflow' (rather than assigning to both axes, which gives bad results in the fairly common case of author having only vertical overflow, and user having overflow in both axes)

Author: fantasai

css-scroll-snap/Overview.bs

@@ -436,13 +436,15 @@ Scroll Snapping Alignment: the 'scroll-snap-align' property {#scroll-snap-align}
 
 	<pre class="propdef">
 	Name: scroll-snap-align
-	Value: [ x | y | block | inline ]? [ none | start | end | center | edges | <<percentage>> ]
-	       | point || xy? [ none | start | end | center | <<percentage>> ]{1,2}
+	Value: [ none | edges | <alignment> ] {1,2} |
+         [ block | inline]  [ none | edges | <alignment> ] |
+         point <alignment>{1,2}
 	Initial: none
 	Applies to: all elements
 	Inherited: no
-	Percentages: refer to size of scroller's <a>snap target area</a> <em>minus</em> size of box's <a>snap area</a>
-	Computed value: as specified
+	Percentages: refer to size of scroll container's <a>snap target area</a> <em>minus</em> size of box's <a>snap area</a>
+	Computed value: an optional ''point'' keyword, plus one or two alignment values
+	                each consisting of either a ''none'' or ''edges'' keyword or a percentage
 	Animatable: no
 	Media: interactive
 	</pre>
@@ -454,18 +456,30 @@ Scroll Snapping Alignment: the 'scroll-snap-align' property {#scroll-snap-align}
 	or as a simultaneous 2D alignment position,
 	by using a <a>scroll axis keyword</a>.
 
+	<pre class="prod">
+		<dfn for=scroll-snap-align><<alignment>></dfn> = center | [ start | end ] <percentage>?
+	</pre>
+
+	Issue: This is a subset of the L4 <<position> syntax
+	that works within the constraint of an axis.
+	It also aligns with the <<self-position>> syntax from [[CSS-ALIGN-3]] (see e.g. 'align-self').
+	We could simplify to ''center | start | end'' by dropping <<percentage>>
+	(which would be a true subset of <<self-position>>),
+	or expand to a full logical/physical combination syntax
+	(as a fuller, and therefore more complicated, subset of <<position>>).
+
 	<div class="example">
-		The following example aligns the block-start edge of the box's <a>snap area</a>
-		to the block-start edge of the scroller's <a>snap target area</a>:
+		The following example aligns the start edge of the box's <a>snap area</a>
+		to the start edge of the scroll container's <a>snap target area</a>:
 		<pre>section { scroll-snap-align: start; }</pre>
 
 		The following example aligns the center of each city
-		to the center of the scroller's <a>snap target area</a>,
+		to the center of the scroll container's <a>snap target area</a>,
 		snapping only when the city is centered in both axes:
 		<pre>city { scroll-snap-align: center point; }</pre>
 
 		The following example aligns the center of each photo
-		to the center of the scroller's <a>snap target area</a>,
+		to the center of the scroll container's <a>snap target area</a>,
 		snapping independently in each axis:
 		<pre>img { scroll-snap-align: center; }</pre>
 	</div>
@@ -480,72 +494,78 @@ Scroll Snapping Alignment: the 'scroll-snap-align' property {#scroll-snap-align}
 		<dt><dfn>start</dfn>
 		<dd>
 			Start alignment of this box's <a>scroll snap area</a>
-			within the scroller's <a>scroll snap target area</a>
+			within the <a>scroll container</a>'s <a>scroll snap target area</a>
 			is a valid <a>snap position</a>.
-			Equivalent to ''0%''.
 
 		<dt><dfn>end</dfn>
 		<dd>
 			End alignment of this box's <a>scroll snap area</a>
-			within the scroller's <a>scroll snap target area</a>
+			within the <a>scroll container</a>'s <a>scroll snap target area</a>
 			is a valid <a>snap position</a>.
-			Equivalent to ''100%''.
 
 		<dt><dfn>center</dfn>
 		<dd>
 			Center alignment of this box's <a>scroll snap area</a>
-			within the scroller's <a>scroll snap target area</a>
+			within the <a>scroll container</a>'s <a>scroll snap target area</a>
 			is a valid <a>snap position</a>.
-			Equivalent to ''50%''.
 
 		<dt><dfn><<percentage>></dfn>
 		<dd>
 			Percentage alignment of this box's <a>scroll snap area</a>
-			within the scroller's <a>scroll snap target area</a>
+			within the <a>scroll container</a>'s <a>scroll snap target area</a>
 			is a valid <a>snap position</a>,
 			where the percentage represents a position between
-			''scroll-snap-align/start'' alignment (''0%'') and ''scroll-snap-align/end'' alignment (''100%'').
+			''scroll-snap-align/start'' alignment and ''scroll-snap-align/end'' alignment.
+			''0%'' matches the given alignment keyword (''scroll-snap-align/start'' or ''scroll-snap-align/end'').
 
 		<dt><dfn>edges</dfn>
 		<dd>
 			Both start alignment and end alignment of this box's <a>scroll snap area</a>
-			within the scroller's <a>scroll snap target area</a>
-			is a valid <a>snap position</a>.
-			Equivalent to ''50%''.
+			within the <a>scroll container</a>'s <a>scroll snap target area</a>
+			are valid <a>snap positions</a>.
 	</dl>
 
-	If no <a>scroll axis keyword</a> is specified, then
-	a single <a>scroll alignment value</a> specifies alignment in the block axis only;
-	if two values are specified, then
-	the first value specifies alignment in the inline axis;
-	and the second value (if any) specifies alignment in the block axis.
-	<span class="issue">Is the correct default assignment?</span>
-
 	The <dfn>scroll axis keywords</dfn>
-	allow targeting a specific axis
+	allow explicitly targeting a specific axis
 	or requesting simultaneous 2D alignment,
 	and are defined as follows:
 
 	<dl dfn-type=value dfn-for=scroll-snap-align>
-		<dt><dfn>x</dfn>
-		<dt><dfn>y</dfn>
-		<dd>
-			The specified alignment applies to the x (horizontal) or y (vertical) axis, respectively.
 		<dt><dfn>inline</dfn>
 		<dt><dfn>block</dfn>
 		<dd>
 			The specified alignment applies to the inline or block axis, respectively.
-		<dt><dfn>xy</dfn>
-		<dd>
-			The specified 2-value alignment applies to the x and y axes
-			(rather than to the block and inline axes).
+			The computed alignment of the opposite axis is set to ''scroll-snap-align/none''.
+
+			<div class="example">
+				The following two declarations are equivalent:
+				<pre>
+					scroll-snap-align: none start;
+					scroll-snap-align: block start;
+				</pre>
+			</div>
+
 		<dt><dfn>point</dfn>
 		<dd>
-			The <a>snap position</a> is only valid when both axes are aligned as specified;
+			Specifies 2D snapping:
+			the <a>snap position</a> is only valid when both axes are aligned as specified;
 			otherwise the <a>snap position</a> in each axis
 			is independent of alignment in the other axis.
 	</dl>
 
+	If two <<alignment>> values are specified, then
+	the first value specifies alignment in the inline axis;
+	and the second value (if any) specifies alignment in the block axis.
+
+	If only one value is specified
+	and no <a>scroll axis keyword</a> is specified, then
+	the <<alignment>> value
+	applies to the scrollable axis of the affected <a>scroll container</a>.
+	If both axes are scrollable 
+	(i.e. both 'overflow-x' and 'overflow-y' are either ''overflow/scroll'' or ''overflow/auto''),
+	then it applies to the block axis of the affected <a>scroll container</a>
+	(as determined by the <a>scroll container</a>’s <a>writing mode</a>).
+
 	Note: Remember that in <a>vertical writing modes</a> the block and inline axes
 	correspond to the x and y axes, and not the y and x axes, respectively.