CSS书写模式（Writing Modes）：垂直排版与混合方向布局的坐标系变换

CSS 书写模式（Writing Modes）：垂直排版与混合方向布局的坐标系变换

大家好，今天我们来深入探讨一个鲜为人知但功能强大的 CSS 特性：书写模式（Writing Modes）。很多人可能对这个概念感到陌生，但它在实现垂直排版、创建复杂的混合方向布局以及处理国际化文本方面扮演着至关重要的角色。 理解书写模式，不仅仅是了解几个 CSS 属性，更重要的是理解它如何影响元素的坐标系，从而影响我们对元素位置、尺寸和布局的控制。

1. 什么是书写模式？

书写模式（Writing Modes）定义了文本在页面上的排列方向。 它影响了块级元素的流动方向，也影响了行内内容在块级元素中的排列方式。 简单来说，它决定了文本是水平排列（从左到右或从右到左）还是垂直排列（从上到下或从下到上）。

CSS 中与书写模式相关的核心属性有三个：

• writing-mode: 定义块级元素的文本流方向。
• direction: 定义行内元素的文本流方向。
• text-orientation: 定义文本的字符方向，主要用于垂直书写模式。

2. writing-mode 属性详解

writing-mode 属性是控制书写模式的核心。 它接受以下常见值：

值	描述
horizontal-tb	这是默认值。文本水平排列，从上到下流动（top-to-bottom）。相当于传统的横向排版。
vertical-rl	文本垂直排列，从右到左流动（right-to-left）。每一行文字从上到下排列，行与行之间从右向左排列。常用于传统的中文、日文排版。
vertical-lr	文本垂直排列，从左到右流动（left-to-right）。每一行文字从上到下排列，行与行之间从左向右排列。
sideways-rl	文本水平排列，但整个块级元素的内容顺时针旋转 90 度。
sideways-lr	文本水平排列，但整个块级元素的内容逆时针旋转 90 度。

让我们看一些例子：

<div class="horizontal">
  横向排列的文本
</div>

<div class="vertical-rl">
  垂直排列的文本 (从右到左)
</div>

<div class="vertical-lr">
  垂直排列的文本 (从左到右)
</div>

<style>
.horizontal {
  writing-mode: horizontal-tb;
  border: 1px solid black;
  width: 200px;
}

.vertical-rl {
  writing-mode: vertical-rl;
  border: 1px solid black;
  width: 200px; /* 注意，宽度现在控制的是垂直方向的尺寸 */
  height: 100px; /* 高度现在控制的是水平方向的尺寸 */
}

.vertical-lr {
  writing-mode: vertical-lr;
  border: 1px solid black;
  width: 200px; /* 注意，宽度现在控制的是垂直方向的尺寸 */
  height: 100px; /* 高度现在控制的是水平方向的尺寸 */
}
</style>

这段代码展示了不同 writing-mode 值对文本排列的影响。 请注意，当 writing-mode 设置为 vertical-rl 或 vertical-lr 时，元素的宽度和高度的含义发生了变化。 宽度现在控制的是垂直方向的尺寸，而高度控制的是水平方向的尺寸。 这一点至关重要，也是理解书写模式的关键。

3. direction 属性详解

direction 属性主要用于控制行内元素的文本流方向。它接受两个值：

• ltr: 从左到右 (left-to-right)，这是默认值。
• rtl: 从右到左 (right-to-left)。

direction 属性通常与 writing-mode 属性一起使用，以实现更复杂的文本排版。 例如，你可以在一个 writing-mode: vertical-rl 的元素中使用 direction: ltr 来改变文本的排列顺序。

<div class="vertical-rl">
  <span class="ltr">从左到右的文本</span>
  <span class="rtl">من اليمين إلى اليسار</span>
</div>

<style>
.vertical-rl {
  writing-mode: vertical-rl;
  border: 1px solid black;
  width: 200px;
  height: 100px;
}

.ltr {
  direction: ltr;
}

.rtl {
  direction: rtl;
}
</style>

在这个例子中，即使父元素的 writing-mode 是 vertical-rl，.ltr 类的文本仍然按照从左到右的顺序排列。 .rtl 类的文本则按照从右到左的顺序排列，这对于处理阿拉伯语等从右到左书写的语言非常有用。

4. text-orientation 属性详解

text-orientation 属性用于控制文本中字符的方向，主要用于垂直书写模式。 它接受以下值：

值	描述
mixed	这是默认值。在垂直书写模式下，全角字符（例如中文、日文、韩文字符）会垂直排列，而拉丁字符（例如英文字母）会水平排列，并且顺时针旋转 90 度。
upright	在垂直书写模式下，强制所有字符都垂直排列。拉丁字符不会旋转。
sideways	在垂直书写模式下，强制所有字符都水平排列，并且顺时针旋转 90 度。 相当于 sideways-right，已被废弃。
sideways-right	在垂直书写模式下，强制所有字符都水平排列，并且顺时针旋转 90 度。
sideways-left	在垂直书写模式下，强制所有字符都水平排列，并且逆时针旋转 90 度。

