[css-env] Safe Area Insets need Logical versions

[jensimmons]

Currently, the Environment Variables specification defines four variables, 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.

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);

[fantasai]

@jensimmons Which writing mode are you wanting to reference? The root element or the element itself? I'm guessing the latter?

[emilio]

Yeah, that's tricky, since it means that the value of the env var depends on where it's applied to... Why is margin-left: env(safe-area-inset-left); margin-right: env(safe-area-inset-right); not a solution for the use case above? Is the idea that you want the image to overflow through the safe area?

[jensimmons]

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.