书写模式系统简介

块和行内

在考察各种书写系统的方向性之前，理解“块”和“行内”这两个术语很重要。行内是指字符和单词在行内的流动方式。块是指行或内容块相互堆叠的方式。文档的书写模式决定了文档的块方向和行内方向。它们不基于物理方向，例如左、右、上和下。

尺寸和方向

网页上的所有内容都以行内或块尺寸布局。行内尺寸是文本行在当前书写模式中运行的尺寸，而块尺寸是块（例如段落）一个接一个地显示的尺寸。行内尺寸垂直于块尺寸。

在英语文档中，文本水平从左到右运行，或在阿拉伯语文档中，文本水平从右到左运行，行内尺寸是水平的，而行内方向分别是左到右和右到左。在这两种情况下，块尺寸都是垂直的，块方向是从上到下。在像日语这样的垂直书写模式中，行内尺寸是垂直的，因为该书写模式中的行是垂直运行的，而块尺寸是水平的。

行内框和块框

在正常流布局中，框的外部显示类型决定了该框在页面上与其他元素并排时的行为。行内框包裹每行文本，并沿行内尺寸布局。

块框表示页面上的容器，可以包含其他块元素和行内元素。它们沿块尺寸布局，并沿行内尺寸扩展以填充其容器中所有可用空间（如果未通过inline-size等属性在行内尺寸中设置特定大小）。如果您使用水平显示文本的书写模式（例如英语），块框只从页面的顶部到底部显示。

CSS 逻辑属性和值模块定义了 CSS 中许多物理属性和值的流相对映射，这有助于理解逻辑属性和值的基本概念。

行内基线方向和块流方向

行内基线方向是内容在行内排序的主要方向，并定义了行的“开始”和“结束”。direction 属性指定了框的行内基线方向，并与unicode-bidi 属性以及任何文本内容的固有方向性一起，决定了行内级内容在行内的排序。

块流方向是块级框和行框在块容器内堆叠的方向。writing-mode 属性决定了块流方向。

书写模式系统

不同的书写系统有不同的书写模式。水平书写模式是指文本行是水平的，即向下或向上的块流。垂直书写模式是指文本行是垂直的，即向左或向右的块流。

拉丁语和斯拉夫语系的书写通常使用从左到右的行内方向和从上到下的块流方向。拉丁语系包括英语、西班牙语、罗马尼亚语和葡萄牙语。斯拉夫语系包括乌克兰语、波兰语和捷克语。

<p lang="en-US" dir="auto">This is written in English</p>
<p lang="lt-LT" dir="auto">Tai parašyta lietuviu kalba</p>
<p lang="el-GR" dir="auto">Αυτό είναι γραμμένο στα ελληνικά</p>

阿拉伯语系的书写通常使用从右到左的行内方向和从上到下的块流方向。有几种水平从右到左的语言，包括阿拉伯语、阿拉姆语、阿塞里语、迪维希语、富拉语、希伯来语、库尔德语、恩科语、波斯语、罗兴亚语、叙利亚语和乌尔都语。

<p lang="ur-PK" dir="auto">یہ اردو میں لکھا ہے۔</p>
<p lang="ku-CRB" dir="auto">ئەمە بە کوردی نووسراوە</p>

汉字系的书写通常使用从左到右的行内方向和从上到下的块流方向，或从上到下的行内方向和从右到左的块流方向。传统上，中文、越南语、韩语和日语以竖排形式书写，从上到下，块方向从右到左，但在线上通常会以横排形式从左到右呈现。

<p lang="jp-JP" dir="auto">これはベトナム語で書かれています</p>

蒙古语系的书写通常是竖排的，从上到下，列从左到右流动；行内方向从上到下，块流方向从左到右。这与中文、日文和韩文不同，它们的竖排文本列是从右到左阅读的。这源于蒙古文字是从古维吾尔语演变而来，而古维吾尔语是从左到右书写的。

<p lang="mn-MONG" dir="auto">Үүнийг монгол хэлээр бичжээ</p>

为了正确渲染书写模式，我们使用全局 HTML dir 属性。由于浏览器可以关闭 CSS 样式，建议使用 dir 属性和 <bdo> 元素，以确保在没有样式表的情况下正确的双向布局，而不是 CSS direction 属性。

对于垂直语言，我们使用 writing-mode 和 text-orientation 属性。

[lang|="jp"] {
  writing-mode: vertical-rl;
  text-orientation: sideways;
}
[lang|="mn"] {
  writing-mode: vertical-lr;
  text-orientation: sideways;
}

[lang|="jp"],
[lang|="mn"] {
  float: left;
}

混合书写模式

虽然这些不同的语言有不同的书写模式，但主要使用一种书写模式的网站可能包含来自不同语言或书写模式的内容。例如，阿拉伯语（从右到左）新闻网站上的文章可能包含拉丁风格的数字，这些数字是从左到右书写的。许多杂志和报纸在同一页面上混合使用不同的书写模式。本指南也一样，它展示了不同的书写模式。

排版模式决定了垂直脚本是使用垂直流特有的排版约定（垂直排版模式）还是使用水平书写模式的排版约定（水平排版模式）。这个概念区分了垂直排版和旋转的水平排版。

书写模式的 text-orientation 组件控制垂直排版模式中的字形方向，规定特定的排版字符单元是直立排版还是侧向排版。

另见

• CSS 书写模式模块