让我们看一个例子：

<div class="vertical-rl">
  <span class="mixed">混合模式：Hello 你好</span>
  <span class="upright">Upright 模式：Hello 你好</span>
  <span class="sideways">Sideways 模式：Hello 你好</span>
</div>

<style>
.vertical-rl {
  writing-mode: vertical-rl;
  border: 1px solid black;
  width: 200px;
  height: 150px;
}

.mixed {
  text-orientation: mixed;
}

.upright {
  text-orientation: upright;
}

.sideways {
  text-orientation: sideways; /* 等同于 sideways-right */
}
</style>

在这个例子中，你可以看到 text-orientation 属性对文本中拉丁字符的排列方式的影响。 mixed 模式是默认的，它会将拉丁字符旋转 90 度。 upright 模式则保持拉丁字符的直立状态。 sideways 模式将所有字符都旋转 90 度。

5. 书写模式对坐标系的影响

理解书写模式的关键在于理解它如何改变元素的坐标系。 在默认的 horizontal-tb 书写模式下，元素的坐标系是标准的笛卡尔坐标系，原点位于元素的左上角，X 轴向右，Y 轴向下。

当 writing-mode 设置为 vertical-rl 或 vertical-lr 时，坐标系会发生旋转。 原点仍然位于元素的左上角，但 X 轴现在向下，Y 轴则根据 vertical-rl 或 vertical-lr 的值，分别指向左边或右边。

这种坐标系的变换会影响以下几个方面：

• 元素的尺寸： 如前所述，宽度和高度的含义会互换。 width 现在控制的是垂直方向的尺寸，而 height 控制的是水平方向的尺寸。
• 元素的定位： 使用 top、right、bottom、left 等属性进行定位时，需要考虑到坐标系的变换。 例如，top: 10px 在 vertical-rl 模式下，实际上是将元素向下移动 10px。
• transform 属性： transform 属性的旋转、缩放、平移等操作都是基于元素的坐标系进行的。 因此，在不同的书写模式下，相同的 transform 属性可能会产生不同的效果。
• 绝对定位和相对定位： 绝对定位元素的定位基准是最近的已定位祖先元素。 如果祖先元素的书写模式与当前元素的书写模式不同，那么绝对定位的计算会变得更加复杂。

为了更清晰地说明这一点，我们来看一个例子：

<div class="container">
  <div class="box"></div>
</div>

<style>
.container {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  position: relative;
  writing-mode: vertical-rl;
}

.box {
  width: 50px;
  height: 30px;
  background-color: red;
  position: absolute;
  top: 10px;
  left: 20px;
}
</style>

在这个例子中，.container 的 writing-mode 设置为 vertical-rl。 .box 是一个绝对定位的元素，它的 top 和 left 属性分别设置为 10px 和 20px。

由于 .container 的坐标系发生了旋转，.box 的实际位置会与 horizontal-tb 模式下有所不同。 top: 10px 会将 .box 向下移动 10px，而 left: 20px 会将 .box 向左移动 20px。 记住，left 在 vertical-rl 模式下代表的是水平方向的距离，并且是从右向左计算的。

理解这种坐标系的变换对于精确控制元素的位置至关重要。

6. 书写模式与 Flexbox 和 Grid 布局

书写模式与 Flexbox 和 Grid 布局可以很好地结合使用，以创建更灵活和强大的布局。

• Flexbox： Flexbox 的主轴和交叉轴的方向会受到 writing-mode 的影响。 在 horizontal-tb 模式下，主轴是水平方向，交叉轴是垂直方向。 而在 vertical-rl 或 vertical-lr 模式下，主轴是垂直方向，交叉轴是水平方向。 这意味着 justify-content 和 align-items 等属性的行为也会发生变化。

• Grid： Grid 布局的行和列的方向也会受到 writing-mode 的影响。 在 horizontal-tb 模式下，行是水平方向，列是垂直方向。 而在 vertical-rl 或 vertical-lr 模式下，行是垂直方向，列是水平方向。 这会影响 grid-template-rows、grid-template-columns、grid-row 和 grid-column 等属性的使用。

让我们看一个 Flexbox 的例子：

<div class="container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<style>
.container {
  display: flex;
  writing-mode: vertical-rl;
  height: 200px;
  border: 1px solid black;
  justify-content: center; /* 在垂直方向上居中 */
  align-items: center; /* 在水平方向上居中 */
}

.container > div {
  width: 50px;
  height: 30px;
  background-color: lightblue;
  margin: 5px;
}
</style>

在这个例子中，.container 的 writing-mode 设置为 vertical-rl。 justify-content: center 会在垂直方向上居中对齐 Flex 项目，而 align-items: center 会在水平方向上居中对齐 Flex 项目。 这是因为在 vertical-rl 模式下，主轴是垂直方向，交叉轴是水平方向。

