Csswg-drafts: [css-logical] flow-relative gradients

[jonathantneal]

When writing right-to-left CSS, I’ve noticed I sometimes need to flip presentational images (usually symbols, like "left" or "right" arrows) and gradients. I’m not sure how to solve the former issue, but I have an idea of how I could solve the later.

I propose this addition to CSS Logical Properties and Values that would allow myself and others to write flow-relative gradients.

The linear gradient syntax is:

linear-gradient() = linear-gradient(
  [ <angle> | to <side-or-corner> ]? ,
    <color-stop-list>
)

And the physical and flow-relative values for <side-or-corner> would be:

<side-or-corner> =
[ [left | right] || [top | bottom] ] |
[ [inline-start | inline-end] || [block-start | block-end ] ]

^ updated to reflect @tabatkins feedback

Using this syntax, I could write:

header {
  background-image: linear-gradient(to inline-end, yellow 0%, blue 100%);
}

And left-to-right page progressions would see the equivalent to:

header {
  background-image: linear-gradient(to right, yellow 0%, blue 100%);
}

While right-to-left page progressions would see the equivalent to:

header {
  background-image: linear-gradient(to left, yellow 0%, blue 100%);
}

I’ve put this into a (probably poorly written) spec: https://jonathantneal.github.io/logical-gradients-spec/

[tabatkins]

You can't conflate left/right and inline-* like that (same with top/bottom and block-*); the entire point is that they might be a different axis. ^_^ We've determined that mixing physical and logical is pretty low-value and not worth the cost in complexifying the grammar, so the grammar should probably look like:

[ [left | right] || [top | bottom] ] |
[ [inline-start | inline-end] || [block-start | block-end ] ]

[jonathantneal]

Oh, right! Doh. Fixing in the speculative spec as well.

[AmeliaBR]

I think this is useful, and (with Tab's fix) should be a straight-forward implementation.

That said: The image() function in Images 4 is currently spec'd to include a directional flag. It allows you to specify that an image was designed specifically for a LTR or RTL layout, and that the browser should automatically flip it for the reverse direction. That syntax could also be used to flip gradient images. However, as currently spec'd, it wouldn't handle the more complex cases of the intersection of writing-mode and direction.

Also:

What about radial gradients? They are currently defined using the <position> data type by reference. Are there currently any plans to make <position> able to use logical directions (as an extension of the three or four value syntax)?

[fantasai]

https://drafts.csswg.org/css-backgrounds-4/#the-background-position is a good reference here.
Wrt flipping images, there was a proposal for that in earlier drafts of css-images: https://www.w3.org/TR/2012/WD-css3-images-20120112/#image-notation

[argyleink]

i found myself wanting this over the weekend and was pleased to see I didn't need to write a proposal, rather I could cast my vote towards one 👍