Re: [csswg-drafts] [css-scroll-snap-1] Clarify which writing-mode is used for scroll-snap-align, scroll container or snap position element? (#3815)

The CSS Working Group just discussed `Clarify which writing-mode is used for scroll-snap-align, scroll container or snap position element?`, and agreed to the following:

* `RESOLVED: Keep the previous resolution to snap to the container's start edge, except when the element is larger than the snap port, in which case we use the scroll edge of the element.`

<details><summary>The full IRC log of that discussion</summary>
&lt;heycam> Topic: Clarify which writing-mode is used for scroll-snap-align, scroll container or snap position element?<br>
&lt;heycam> github: https://github.com/w3c/csswg-drafts/issues/3815<br>
&lt;heycam> fantasai: already discussed what to do when you have a snapping element that has a different writing mode from the scroll container<br>
&lt;heycam> ... snap to start edge -- the start edge of element being snapped or the scroll container?<br>
&lt;heycam> ... my original argument was the WM of the scroll container, because when you're doing alignment in general, we always use the WM of the container, so that all elements witht he same start/end alignment are aligned in the same way<br>
&lt;heycam> ... seems reasonable, consistent<br>
&lt;heycam> ... the alignment container's WM<br>
&lt;heycam> ... but then for snapping it makes a bit less sense<br>
&lt;heycam> ... consider an unusual case, you have a scroll container that's ltr<br>
&lt;heycam> ... inside there are a bunch of cards, text has articles in various languages<br>
&lt;heycam> ... most are ltr, snapping on start edge will snap on the left<br>
&lt;heycam> ... another is rtl, it'll also snap to the left edge<br>
&lt;heycam> ... if they're smaller than the container that seems ok<br>
&lt;heycam> ... but if the card is larger than the scroll port, then you'd end up snapping to the end of the content as the first thing the user sees<br>
&lt;heycam> ... but you're trying to snap to the start of the content<br>
&lt;heycam> ... so upon reflection it might make sense to use the WM of the element being snapped to<br>
&lt;heycam> Rossen: only for non-orthogonal?<br>
&lt;heycam> fantasai: similar case for orthogonal flows<br>
&lt;heycam> fantasai: the "start' of the content, you'll end up scrolling to the end of thecontent<br>
&lt;heycam> ... as long ast he content is smaller than the viewport, it's not a problem<br>
&lt;heycam> Rossen: what happens in the the opposite case?  when teh scroll port is larger than the item<br>
&lt;heycam> fantasai: the behavior should be consistent<br>
&lt;heycam> ... but ni terms of use cases, when the content is smaller than the scrollport, it's not a big usability problem to use the left or right edge<br>
&lt;heycam> Rossen: my question is, let's say we have two items<br>
&lt;heycam> ... first one is ltr, other is rtl<br>
&lt;heycam> ... they're side by side, 1000px wide each, and weh ave a ivewport that's only 500px wide<br>
&lt;heycam> ... if we're snapping to the start, the first plae we snap to is box A, which is ltr<br>
&lt;heycam> ... the first child<br>
&lt;heycam> ... that'll snap to the left<br>
&lt;heycam> ... when you snap to the next one, it'll snap all the way to the right edge of the rtl element<br>
&lt;heycam> ... say that there are many elements, and these two are still side by side, and you're doing a carousel kind of thing<br>
&lt;heycam> ... every element is snapping to the start of teh scrollport<br>
&lt;heycam> ... element A is going to snap to its left side<br>
&lt;heycam> fantasai: the next one snaps to the right edge of element B<br>
&lt;heycam> ... you're snappiong the right edge of B to the right edge of the scroll container<br>
&lt;heycam> ... an important thing to think of is snapping because of focus/target, and if you target an entire section and it has a different WM and you snap to the end of that section, that's not good for usability<br>
&lt;heycam> [blackboard drawing]<br>
&lt;heycam> [general agreement of oddness]<br>
&lt;heycam> astearns: could say you snap to the scroll container's start edge, unless the snap element's start edge is not in view, in which case you snap to the element's start edge<br>
&lt;heycam> florian: or if the element and scroll port size are the same<br>
&lt;heycam> Rossen: it's not terrible<br>
&lt;heycam> Rossen: if the item fits entirely in the scroll container, it makes more sense to use the WM of the scroll container<br>
&lt;heycam> ... if the inverse is true, and the items are larger than the scroll container, it makes more sense to use the item's WM<br>
&lt;heycam> florian: and at the mid-point it's indistinguishable<br>
&lt;heycam> jfkthame: still seems a bit weird if some are smaller and some that are bigger<br>
&lt;heycam> Rossen: would it though?<br>
&lt;heycam> ... the invariant here is that every time you snap to a start, you'll guarantee you can start readin<br>
&lt;heycam> ... so if you have a collection that varies small and large, you can always snap to a snap that will guarantee that invariant<br>
&lt;heycam> ... sometimes you will go past what could be considered the start item from the scroll container's perspective<br>
&lt;heycam> jfkthame: what's troubling me is that for the items that are smaller than the container, their start is going to end up in the middle<br>
&lt;heycam> fantasai: I don't think that happens<br>
&lt;heycam> Rossen: I think this is the solution that guarantees you can start reading<br>
&lt;heycam> ... it's more important to be able to see the start of the item than have the same alignment point<br>
&lt;heycam> ... in the inverse case, it seems more appropriate that you snap in the direction of the container, so you don't have to jump<br>
&lt;heycam> ... that would change the direction of the scroll<br>
&lt;heycam> ... here you're preserving the direction of the scroll, you're just keeping that invariant that you can read the start of the item<br>
&lt;heycam> fantasai: I can take an action to propose some text<br>
&lt;fantasai> heycam: So if you have this element attachd to the scroller<br>
&lt;fantasai> heycam: and you start narrowing the browser window, it'll start attached to one edge, but end up attached to the other edge<br>
&lt;heycam> fantasai: yes, but that's nice<br>
&lt;fantasai> s/that's nice/it is continuous/<br>
&lt;heycam> RESOLVED: Keep the previous resolution to snap to the container's start edge, except when the element is larger than the snap port, in which case we use the scroll edge of the element.<br>
&lt;fantasai> s/scroll edge/start edge/<br>
</details>


-- 
GitHub Notification of comment by css-meeting-bot
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3815#issuecomment-577245697 using your GitHub account

Received on Wednesday, 22 January 2020 15:39:16 UTC