7. 实际应用场景

书写模式在以下场景中非常有用：

• 垂直排版： 实现传统的中文、日文排版。
• 国际化： 处理从右到左书写的语言（例如阿拉伯语、希伯来语）。
• 创意布局： 创建独特的、非传统的网页布局。
• 文本旋转： 将文本旋转 90 度或 270 度，用于侧边栏、标题等。
• 表格布局： 控制表格单元格中内容的排列方向。

8. 注意事项

• 浏览器兼容性： writing-mode 的兼容性在不同的浏览器和版本之间可能存在差异。 建议在使用时进行充分的测试。
• 逻辑属性： CSS 逻辑属性（例如 inline-start、inline-end、block-start、block-end）可以更好地适应不同的书写模式，并提高代码的可维护性。 建议尽可能使用逻辑属性来代替传统的物理属性（例如 top、right、bottom、left）。
• 可访问性： 在使用书写模式时，需要注意可访问性问题。 确保文本的阅读顺序是正确的，并且使用户能够轻松地理解内容。

9. 代码示例：一个垂直导航栏

下面是一个使用 writing-mode 创建垂直导航栏的示例：

<nav class="vertical-nav">
  <a href="#">首页</a>
  <a href="#">关于我们</a>
  <a href="#">产品</a>
  <a href="#">联系我们</a>
</nav>

<style>
.vertical-nav {
  writing-mode: vertical-rl;
  display: flex;
  flex-direction: column;
  width: 30px;
  background-color: #f0f0f0;
  padding: 10px;
}

.vertical-nav a {
  text-decoration: none;
  color: #333;
  margin-bottom: 10px;
  text-align: center;
  writing-mode: horizontal-tb; /* 恢复水平书写模式 */
}

.vertical-nav a:last-child {
  margin-bottom: 0;
}
</style>

在这个例子中，我们将导航栏的 writing-mode 设置为 vertical-rl，使其垂直排列。 然后，我们将链接的 writing-mode 恢复为 horizontal-tb，以使文本水平显示。 使用 Flexbox 的 flex-direction: column 属性可以更好地控制链接的排列方式。

10. 逻辑属性：更好的选择

CSS 逻辑属性是为了解决不同书写模式和阅读方向带来的布局问题而设计的。它们使用相对于块和行方向的术语，而不是使用固定的上下左右方向。 这使得我们的样式在不同的书写模式下更加灵活和可维护。

一些常用的逻辑属性包括：

• inset-inline-start: 相当于 left (在 ltr 模式下) 或 right (在 rtl 模式下)。
• inset-inline-end: 相当于 right (在 ltr 模式下) 或 left (在 rtl 模式下)。
• inset-block-start: 相当于 top (在 horizontal-tb 模式下)。
• inset-block-end: 相当于 bottom (在 horizontal-tb 模式下)。
• margin-inline-start, margin-inline-end, margin-block-start, margin-block-end: 分别对应 margin-left, margin-right, margin-top, margin-bottom。
• padding-inline-start, padding-inline-end, padding-block-start, padding-block-end: 分别对应 padding-left, padding-right, padding-top, padding-bottom。
• border-inline-start, border-inline-end, border-block-start, border-block-end: 分别对应 border-left, border-right, border-top, border-bottom。

例如，我们可以使用逻辑属性来重写上面的垂直导航栏示例：

<nav class="vertical-nav">
  <a href="#">首页</a>
  <a href="#">关于我们</a>
  <a href="#">产品</a>
  <a href="#">联系我们</a>
</nav>

<style>
.vertical-nav {
  writing-mode: vertical-rl;
  display: flex;
  flex-direction: column;
  width: 30px;
  background-color: #f0f0f0;
  padding-inline-start: 10px;
  padding-inline-end: 10px;
}

.vertical-nav a {
  text-decoration: none;
  color: #333;
  margin-block-end: 10px;
  text-align: center;
  writing-mode: horizontal-tb; /* 恢复水平书写模式 */
}

.vertical-nav a:last-child {
  margin-block-end: 0;
}
</style>

在这个例子中，我们使用了 padding-inline-start 和 padding-inline-end 来代替 padding-left 和 padding-right，以及 margin-block-end 来代替 margin-bottom。 这样，无论书写模式如何变化，导航栏的内边距和外边距都会保持一致。

11. 总结

我们深入探讨了 CSS 书写模式，包括 writing-mode、direction 和 text-orientation 属性，以及它们如何影响元素的坐标系。 我们还讨论了书写模式与 Flexbox 和 Grid 布局的结合使用，以及逻辑属性的优势。理解并掌握书写模式对于创建更灵活、更强大的网页布局至关重要，尤其是在处理国际化文本和创意布局时。

书写模式定义文本方向，影响坐标系，逻辑属性让布局更灵活。掌握这些，布局更强大，国际化更轻松。

更多IT精英技术系列讲座，到智猿学院