简体   繁体   English

CSS 书写模式如何与页面流交互

[英]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). CSS 书写模式第 3 级规范建立了诸如“块维度”之类的逻辑术语,对于水平书写模式,它是垂直的(就像我现在写的那样)。 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.该规范还将“块流向”定义为“块级框堆叠的方向和块容器内的行框堆叠的方向”,并表示writing-mode属性决定了块流向。 So if Japanese were using a vertical-rl writing mode, the block flow direction would be horizontal (right to left).因此,如果日语使用vertical-rl书写模式,则块流向将是水平的(从右到左)。 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?整体页面流布局(CSS 盒模型的)是否等同于编写模式决定的块流?

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.如果有使用vertical-rl书写模式用日语垂直书写的页面,则“块轴”为水平轴。 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?vertical-rl书写模式下,用户是否会向左滚动以查看英雄下方的部分?

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 :由于有些人不理解我所说的“整体页面流程”,请参阅CSS 2.1 § 9.4.1 正常流程 > 块格式上下文

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"?所以问题可以重述:如果有一个页面使用vertical-rlwriting-mode ,如上所示导致水平“块流方向”,这是否真的导致 CSS 2.1 的“正常流” § 9.4 改为“一个接一个,水平地布置”而不是“一个接一个地,垂直地布置”? And does the page scroll horizontally rather than vertically as well?页面是否也水平滚动而不是垂直滚动?

Overall page flow is something you get to determine as a web developer.整体页面流是您作为 Web 开发人员必须确定的。 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.这里以Honda Japan 的网站为例。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

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