8000 [css-scroll-snap] Switch terminology from 1d/2d snap position to axis… · w3c/csswg-drafts@9005445 · GitHub
Skip to content

Commit 9005445

Browse files
tabatkinstabatkins
committed
[css-scroll-snap] Switch terminology from 1d/2d snap position to axis/point snapping, per suggestion at https://lists.w3.org/Archives/Public/www-style/2015Dec/0176.html 
1 parent 45385ea commit 9005445

1 file changed

Lines changed: 47 additions & 41 deletions

File tree

‎css-scroll-snap/Overview.bs‎

Lines changed: 47 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -325,43 +325,43 @@ Scroll Snapping Rules: the 'scroll-snap-type' property {#snap-type}
325325
</div>
326326

327327
The axis values specifies what axis(es) are affected by <a>snap positions</a>,
328-
and whether <a>snap positions</a> are evaluated per-axis independently (<a>1d snap positions</a>)
329-
or together (<a>2d snap positions</a>).
328+
and which <a>snapping behavior</a> the <a>scroll container</a> uses.
330329
Values are defined as follows:
331330

332331
<dl dfn-type=value dfn-for="scroll-snap-type">
333332
<dt><dfn>x</dfn>
334333
<dd>
335-
The <a>scroll container</a> pays attention to <a>snap positions</a> in its horizontal axis only.
334+
The <a>scroll container</a> does <a>axis snapping</a> in its horizontal axis only.
336335

337336
<dt><dfn>y</dfn>
338337
<dd>
339-
The <a>scroll container</a> pays attention to <a>snap positions</a> in its vertical axis only.
338+
The <a>scroll container</a> does <a>axis snapping</a> in its vertical axis only.
340339

341340
<dt><dfn>block</dfn>
342341
<dd>
343-
The <a>scroll container</a> pays attention to <a>snap positions</a> in its block axis only.
342+
The <a>scroll container</a> does <a>axis snapping</a> in its block axis only.
344343

345344
<dt><dfn>inline</dfn>
346345
<dd>
347-
The <a>scroll container</a> pays attention to <a>snap positions</a> in its inline axis only.
346+
The <a>scroll container</a> does <a>axis snapping</a> in its inline axis only.
348347

349348
<dt><dfn>both</dfn>
350349
<dd>
351-
The <a>scroll container</a> pays attention to <a>snap positions</a> in both of its axises independently,
352-
as <a>1D snap positions</a>.
350+
The <a>scroll container</a> does <a>axis snapping</a> in both of its axises independently.
353351

354352
<dt><dfn>point</dfn>
355353
<dd>
356-
The <a>scroll container</a> pays attention to <a>snap positions</a> in both of its axises together,
357-
as <a>2D snap positions</a>.
354+
The <a>scroll container</a> does <a>point snapping</a>.
358355
</dl>
359356

360357
If no axis value is specified, then the axis is automatically computed:
361-
* If the box is only scrollable in one axis
362-
(only one axis has its 'overflow' set to ''overflow/auto'' or ''overflow/scroll'')
363-
the scrollable axis is chosen.
364-
* Otherwise, the box’s <a>block axis</a> is chosen.
358+
359+
* If the <a>scroll container</a> is only scrollable in one axis
360+
(only one axis has its 'overflow' set to ''overflow/auto'' or ''overflow/scroll'')
361+
the scrollable axis is chosen.
362+
* Otherwise, the <a>scroll container’s</a> <a>block axis</a> is chosen.
363+
364+
In either case, the <a>scroll container</a> does <a>axis snapping</a>.
365365

366366
<!--
367367
████████ ███ ████████ ████████ ████ ██ ██ ██████
@@ -554,7 +554,7 @@ Scroll Snapping Alignment: the 'scroll-snap-align' property {#scroll-snap-alignm
554554
Issue: It's not 100% clear if this value is necessary, given handling for <a href="#snap-overflow">over-large elements</a>.
555555
</dl>
556556

557-
If the element's <a>scroll container</a> is set to ''point'',
557+
If the element's <a>scroll container</a> is <a>point snapping</a>,
558558
and this property does not specify a single valid <a>snap position</a> in both axises
559559
(that is, it contains ''scroll-snap-align/none'' or ''edges''),
560560
the element does not contribute any <a>snap positions</a> at all.
@@ -574,8 +574,8 @@ Scroll Snapping Alignment: the 'scroll-snap-align' property {#scroll-snap-alignm
574574
so are consistent with that syntax.
575575
We chose to use this simpler syntax without lengths or percentages
576576
because the 'scroll-snap-area' concept already provides length offsets--
577-
but does so in a smarter way, that degrades better on small screens
578-
(see above) because it provides more information (a box, rather than a point) to the UA.
577+
but does so in a smarter way, that degrades better on small screens (see above)
578+
because it provides more information (a box, rather than a point) to the UA.
579579
We could have also added lengths here,
580580
but it would provide multiple ways to do the same thing,
581581
which is additional overhead for implementation, testing, and (most importantly) author learning.
@@ -780,42 +780,47 @@ Types of Scrolling Methods {#scroll-types}
780780
██████ ████████ █████████ ████████
781781
-->
782782

783-
1D vs 2D Snap Position {#snap-dimensions}
783+
Axis vs Point Snapping {#snap-dimensions}
784784
-----------------------------------------
785785

786-
There are two distinct forms of <a>snap positions</a> that a <a>scroll container</a> might contain:
786+
There are two distinct <dfn lt="snap behavior|snapping behavior">snapping behaviors</dfn> that a <a>scroll container</a> might engage in:
787787

788-
: <dfn export local-lt="1D" lt="1D snap position">1D snap position</dfn>
789-
:: A <a>1D snap position</a> indicates a desired scroll position
788+
: <dfn export local-lt="axis" lt="axis snapping|axis-snapping">axis snapping</dfn>
789+
:: If a <a>scroll container</a> is engaging in <a>axis snapping</a>,
790+
its descendants indicate a desired scroll position
790791
in one axis of the <a>scroll container</a> only,
791792
with no preference for what the other axis's scroll position should be.
792793

793-
Note:
794-
This is the “default” type of <a>snap position</a>
794+
Note: This is the “default” type of <a>snap position</a>
795795
that most elements will want to use,
796796
and so the ''scroll-snap-align'' property intentionally makes it the simplest to specify.
797797

798-
Note: An element can declare two <a>1D snap positions</a>,
798+
Note: An element can declare two <a>snap positions</a>,
799799
one in each axis.
800-
These represent two independent <a>snap position</a> preferences,
801-
not a single <a>2D snap position</a>:
802-
if one of the element's snap positions is chosen in one axis,
800+
If the <a>scroll container</a> is <a>axis snapping</a>,
801+
these represent two independent <a>snap position</a> preferences.
802+
If one of the element's <a>snap positions</a> is chosen in one axis,
803803
this has no bearing on the other dimension's <a>snap position</a>--
804804
it might be chosen,
805-
or another element's <a>snap position</a> might be chosen for that axis,
805+
or a different element's <a>snap position</a> might be chosen for that axis,
806806
or that axis might not snap at all.
807807

808-
: <dfn export local-lt="2D" lt="2D snap position">2D snap position</dfn>
809-
:: A <a>2d snap position</a> indicates a desired <a>snap position</a>
810-
in both axises at once,
811-
aligning the <a>snap area</a> of an element
812-
to the specified 2D position in the <a>scroll container</a>’s <a>snap viewport</a>.
808+
: <dfn export local-lt="point" lt="point snapping|point-snapping">point snapping</dfn>
809+
:: If a <a>scroll container</a> is engaging in <a>point snapping</a>,
810+
its descendants indicate a desired scroll position
811+
in both axises of the <a>scroll container</a> simultaneously--
812+
in other words,
813+
some point in the descendant must be aligned to a corresponding point in the <a>scroll container</a>.
813814

814-
This type of <a>snap position</a> is intended for "two-dimensional" panning-type layouts,
815+
This type of <a>snapping behavior</a> is intended for "two-dimensional" panning-type layouts,
815816
such as cities on a map
816817
(using ''proximity'' 2D snap positions to snap a city to the center of the display when it gets close),
817818
or a tiled image gallery
818819
(using ''mandatory'' 2D snap positions to force each image to be centered on the screen).
820+
In both of these cases,
821+
it would look weird if the horizontal scrolling was aligned to one element
822+
while the vertical was aligned to a different element
823+
(which is the behavior you'd get if the <a>scroll container</a> was <a>axis-snapping</a>).
819824

820825
<!--
821826
██████ ██ ██ ███████ ███████ ██████ ████ ██ ██ ██████
@@ -842,17 +847,18 @@ Choosing Snap Positions {#choosing}
842847
and the final snapped scroll position,
843848
subject to the additional constraints listed in this section.
844849

845-
* <a>2D snap positions</a> are all-or-nothing;
846-
if a <a>2D snap position</a> is chosen to align to,
850+
* <a>Point snapping</a> is all-or-nothing;
851+
if one <a>snap position</a> of an element is chosen to align to,
847852
the <a>scroll container</a> must set its scroll position
848-
according to the snap positions's preferred scroll position in <em>both</em> axises;
849-
the <a>scroll container</a> <em>must not</em> “partially align” to a <a>2D snap position</a>
853+
according to the element's <a>snap positions</a> in <em>both</em> axises;
854+
the <a>scroll container</a> <em>must not</em> “partially align” to the element
850855
by taking its <a>snap position</a> in one axis
851856
and aligning the other axis according to something else.
852857

853-
* If a scroll is <a>axis-locked</a>,
854-
any <a>1D</a> snap positions in the other axis should be ignored.
855-
<a>2D</a> snap positions should be penalized in the selection process
858+
* If a scroll is <a>axis-locked</a> and the <a>scroll container</a> is <a>axis snapping</a>,
859+
any <a>snap positions</a> in the other axis should be ignored;
860+
if the <a>scroll container</a> is <a>point snapping</a>,
861+
<a>snap positions</a> should be penalized in the selection process
856862
according to the amount of other-axis scrolling they would cause.
857863

858864
* <a>Snap positions</a> should be ignored if their elements are far outside of the “corridor”

0 commit comments

Comments
 (0)