#StackBounty: #css #internationalization #page-flow How does CSS writing mode interact with page flow

Bounty: 50

The CSS Writing Modes Level 3 specification establishes logical terms such as "block dimension", which would be vertical for horizontal writing modes (as I’m writing now). Thus "block size" in Western writing would correspond to the physical dimension "height". I understand that part fine.

The specification also defines the "block flow direction" as "the direction in which block-level boxes stack and the direction in which line boxes stack within a block container", and says that the writing-mode property determines the block flow direction. So if Japanese were using a vertical-rl writing mode, the block flow direction would be horizontal (right to left). And elsewhere when discussing abstract dimensions, the specification defines "block axis" as equivalent to the vertical axis in Western right modes (on this page on which I’m writing, blocks flow vertically), and to the horizontal axis in vertical writing modes.

And this is where I’m not clear about the distinction (if any) between the writing mode logical axes and the overall page flow. Is the overall page flow layout (of the CSS box model) equivalent to the block flow determined by the writing mode?

Here is an example to illustrate my doubt. If there is a page written in Japanese vertically using the vertical-rl writing mode, the "block axis" is the horizontal axis. So does that mean the page flows horizontally? Rather than scrolling down, would a user scroll left to see the rest of the page? Consider a typical landing page with a "hero" at the top of the screen and then various sections below it, with a footer at the bottom. In the vertical-rl writing mode, would the user scroll left to see the sections under the hero?

I guess the question comes down to: is the overall page flow really equivalent to the block flow direction, or does ultimately the page always flow and scroll down regardless of the writing mode?


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.