[css-logical] Add some logical version for box-shadow and text-shadow

[mrego]

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

It'd be nice to add the possibility to set the shadow offsets as inline and block so if we have a vertical writing mode it still looks similar.

Example:

  text-shadow: 10px 5px magenta;
  box-shadow: 20px 10px cyan;
  background: yellow;

On an element with horizontal writing mode the text shadow will be 10px on the right and 5px down, and the box shadow 20px on the right and 10px down.
And the same will happen on a vertical element.

If we could set those values in a logical form setting inline and block offset we could get the same effect in both horizontal and vertical writing modes. On the vertical element the text shadow will be 10px down and 5px to the left, and the box shadow 20px down and 10px left.

Note that there's a proposal to make box-shadow and text-shadow a shorthand, so this would be part of the box|text-shadow-offset.

[abhinaysindham45]

I don't know exactly what the issue is about
But i might think it can be solved using the filter effect instead of box shadow or text shadow
Try using filter : drop-shadow(10px 5px cyan)

[mrego]

The very same issue is also present with drop-shadow. The problem is that the offsets are physical (right and bottom), so when you have vertical writing mode, they still go to the right and to the bottom. The issue here is about having logical offsets, so when you're in RTL or a vertical writing mode they go in a different physical direction.

[jonjohnjohnson]

I have a feeling this could rely on what's resolved in #1282.

[abhinaysindham45]

something like
.box-shadow { 0 10px 10px black }

.vrm .box-shadow { 10px 0 10px black }

I was thinking of changing it with the direction attribute, but that doesn't help with vertical writing modes (I think?)....
Changing the shadow direction and using spread
I think it might help....

[ramiy]

@mrego I agree with you, this issue is becoming a major problem in my projects.

Currently, box-shadow and text-shadow properties use physical values not logical values. They should support different direction and writing-mode values, to support LTR & RTL writing-direction, in addition to vertical & horizontal writing-modes.

In the illustration above, you display only different writing modes. But when you use direction: rtl; the shadow doesn't switch to the other side. It should be addressed too.

[SebastianZ]

As mentioned in an earlier comment, #1282 is trying to find a general solution for the physical/logical values issue. The solution there will apply to box-shadow and text-shadow as well.

@frivoal Just adding you to the discussion to add those two properties when enumerating the ones affected by this issue.

Sebastian