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

@SebastianZ

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

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