Should centered modal <dialog>s support vertical writing modes?

[domenic]

Moved from https://www.w3.org/Bugs/Public/show_bug.cgi?id=21770.

https://html.spec.whatwg.org/multipage/forms.html#centered-alignment specifically talks about the top/bottom positioning and margin of a dialog element. In that bug it was brought up that ideally it should instead talk about the block direction, so that it works well with vertical writing modes.

@mattto said:

I don't think think anyone has plans to implement this in Blink though, unless <dialog> gets more usage and there's demand for vertical writing mode support.

So to me this comes down to a question of what Gecko wants, since they are actively implementing dialog right now. If they want to support vertical writing modes, we can change the spec, and Blink will be in violation. Whereas if they want to just be compatible with Blink, we will leave the spec as is.

Thoughts, @smaug---- and @nt1m?

[smaug----]

This sounds like a case which should be supported, just to treat various languages as equally as possible.
Maybe some CSS folks have opinion on this. @fantasai perhaps?

[domenic]

Yeah, I think it's clearly better to support the vertical writing modes; it's just a matter of implementer will. And we don't have that from Blink, which is 1/2 of the implementations of dialog :(. So that's why I'm asking Gecko specifically.

[domenic]

I also wonder why the vertical centering is implemented in prose instead of in CSS. There must be a history there... @mattto? https://www.w3.org/Bugs/Public/show_bug.cgi?id=20418 has some history but seems to be taking it as a given that we want to use an algorithm for this instead of CSS.

[nt1m]

Agreed with smaug, it makes sense for accessibility and it's quite straightforward to take care of (simple CSS change).

[mfalken]

I also wonder why the vertical centering is implemented in prose instead of in CSS. There must be a history there... @mattto?

@tabatkins might know the history more. Do you mean why vertical centering was specified for dialog itself rather than as a CSS feature? It could be that it depended so much on centering as part of the showModal() call which included placing the dialog in the top layer.

[mfalken]

Ahh.. just remember some history is captured here:
https://groups.google.com/a/chromium.org/forum/#!topic/webkit-layout/-B56yKjTYdI

I think we wanted to make it a CSS property but it was too difficult to spec the "center-when-first-shown-and-keep-that-position" property without depending on a function like showModal() being invoked.

[tabatkins]

Yeah, it really wants to invoke a notion of time that's somewhat awkward to do in CSS (being a mostly-stateless programming language).

I mean, we have the right primitives - we invoke animations on a similar trigger - it's just awkward.

[domenic]

I think we wanted to make it a CSS property but it was too difficult to spec the "center-when-first-shown-and-keep-that-position" property

I must be missing something basic. How is that different from position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; height: fit-content;?

[mfalken]

Not sure. I think that centers relative to the ICB but not the viewport? https://jsfiddle.net/wzbxo5a1/

[domenic]

Ah cool, good catch.

Since it sounds like Gecko is interested in implementing this as logical positioning, I'll change the spec.