W3C home > Mailing lists > Public > public-css-archive@w3.org > June 2021

[csswg-drafts] [css-logical] Add some logical version for box-shadow and text-shadow (#6338)

From: Manuel Rego Casasnovas via GitHub <sysbot+gh@w3.org>
Date: Wed, 02 Jun 2021 14:28:21 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-909564516-1622644099-sysbot+gh@w3.org>
mrego has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-logical] Add some logical version for box-shadow and text-shadow ==
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:
```css
  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.

![Output of text-shadow and box-shadow from the previous example (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 on the vertical element)](https://user-images.githubusercontent.com/11602/120497774-fa91e500-c3be-11eb-9eb9-993efed90a12.png)

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.

![Proposed output if we have logical properties (the horizontal case is the same than before but the vertical one changes, now text shadow will be 10px down and 5px to the left, and the box shadow 20px down and 10px left](https://user-images.githubusercontent.com/11602/120497931-1d23fe00-c3bf-11eb-8e39-8c5b08214a01.png)

Note that [there's a proposal to make `box-shadow` and `text-shadow` a shorthand](#4431), so this would be part of the `box|text-shadow-offset`.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6338 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Wednesday, 2 June 2021 14:28:53 UTC

This archive was generated by hypermail 2.4.0 : Thursday, 24 March 2022 20:27:24 UTC