Description
https://drafts.csswg.org/css-writing-modes-3/#principal-flow
As a special case for handling HTML documents, if the root element has a body child element [HTML], the principal writing mode is instead taken from the values of writing-mode and direction on the first such child element instead of taken from the root element. Note that this does not affect the values of writing-mode or direction on the root element itself.
When applying writing-mode: vertical-rl
to body
, html
has writing-mode value horizontal-tb
(initial value) according to the note and there happens an orthogonal flow between html
and body
?
Each browsers behave differently about this:
- Edge: An orthogonal flow doesn't happen.
body { writing-mode: vertical-rl }
behaves as same ashtml { writing-mode: vertical-rl }
. - Chrome: It seems an orthogonal flow happens since the margin of body child elements doesn't collapse with the margin of a body element.
- I filed https://bugs.chromium.org/p/chromium/issues/detail?id=845008 and it marked as WontFix.
- Firefox: Propagation of writing-mode is not supported. https://bugzilla.mozilla.org/show_bug.cgi?id=1102175
According to the old spec text, an orthogonal flow can't happen.
The propagated values are treated as if they were specified on the root element.