CSS writing-mode 属性（实战指南）

什么是 CSS writing-mode 属性

在网页设计中，我们通常默认文字是从左到右、从上到下排列的。这种书写模式被称为“横向书写”。然而，在一些特殊场景下，比如日文、韩文、竖排排版的古籍、艺术类网页设计，我们需要让文字从上往下排列，也就是“竖向书写”。这时，CSS 的 writing-mode 属性就派上用场了。

writing-mode 属性是 CSS 中用于控制文本书写方向的关键工具。它决定了文本的排布方式，包括文字的走向、行的排列顺序、块级元素的布局方向等。简单来说，它就像一个“文字方向开关”，让你可以自由切换文字的排列方式。

想象一下你正在看一本古籍，文字是竖着排的，从上往下读，每一行从右往左走。这种排版在中文古文、日文和一些艺术设计中非常常见。而 writing-mode 就是实现这种效果的 CSS 核心属性。

常见的 writing-mode 取值详解

writing-mode 属性支持多个值，每个值代表一种不同的书写模式。下面详细介绍最常用的几个取值：

horizontal-tb

这是默认值，表示“横向书写，从上到下”。也就是我们平时最熟悉的排版方式。文字从左到右，每行从上往下排列。

.text {
  writing-mode: horizontal-tb;
}

注释：此为默认值，无需设置。适用于大多数中文、英文网页内容。

vertical-rl

表示“竖向书写，从右到左”。文字从上往下排列，每一行从右向左书写。这是日文、韩文竖排排版的常见模式。

.text {
  writing-mode: vertical-rl;
}

注释：适合用于日文、韩文竖排文本，或艺术类设计中的竖向排版。

vertical-lr

表示“竖向书写，从左到右”。文字依然从上往下排列，但每行从左向右书写。这种模式在一些中文竖排设计中也常见。

.text {
  writing-mode: vertical-lr;
}

注释：适合中文竖排文字，如传统书法、标题设计等场景。

sideways-rl 与 sideways-lr

这两个值用于将文本旋转 90 度，实现“横着写但倒着排”的效果。常用于标题栏、标签、表格标题等。

.text {
  writing-mode: sideways-rl;
}

注释：文字旋转 90 度，从右向左排列，适合用于垂直方向的标题或标签。

实际案例：让标题竖着排

我们来做一个实际例子：创建一个竖排的标题栏，用于网页的侧边栏或艺术类页面。

<div class="vertical-title">
  <h2>欢迎来到我的博客</h2>
</div>

.vertical-title {
  width: 100px;
  height: 200px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  /* 设置文字为竖向从右到左排列 */
  writing-mode: vertical-rl;
  /* 保证文字垂直居中 */
  text-align: center;
  line-height: 200px;
  /* 可选：添加 padding 以优化视觉效果 */
  padding: 20px 10px;
}

注释：通过 writing-mode: vertical-rl 实现竖向排版，line-height 控制垂直居中，text-align: center 保证文字水平居中。整个块的高度与内容匹配，避免文字错位。

这个例子中，文字从上往下排列，每行从右向左书写，非常适合用于侧边栏标题、艺术网页设计等场景。

writing-mode 与其他属性的配合使用

writing-mode 并不是孤立存在的，它常常需要与其他 CSS 属性配合使用，才能达到理想效果。

与 text-align 配合

当使用竖向排版时，text-align 的作用方向会改变。例如，在 vertical-rl 模式下，text-align: center 会让文字在垂直方向上居中。

.vertical-text {
  writing-mode: vertical-lr;
  text-align: center; /* 水平居中 */
  line-height: 1.5;
}

注释：在竖向排版中，text-align 控制的是水平方向的对齐方式。center 会让文字在容器内水平居中。

与 direction 属性配合

direction 属性控制文本的书写方向，与 writing-mode 一起使用，可以更精确地控制文本流向。

.rtl-text {
  writing-mode: vertical-rl;
  direction: rtl; /* 从右到左书写 */
}

注释：direction: rtl 与 writing-mode: vertical-rl 搭配，确保文本在竖向排版中从右向左流动。

与 transform 属性结合

有时你不需要改变布局结构，只是想让文字旋转。此时可以使用 transform，但 writing-mode 更适合语义化控制排版。

.rotated-text {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  /* 注意：这会导致文字倒置，通常不推荐 */
}

注释：虽然 transform 可以实现旋转，但会破坏文本语义，建议优先使用 writing-mode。

常见问题与注意事项

浏览器兼容性

writing-mode 在现代浏览器中支持良好，包括 Chrome、Firefox、Safari 和 Edge。但老版本 IE 不支持，需注意兼容性。

/* 建议添加前缀兼容老版本浏览器 */
.text {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl; /* Safari/Chrome */
  -ms-writing-mode: vertical-rl;    /* IE */
}

注释：虽然现代浏览器已普遍支持，但为确保兼容性，可添加 -webkit- 和 -ms- 前缀。

文本方向与布局结构

使用 writing-mode 后，元素的宽高方向会反转。例如，一个 width: 200px 的元素在 vertical-rl 模式下，实际高度为 200px。

.box {
  width: 100px;
  height: 100px;
  writing-mode: vertical-rl;
}

注释：此时 width 控制的是垂直方向的尺寸，height 控制的是水平方向。布局逻辑需重新理解。

为什么你应该掌握 CSS writing-mode 属性

在国际化项目中，writing-mode 属性是必不可少的。比如你正在开发一个支持中文、日文、韩文的多语言网站，就很可能需要处理竖向排版。

此外，在现代网页设计中，越来越多的设计师尝试使用非传统的排版方式来吸引眼球。比如竖排标题、旋转文字、艺术化布局等，这些都依赖于 writing-mode。

掌握这个属性，不仅能让你的网页更具设计感，还能提升代码的语义性和可维护性。比起用 transform 旋转文字，writing-mode 更符合语义，也更容易被屏幕阅读器识别。

总结与实践建议

writing-mode 属性是一个强大而实用的 CSS 工具，尤其适合处理多语言、竖向排版、艺术设计等场景。它改变了我们对“文字排列”的传统认知，让你可以自由控制文本的走向。

建议初学者从 vertical-rl 和 vertical-lr 入手，先理解竖向排版的视觉效果。中级开发者可以尝试结合 text-align、direction、line-height 等属性，打造复杂的排版结构。

最后，记得在实际项目中测试不同浏览器的渲染效果，确保兼容性。同时，避免滥用旋转效果，优先使用语义化的 writing-mode。

如果你正在设计一个支持多语言的网站，或者想在网页中加入一些艺术化排版，那么 CSS writing-mode 属性 绝对值得你深入学习和掌握。