- From: Jen Simmons via GitHub <sysbot+gh@w3.org>
- Date: Mon, 14 Jun 2021 18:57:28 +0000
- To: public-css-archive@w3.org
jensimmons has just created a new issue for https://github.com/w3c/csswg-drafts: == [css-env] Safe Area Insets need Logical versions == Currently, the [Environment Variables specification defines four variables](https://drafts.csswg.org/css-env-1/#safe-area-insets), all physical: ``` safe-area-inset-top safe-area-inset-right safe-area-inset-bottom safe-area-inset-left ``` At first glance, having physical definitions seems to be all we need. We are, after all, describing literally the top, right, bottom and left edges of a device. However, we do need logical versions, presumably: ``` safe-area-inset-block-start safe-area-inset-block-end safe-area-inset-inline-start safe-area-inset-inline-end ``` Why? For use cases like this, where the text headline & paragraphs need an inline-start margin to push them away from the left edge. <img width="1179" alt="Screen Shot 2021-06-14 at 2 52 04 PM" src="https://user-images.githubusercontent.com/108474/121943942-17fc7280-cd20-11eb-884f-d0fab0163a18.png"> To support LTR + horizontal-tb, I can just write `margin-left: env(safe-area-inset-left)`, but to support multiple writing modes, I should use `margin-inline-start: env(safe-area-inset-inline-start);` Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6379 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Monday, 14 June 2021 18:57:57 UTC