<dialog> centered alignment text is very opaque

[smfr]

No normal human can understand this paragraph (which is also a single sentence):

When an element subject is placed in centered alignment mode, and when it is in that mode and has new rendering boxes created, the user agent must set up the element such that its static position of the edge that corresponds to subject's parent's block-start edge, for the purposes of calculating the used value of the appropriate box offset property ('top', 'right', 'bottom', or 'left'), is the value that would place the element's margin edge on the side that corresponds to subject's parent's block-start side as far from the same-side edge of the viewport as the element's opposing side margin edge from that same-side edge of the viewport, if the element's dimension ('width' or 'height') in subject's parent's block flow direction is less than the same-axis dimension of the viewport, and otherwise is the value that would place the element's margin edge on the side that corresponds to subject's parent's block-start side at the same-side edge of the viewport.

at https://html.spec.whatwg.org/multipage/interactive-elements.html#centered-alignment

I think it's saying that centering is like auto margins, but it's very hard to tell.

[smfr]

I filed issue 4645 in CSS to discuss the problem that this isn't implementable as some UA stylesheet rules.

[annevk]

Thanks @smfr! I think ideally @whatwg/css takes care of providing primitives for this in CSS as you suggest and then we make dialog use those.

[fantasai]

Conclusion from the CSSWG issue:

• The dialog is assigned to the "top layer" (which probably should be defined in css-position-3 once it's rewritten, but is currently defined in Fullscreen).
• DOM snapshots the top/bottom of the viewport as inset property values when the dialog is opened, and rewrites those values if the viewport is resized.
• The dialog is also assigned align-self: safe center; this takes care of the centering within the viewport.

I think the one question I can think of wrt CSS interaction is where the inset values are injected, if it's at the preshint level or into the style attribute or something else. Depends on what's reasonably implementable and what's reasonably Web-compatible...

[smfr]

• The dialog is assigned to the "top layer" (which probably should be defined in css-position-3 once it's rewritten, but is currently defined in Fullscreen).

Is css-postion-3 going to describe stacking order (supersede CSS 2.2 Appendix E)? Because I think the top layer stuff is more about z-ordering than positioning.

[annevk]

@fantasai was this discussed with implementers? I would imagine them to use some kind of special inset value instead. Reacting to a resize seems like it would be too late.

Would the element always have align-self: safe center unless overridden?