[css-images] RTL issue in radial-gradient() and conic-gradient()

[ramiy]

Both Radial Gradients and Conic Gradients are not RTL compatible. When using RTL languages, we need the reverse everything.

Currently both radial-gradient() and conic-gradient() support only one direction, clockwise. There is not support for counter-clockwise.

There should be a way to set counter-clockwise direction.

Possible solution

In redial-gradient we have keywords like closest-side, closest-corner, farthest-side and farthest-corner.

There should be two "direction" keywords clockwise and counter-clockwise. Why two? do override previously defined settings.

[ramiy]

@LeaVerou please share your thoughts on this issue.

[LeaVerou]

Yeah, we definitely need logical keywords in addition to the physical ones already there.

I'm confused about the clockwise and counter-clockwise proposal. Is that a separate proposal or does it somehow help with bidi?

[ramiy]

To clarify my solution, I was talking about something like this:

background: conic-gradient(at 50% 50% clockwise, #f06, gold);
background: conic-gradient(at 50% 50% counter-clockwise, #f06, gold);

background: conic-gradient(from 45deg clockwise, white, black, white);
background: conic-gradient(from 45deg counter-clockwise, white, black, white);

You can use other keywords or propose other solutions.

As long as I'll able to reverse everything, I don't care about the "how".