CSS Logical Properties and Values

[ramiy]

Description

CSS logical properties and values follow the content flow (inline/block axes, start/end position), rather than the screen flow (top/bottom/left/right). It helps developers style websites for all kinds of writing modes: left-to-right (LTR), right-to-left (RTL) and top-to-bottom (TTB).

The last two years, browsers did an amazing job introducing logical properties and values, however when you try to fully migrate to logical properties you find properties (or values) which support only physical properties.

There are groups:

• CSS properties with excellent browser and cross-browser support (margin, padding, border, inset, border-radius, width, height and text-align)

• CSS properties which are not cross-browser supported (float, clear and resize), but they are planed to be fixed in the coming releases.

• CSS properties which are not cross-browser supported and not planed to be fixed in the near future, like caption-side property. Or overflow-block and overflow-inline (which are covered by a different spec ).

• CSS properties that have no logical equivalence. For example, background-position-x and background-position-y. Or the CSS <position> data-type values which supports only physical values.

Specification

https://drafts.csswg.org/css-logical/

Open Issues

No response

Tests

No response

Current Implementations

• Blink
• Gecko
• WebKit

Standards Positions

No response

Browser bug reports

No response

Developer discussions

No response

Polls & Surveys

No response

Existing Usage

No response

Workarounds

No response

Accessibility Impact

No response

Privacy Impact

No response

Other

No response

[foolip]

Tests: https://wpt.fyi/results/css/css-logical?label=master&label=experimental&aligned (don't know if they're comprehensive)

Open spec issues: https://github.com/w3c/csswg-drafts/labels/css-logical-1

There's also https://github.com/w3c/csswg-drafts/labels/css-logical-2 but no published Level 2 of the spec AFAICT, so I'm not sure if those issues are relevant.

[dholbert]

CSS properties that have no logical equivalence. For example, background-position-x and background-position-y. Or the CSS data-type values which supports only physical values.

(This part is probably is out-of-scope for interop-2024 at this point; I think we're trying to focus on things that are already-specced, not propose additional features/aliases that could hypothetically be added/specced.)

[ramiy]

@dholbert You are correct, the last group is out-of-scope for interop-2024, I mentioned to complete the list.

The 3rd group is the most important, and I guess there are more CSS properties & values that can be added.

[Loirooriol]

Worth noting that the logical values for caption-side are only "for implementations that support left and right". That does not apply to Blink, WebKit, nor Gecko.
So it's not that the implementation is not planned, there is simply nothing to implement.

[ramiy]

Worth noting that the logical values for caption-side are only "for implementations that support left and right". That does not apply to Blink, WebKit, nor Gecko. So it's not that the implementation is not planned, there is simply nothing to implement.

The Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) spec mentions only top | bottom | inherit physical values.

The CSS Logical Properties and Values Level 1 spec mentions block-start | block-end | inline-start | inline-end logical values. They are not supported by any browser.

@Loirooriol, browsers can implement block-start | block-end, placing the caption based on the values of writing-mode and direction properties.

[Loirooriol]

The CSS Logical Properties and Values Level 1 spec mentions block-start | block-end | inline-start | inline-end

No? It mentions inline-start | inline-end. And "The existing top and bottom values are idiosyncratically redefined as assigning to the block-start and block-end sides of the table, respectively". So there is no need to add block-start and block-end synonyms.

[ramiy]

• CSS properties that have no logical equivalence. For example, background-position-x and background-position-y. Or the CSS <position> data-type values which supports only physical values.

See CSS Backgrounds Module Level 4 spec which adds support for background-position-inline and background-position-block properties.

[wpt-interop]

Thank you for proposing CSS Logical Properties and Values for inclusion in Interop 2024.

We wanted to let you know that this proposal was not selected to be part of Interop this year.

This is because we got many more proposals than we could include in this year's project. Note that individual vendors may nevertheless choose to advance work in this area during the forthcoming year. We would welcome this proposal being resubmitted again next year if necessary.

For an overview of our process, see proposal selection. Thank you again for contributing to Interop 2024!

Posted on behalf of the Interop team.