[css-env-1] values for screen edge avoidance

[grorg]

As per #2820, we're proposing four env() values that indicate the inset from the edges of the page which guarantee visibility and interactivity.

This is commonly referred to as a "safe area".

The four values are:

• safe-area-inset-top
• safe-area-inset-right
• safe-area-inset-bottom
• safe-area-inset-left

They evaluate to a <length> value.

[grorg]

[css-meeting-bot]

The Working Group just discussed Accept safe-area-inset*.

The full IRC log of that discussion

<fantasai> Topic: Accept safe-area-inset*
<fantasai> github: https://github.com/w3c/csswg-drafts/issues/2868
<fantasai> dino: We proposed this last year
<fantasai> dino: I think this one is hopefully not so controversial
<fantasai> dino: We expose it so ppl can avoid notch in iPhone and rounded corners
<fantasai> dino: But can also be used for e.g. safe area for televisions
<fantasai> fantasai: Would be really usefl for printing as well
<astearns> https://drafts.csswg.org/css-env-1/#safe-area-insets
<fantasai> dino: Having experimented with this, it makes sense for insets
<fantasai> dino: But let's imagine that what you're trying to do is get ppl to avoid X in thet top corner of the screen
<fantasai> dino: page shouldn't put anything there
<fantasai> dino: Should we inset the entire top/left sides?
<fantasai> dino: Or just a note saying avoid that part of the screen?
<fantasai> dino: Let's pause and talk about that later?
<fantasai> dbaron: There was some prec prose that Rebecca Hughes and I iterated over
<fantasai> dbaron: Because I didn't want Google to ship without a spec for it
<fantasai> dbaron: What I suggested there, and which I thin kis now in the draft,
<fantasai> dbaron: Was that the insets together should define a rectangle such that everything in that rectangel is safe
<fantasai> dbaron: But what you're showing is your insets are more than that
<fantasai> dbaron: You could use any pair of them... but that doesn't work for the notch
<fantasai> dino: Right, for notch, we have top and bottom insets and it's fine
<fantasai> dino: But if your rotate sideways, then you have left and right insets
<fantasai> dbaron: I'm wondering if the diagram is intentional
<fantasai> dbaron: I'm suggesting that the rectangle inside the insets was safe
<fantasai> dbaron: but if you move any of those lines outward, then it's no longe rsafe
<fantasai> (dbaron is talking about taking the largest rectangle that would fully fit within the safe area, and using its edges as the inset edges vs. considering each inset individually, making sure the entire screen is safe along that edge or inward from it)
<fantasai> dbaron: Specced that the UA is allowed to pick whatever it wants that would maximize the the usuable space
<fantasai> dbaron: There are multiple solutions, might want a narrower or wider rectangle, that affects how tall it can be
<fantasai> myles: The UA is the one that decides what safe me
<fantasai> myles: We could say that the innermost rectangle is safe
<fantasai> dbaron: Prose we put it said something like
<fantasai> “There is some nonrectangular safe region. The insets define some maximal rectangle within that region”
<fantasai> fantasai restates what dbaron was saying
<fantasai> dino: I think this definition would be acceptable...
<fantasai> dino: User agent could also be free to pick a rectangle where it only specifies a top and a bototm inset in this case, and uses the entire width
<fantasai> dino: Would be overagressive in saying what's safe
<fantasai> fantasai: there might be different use cases for each definition...
<fantasai> myles: For TV example, there's no horizontal line that's afe all the way across
<fantasai> dino: TV wants more like the green example (individal insets)
<fantasai> dino: whereas a rounded display needs more like the red one (dbaron's definition)
<astearns> q?
<fantasai> iank_: Another take is that the green is the same as the red plus a margin
<fantasai> fantasai: Could have two different sets of variables, safe-area-inset and safe-rect-inset...
<fantasai> heycam: With scrolling, might have different preferences on whether to maximize horizontal or vertical areas
<fantasai> myles: UA could alter these
<fantasai> astearns: Hroizontal vs vertical orientation of device, would UA reset them depending on orientation?
<fantasai> dino: Currently does, yes
<fantasai> myles: ...
<fantasai> astearns: Are you unsure whether having these four insets is the right design?
<fantasai> dino: I was sure, now wondering whether we should define them as the red rectangle
<fantasai> dino: With the green rectangle you can be safe, if I pad enough from the top, I know I'm going to be visible in that case, even though I wo'n't be safe...
<fantasai> dino: Maybe we should hold this.
<fantasai> dino: I will take this back and discuss with other ppl
<fantasai> dbaron: I think the text needs adjusting for the TV use case, also.

[dbaron]

Recreation of my first whiteboard drawing:

[upsuper]

Maybe better:

[jonjohnjohnson]

How will https://drafts.csswg.org/css-round-display-1 work alongside safe-area-inset values? @jihyerish? Can't imagine the green line would mean much in round displays, while the red could mean everything if you didn't wan't to utilize shape-inside/border-boundary to present your content well in that form? Especially since the @viewport rule is currently up in the air, with viewport-fit: contain being it's way to get "the largest inscribed rectangle of the display".