Join GitHub today
GitHub is home to over 36 million developers working together to host and review code, manage projects, and build software together.Sign up
[css-nav-1] Predefined algorithm for spatial navigation #3964
When we first introduced spatial navigation, I also had suggested some features that can customize the default spatial navigation behavior.
I'd like to bring this up again.
The distance function for the default spatial navigation behavior in the spec was decided depending on UX test cases.
Therefore the CSS property which can specify the predefined distance function would be useful.
It would be defined as below:
This demo shows how this property works.
This seems like it could be a reasonable thing to do, but I'm a little concerned about the wording in your description. Saying that you're only considering a single axis seems to imply that distance in the other axis is not considered -- whereas I would think for what you describe you would instead need to penalize distance in the other axis more severely than the current algorithm does, in order to continue moving straight along the desired axis. (Would that happen as a result of changing the
Oh, my description was ambiguous. The way to calculate the distance for the
If there are more than one aligned candidates in the navigation direction:
Else if there isn't any aligned candidate in a given direction
Therefore, this won't affect the
The CSS Working Group just discussed
The full IRC log of that discussion<heycam> Topic: Predefined algorithm for spatial navigation
<heycam> github: https://github.com//issues/3964
<heycam> jihye: in general, the focus move to the closest element from the currently focused element
<heycam> ... and in the spec the algorithm for how to find the closest element, there is a description about that
<TabAtkins> BTW: based on current discussion, I'm editting p-c-s to be "light | dark | bright", dropping the no-preference value (and defining that "light" should be what a lack of preference means).
<heycam> ... but some authors this kind of algorithm it's not suitable for them
<heycam> ... depending on their own layouts
<heycam> ... so there is some spatial nav API to help authors customize this algorithm
<heycam> ... but it's difficult to do this, since they have to interrupt the processing model of spatial nav
<heycam> ... the processing model means finding the best target
<heycam> ... starting from when the user inputs some information, finding the best target -- all that process is called "processing modeL"
<heycam> ... it's hard to interrupt that in the middle
<heycam> ... so it would be nice to have a new CSS property to provide another algorithm for spatial navigation
<heycam> ... this will increase flexibility of spatial navigation, and will help authors to implement it more easily
<heycam> ... I want to propose spatial-navigation-function CSS property, with two values
<heycam> ... normal, where focus will move to the closest one
<heycam> ... and grid, this will go to the most aligned element from the currently focused element
<heycam> ... the focus will go to a more obvious spatial navigation direction
<heycam> ... there is a demo I attached in the GitHub issue
<Rossen_> Zakim, open queue
<Zakim> ok, Rossen_, the speaker queue is open
<heycam> ... you can select normal or grid, and see how it works differently
<heycam> demo: https://raw.githack.com/WICG/spatial-navigation/develop/demo/calendar/index.html
<heycam> florian: bikeshedding aside, I'm supportive of having a property to switch how we calculate the distinace, how to pick
<heycam> ... I'm wondering if we have the right values in that list
<heycam> ... if we think we do, and implementors want to experiment with this, sure
<heycam> ... but there are a anumbe rof variants we can think of
<heycam> ... the ones proposed seem reasonable, but are they actually a good match?
<heycam> ... the alternative to normal, is that what authors really want? we're lacking experience
<heycam> ... it's difficult to say "70% of people who have trouble with normal want this grid behavior"
<heycam> jihye: with grid, I'm communicating with framework team in LG. this is their main request from them
<heycam> ... their main implementation is something like TV schedule web page, or TV content
<heycam> ... normally those kinds of pages, elements are grouped horizontall and vertically, so in that case moving the focus just horizontally or vertically is more important than moving to the closest one
<heycam> florian: for that reason, intuiitively the grid behavior makes sense to me
<heycam> ... if you have anecdotal evidence that authors want this, this is an improvement
<heycam> ... not quite as good as stats over many users but it's a start
<bkardell_> me wonders if he can reserve comments on this until post the next topic
<Rossen_> ack florian
<heycam> heycam: is that sufficient evidence to add it ot the spec?
<heycam> florian: we have some evidence it's wanted, and on the face of it is reasonable, so sure
<heycam> bkardell_: I would like to reserve comments until after the next topic, since they're related
<heycam> Rossen_: any objections to adding this to the spec?
<heycam> RESOLVED: Add spatial-navigation-function to the spec