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

> 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