简体   繁体   中英

How does CSS writing mode interact with page flow

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?

Since some people don't what I mean by "overall page flow", please see CSS 2.1 § 9.4.1 Normal flow > Block formatting contexts :

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block.

So the question could be restated: If there is a page written using the writing-mode of vertical-rl , which as shown above results in a horizontal "block flow direction", does this really result in the "normal flow" of CSS 2.1 § 9.4 to changing to "laid out one after the other, horizontally" rather than "laid out one after the other, vertically"? And does the page scroll horizontally rather than vertically as well?

Overall page flow is something you get to determine as a web developer. Set the initial view to the very last (bottom) element if you want users to scroll upwards and to progress through page content.

If you're asking about the convention for websites written in right-to-left or top-to-bottom languages, it seems that in Japanese sites in particular still flow from top to bottom, despite a different writing mode.

Here's Honda Japan's website as an example.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM