[css-logical] Handling ambiguous physical/logical shorthands with var() · Issue #9690 · w3c/csswg-drafts · GitHub
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-logical] Handling ambiguous physical/logical shorthands with var() #9690

Open
tabatkins opened this issue Dec 9, 2023 · 2 comments
Open
Labels
css-logical-1 Current Work

Comments

@tabatkins
Copy link
Member

A few shorthands can potentially expand to either physical longhands or logical longhands, depending on the content of the property. For example, margin: 5px 10px; expands to margin-top: 5px; margin-bottom: 5px; margin-left: 10px; margin-right: 10px;, but margin: logical 5px 10px; instead expands to margin-block: 5px; margin-inline: 10px;.

The fact that they expand to one set of longhands is, currently, important for the model, since we track precisely whether you've used a physical or logical longhand for each axis/side.

However, if you write margin: var(--foo);, you can't tell whether the property will expand into physical or logical longhands until computed-value time, but we need to know that at parse time. Because of the above point about why they need to expand to either physical or logical but not both, they can't do the normal var()-in-shorthand trick of expanding into a magic unserializable form that'll become real at computed-value time.

We either need to add some more magic to the "did you set this side using physical or logical" that allows for a magic unobservable var() value that will decide its origin later, or we need to switch the syntax for "I'm gonna expand into logical values" to outside the value space, such as with a bang-syntax.

I think we should try for the first option first, since this also applies to our attempt to put logical keywords into the background-position property. The syntax isn't ambiguous in that case (unlike with margin), so it would be awkward to have to write background-position: start start !logical;.

@tabatkins tabatkins added the css-logical-1 Current Work label Dec 9, 2023
@Loirooriol
Copy link
Contributor

A few shorthands can potentially expand to either physical longhands or logical longhands

That's not the currently the case in implementations.

margin: logical 5px 10px

This syntax is under discussion in #1282, which seems to be leaning towards other approaches.

put logical keywords into the background-position

If this is the only problematic case, it seems simpler to just not put logical keywords into background-position.

@tabatkins
Copy link
Member Author

Yeah, if it ends up being the only such case, I agree.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css-logical-1 Current Work
Projects
None yet
Development

No branches or pull requests

2 participants