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 as html { 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.
- 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.
https://drafts.csswg.org/css-writing-modes-3/#principal-flow
When applying
writing-mode: vertical-rltobody,htmlhas writing-mode valuehorizontal-tb(initial value) according to the note and there happens an orthogonal flow betweenhtmlandbody?Each browsers behave differently about this:
body { writing-mode: vertical-rl }behaves as same ashtml { writing-mode: vertical-rl }.According to the old spec text, an orthogonal flow can't happen.