Re: [csswg-drafts] [css-backgrounds-4][css-values-4] Align logical values for <position> with the ones defined in CSS Logical Properties (#549)

Here's the proposed grammar for the full combination of physical and logical `<position>` values.

We decided that having them all as one giant production was just getting unmanageable,
so we broke them up into three, one for each number of component values you can specify. This has the nice effect of making css-values and css-backgrounds grammars easier to integrate without duplication. ^_^

```
<position> = <position-one> | <position-two> | <position-four>
<position-one> = [
  left | center | right | top | bottom |
  x-start | x-end | y-start | y-end |
  block-start | block-end | inline-start | inline-end |
  <<length-percentage>>
]
<position-two> = [
  [ left | center | right | x-start | x-end ] &&
  [ top | center | bottom | y-start | y-end ]
|
  [ left | center | right | x-start | x-end | <<length-percentage>> ]
  [ top | center | bottom | y-start | y-end | <<length-percentage>> ]
|
  [ block-start | center | block-end ] &&
  [ inline-start | center | inline-end ]
|
  [ start | center | end ]{2}
]
<position-four> = [
  [ [ left | right | x-start | x-end ] <<length-percentage>> ] &&
  [ [ top | bottom | y-start | y-end ] <<length-percentage>> ]
|
  [ [ block-start | block-end ] <<length-percentage>> ] &&
  [ [ inline-start | inline-end ] <<length-percentage>> ]
|
  [ [ start | end ] <<length-percentage>> ]{2}
]
```

These would expand into `background-position-x/y` or `background-position-block/inline` as appropriate, with the ambiguous `center center` production falling into the physical longhands.

For `background-position`, we would add to css-backgrounds-4:

```
<bg-position> = <position> | <position-three>
<position-three-L3> = [
  [ left | center | right ] && [ [ top | bottom ] <<length-percentage>> ]
|
  [ [ left | right ] <length-percentage> ] && [ top | center | bottom ]
]
```

And if we wanted to allow the (unambiguous) 3-value combinations with logical keywords too:

```
<position-three-L4> = [
  [ left | center | right | x-start | x-end ] &&
  [ [ top | bottom | y-start | y-end ] <length-percentage> ]
|
  [ [ left | right | x-start | x-end ] <length-percentage> ] &&
  [ top | center | bottom | y-start | y-end ]
|
  [ block-start | center | block-end ] &&
  [ [ inline-start | inline-end ] <<length-percentage>> ]
|
  [ [ block-start | block-end ] <<length-percentage>> ] &&
  [ inline-start | center | inline-end ]
|
  [ [ start | end ] <length-percentage> ] &&
  [ start | center | end ]
]
```

This grammar allows:
* All the physical combinations allowed in L3.
* Physical axis with logical keywords.
* Explicit-axis logical keywords -- for not needing to remember positional syntax and consistency with `float`.
* Implicit-axis logical keywords -- for conciseness, for consistency with the longhands (which should be non-redundant wrt axis), and for consistency with `scroll-snap-align`, `place-self`, etc..

It's unambiguous whether you're expanding to the physical or logical longhands (as long as we define `center center` to prioritize physical longhands).

Because we know the writing mode at computed value time, the computed values for all properties could remain as <length-percentage> from the top+left sides, which privileges physical coordinates but allows all coordinate types to be simply interpolated during animations.

Alternatively, if we want to preserve the coordinate information at computed-value time:
* For `background-position-x/y`: a <length-percentage> and a logical vs physical flag (to distinguish between `left`/`right` and `x-start`/`x-end`, etc)
* For `background-position-block/inline`: a <length-percentage> value
* For `<position>` where it cannot be broken down: two value pairs representing perpendicular axes, each consisting of a keyword indicating the origin side, and an offset measuring a distance from that side
* When serializing `<position>` or `background-position` computed values, the top/left/x-start/y-start/start keywords are used to represent the origin (and shortest serialization principle applies).
* When animating, convert to the left/top coordinate system for interpolation.

~Tab and fantasai

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


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

Received on Wednesday, 22 November 2023 23:01:40 UTC