[css-logical][css-images] 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 👍

[Loirooriol]

Note we already have a precedent for referring to logical box corners: start-start, start-end, end-start, end-end (https://drafts.csswg.org/css-logical/#border-radius-properties).

So to be consistent, the syntax should maybe be

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

[shadeed]

Just wanted to comment as I filed a similar issue #8015 and add my vote here instead.

[Loirooriol]

Additionally to logical sides/corners, I wonder about logical angles?

We have 0deg=top, 90deg=right, 180deg=bottom and 270deg=left.
We could maybe have logical angle units, or logical(<angle>), with 0=block-start, 90=inline-end, 180=block-end, and 270=inline start?

Related to #1544 (logical rotation transforms).

[clshortfuse]

Using multiple masks to ensure top/end is exactly 50% to replicate:

https://m3.material.io/styles/shape/shape-scale-tokens

.shape[shape-end] {
  --mdw-shape__size__top-start-size: 0px;
  --mdw-shape__size__bottom-start-size: 0px;
  --mdw-shape__mask: linear-gradient(to left, transparent 50%, black 50%);
}

.shape {
    -webkit-mask-box-image: var(--mdw-shape__mask-border-source) 8 fill / var(--mdw-shape__size) stretch;
    -webkit-mask: var(--mdw-shape__mask);
}

The "to left" isn't going to work with RTL.

Edit: Ugh, complex math, but it works:

:root {
  --mdw-dir: 1;
}

html[dir="rtl"] {
  --mdw-dir: -1;
}

.shape {
  /* (1/2n + 1/2)L + (-1/2n + 1/2)R  */
  --mdw-shape__ltr: calc(0.5 * var(--mdw-dir, 1) + 0.5); /* 1 if LTR, 0 if RTL */
  --mdw-shape__rtl: calc(-0.5 * var(--mdw-dir, 1) + 0.5); /* 0 if LTR, 1 if RTL */
  --mdw-shape__size__top-left-size: calc((var(--mdw-shape__ltr) * var(--mdw-shape__size__top-start-size)) + (var(--mdw-shape__rtl) * var(--mdw-shape__size__top-end-size)));
  --mdw-shape__size__top-right-size: calc((var(--mdw-shape__rtl) * var(--mdw-shape__size__top-start-size)) + (var(--mdw-shape__ltr) * var(--mdw-shape__size__top-end-size)));
  --mdw-shape__size__bottom-left-size: calc((var(--mdw-shape__ltr) * var(--mdw-shape__size__bottom-start-size)) + (var(--mdw-shape__rtl) * var(--mdw-shape__size__bottom-end-size)));
  --mdw-shape__size__bottom-right-size: calc((var(--mdw-shape__rtl) * var(--mdw-shape__size__bottom-start-size)) + (var(--mdw-shape__ltr) * var(--mdw-shape__size__bottom-end-size)));

  --mdw-shape__inline-start-deg: calc(var(--mdw-dir, 1) * -90deg);
}

.shape[shape-end] {
  --mdw-shape__size__top-start-size: 0px;
  --mdw-shape__size__bottom-start-size: 0px;
  --mdw-shape__mask: linear-gradient(var(--mdw-shape__inline-start-deg), transparent 50%, black 50%);
}

[SebastianZ]

As there was pretty much agreement on adding logical values for gradients, I put this on the agenda.

I believe there are three things to be discussed:

1. Adopt @Loirooriol's suggestion for adding <logical-side> and <logical-corner> values.
2. Also suggested by @Loirooriol, add a logical directions syntax for defining the origin of angles. (Idea was a logical() function but could also be a logical keyword.)
3. Should this be added to CSS Images 4 or CSS Logical 1?

Sebastian