Re: [csswg-drafts] [css-anchor-position-1] Can we clarify the `inset-area` syntax? It can be confusing to read and reason about. (#9862)

All right, Elika and I discussed this today, and agree the syntax can be improved a bit.

First, to let us remove the slash (getting closer to `<position>`, as Elika just suggested), we have two possible syntax suggestions:

```
<inset-area-alpha> = [
  [ left | center | right | center-left | center-right
  | x-start | x-end | center-x-start | center-x-end 
  | x-self-start | x-self-end | center-x-self-start | center-x-self-end 
  | all ]
  &&
  [ top | center | bottom | center-top | center-bottom
  | y-start | y-end | center-y-start | center-y-end
  | y-self-start | y-self-end | center-y-self-start | center-y-self-end 
  | all ]
|
  [ block-start | center | block-end | center-block-start | center-block-end
  | self-block-start | self-block-end | center-self-block-start | center-self-block-end 
  | all ]
  &&
  [ inline-start | center | inline-end | center-inline-start | center-inline-end ]
  | self-inline-start | self-inline-end | center-self-inline-start | center-self-inline-end 
  | all ]
|
  [ start | center | end | center-start | center-end | all ]{1, 2}
|
  [ self-start | center | self-end | center-self-start | center-self-end | all ]{1, 2}
]

<inset-area-beta> = [
  [ left | center | right | span( left || center || right )
  | x-start | x-end | span( x-start || center || x-end )
  | x-self-start | x-self-end | span( x-self-start || center || x-self-end )
  | all ]
  &&
  [ top | center | bottom | span( top || center || bottom )
  | y-start | y-end | span( y-start || center || y-end )
  | y-self-start | y-self-end | span( y-self-start || center || y-self-end )
  | all ]
|
  [ block-start | center | block-end | span( block-start || center || block-end )
  | self-block-start | self-block-end | span( self-block-start || center || self-block-end )
  | all ]
&&
  [ inline-start | center | inline-end | span( inline-start || center || inline-end )
  | self-inline-start | self-inline-end | span( self-inline-start || center || self-inline-end)
  | all ]
|
  [ start | center | end | span( start || center || end ) | all ]{1, 2}
|
  [ self-start | center | self-end | span( self-start || center || self-end ) | all ]{1,2}
]
```

In `alpha`, we just specify the two-region values with a dashed `center-*` keyword, so if you want to fill the left and center columns, you write `center-left`.

In `beta`, we have the `span()` function, which takes two keywords and spans between them, so you'd instead right `span(left center)`.
(The grammar is a little loose above, for readability; it would actually need to be `span( [left && [center | right]] | [right && [center | left]] )`, to guarantee two keywords get specified.)

In either case, the 2-track values are now single components, so we no longer need the slash. To fill just the upper-left and upper-center regions, you could say `center-left top` or `top center-left` (or equivalently, `span(left center) top`, for beta).

We think we mildly prefer the dashed version over the span() version, but will leave the choice up to the WG.

-----------

For the "single-value is a little confusing", we agree, and think Miriam's suggestion is reasonable. So:

Single keyword defaults other axis to:
    * duplication if keyword is axis-ambiguous (start/self-start/center/end/self-end)
    * all in all other cases

And then we'd probably want to sync this with `<position>`. Currently, we just disallow saying `start` by itself (you must specify two keywords if they're axis-ambiguous), but we think it would be reasonable to adopt a similar "duplicate if axis-ambiguous, `center` otherwise" rule, so `background-position: start` would be equivalent to `start start`.

-- 
GitHub Notification of comment by tabatkins
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9862#issuecomment-1924919417 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 2 February 2024 23:59:26 UTC