Skip to content

[css-backgrounds-4][css-values-4] Align logical values for <position> with the ones defined in CSS Logical Properties #549

Closed
@SebastianZ

Description

The <position> data type is defined in CSS Backgrounds 3 to only take physical values. <length> and <percentage> values are resolved against the top left corner of the referenced area.
In CSS Backgrounds 4 the logical values start, end, x-start, x-end, y-start and y-end are added to the definition.

To keep the logical values consistent they should be defined in CSS Logical Properties and be changed to block-start, block-end, inline-start and inline-end so that the syntax looks like this:

<position> = [
  [ left | center | right | top | bottom | <length-percentage> ]
|
  [ left | center | right | <length-percentage> ]
  [ top | center | bottom | <length-percentage> ]
|
  [ center | [ left | right ] <length-percentage>? ] &&
  [ center | [ top | bottom ] <length-percentage>? ]
|
  [ [ inline-start | inline-end ] <length-percentage>? ] ||
  [ [ block-start | block-end ] <length-percentage>? ]
]

I think the syntax could then even be reduced to this:

[ center | [ left | right | inline-start | inline-end ] <length-percentage>? | <length-percentage> ] ||
[ center | [ top | bottom | block-start | block-end ] <length-percentage>? | <length-percentage> ]

The only differences I can see is that it would allow to mix logical and physical directions like in block-end 10px left 30px and requires to interpret <length-percentage>s differently, as it allows values like 20% left 2em.

<length-percentage>s would still refer to the top or left edge if no direction is given.

Sebastian

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    • Status

      Unslotted

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions