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

Re: [csswg-drafts] [css-env] Safe Area Insets need Logical versions (#6379)

From: Jen Simmons via GitHub <sysbot+gh@w3.org>
Date: Tue, 13 Jul 2021 18:37:25 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-879312474-1626201444-sysbot+gh@w3.org>
> Why is margin-left: env(safe-area-inset-left); margin-right: env(safe-area-inset-right); not a solution for the use case above? 

Well, in that example, the text (h1, h2, & p) has a margin that reaches the safe area, while the photo does not — it extends out to the edge of the screen. I'm using `padding-left: env(safe-area-inset-left);` on the text, while the photo has `padding-right: 0;`. 

Like everything for logical properties, the value in having logical versions of environment variables is in providing internationalization support. Imagine this demo published in multiple languages, including RTL scripts. I want to write one set of code, not two. 

I could write:
.ltr h1, .ltr h2, .ltr p { 
     padding-left: env(safe-area-inset-left); 
.rtl h1, .rtl h2, .rtl p { 
     padding-right: env(safe-area-inset-right); 

With logical values, I could write this instead:
h1, h2, p { 
     padding-inline-start: env(safe-area-inset-inline-start);

And yes, I'm imagining this to work on the root writing mode, not the writing mode of the element itself. 

GitHub Notification of comment by jensimmons
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6379#issuecomment-879312474 using your GitHub account

Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Tuesday, 13 July 2021 18:37:27 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:42:39 UTC