2

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?

Garret Wilson
  • 18,219
  • 30
  • 144
  • 272
  • 1
    The page will flow both directions (having a natural for down regardless of the writing mode). I think the examples on the MDN show exactly that https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes –  Sep 11 '20 at 20:22
  • It probably depends on what you mean by "overall page flow". Can you point to an official definition for that concept? But CSS 2.2 defines how block and inline flow works. Overflow is obliged to conform to that. Scrolling has to be applied to allow access to the overflowed content that's at positive coordinates of the two axes. – Alohci Sep 17 '20 at 20:56
  • By "overall page flow" I am referring to the "normal flow" of _CSS 2.1 § 9.4_ for block formatting contexts; see my updated question. – Garret Wilson Sep 19 '20 at 02:08
  • Surely this is trivially testable. Set the writing mode of `vertical-rl` to the root element and provide more than a page's worth of text. If you do, you'll see that the page will grow horizontally, and when it overflows the viewport, you'll get a horizontal scrollbar. What am I missing? – Alohci Sep 21 '20 at 00:28

1 Answers1

0

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.

McKay M
  • 448
  • 2
  • 8
  • Thanks, it's nice to know what the convention is in designing sites. I'm not asking about "convention". I'm asking very specifically what the _CSS specifications_ say in regarding to what the browser must do when a certain CSS `writing-mode` is used. Does the site you mentioned use a `vertical-rl` or a `vertical-lr` writing mode? If it does not, then it's just the same block flow as typical Western sites but with Japanese characters, and provides no insight on the question raised. – Garret Wilson Sep 17 '20 at 13:34
  • CSS `writing-mode` only affects how blocks are arranged within an HTML element given that tag. Perhaps giving some code example where you're struggling to use it would help make your question more answerable? – McKay M Sep 17 '20 at 14:15