CSS中writing-mode设置文本方向详解

CSS中的`writing-mode`属性是控制文本排版方向和块级元素排列的关键。它定义了文字是横向还是纵向排列，以及新行或块的排列方向，极大地影响页面布局。通过设置`horizontal-tb`（默认水平方向）、`vertical-rl`（垂直从右向左）和`vertical-lr`（垂直从左向右）等值，可以实现不同的排版效果，尤其适用于多语言支持，如中文、日文的竖排显示。需要注意的是，`writing-mode`会改变盒模型中`width`、`height`等属性的含义，并且要结合`text-orientation`属性来控制字符方向，同时需关注浏览器兼容性。与`direction`属性不同，`writing-mode`控制整体书写维度，而`direction`仅调整行内文字流向。掌握`writing-mode`，能为网页设计带来更丰富的表现力，提升用户体验。

writing-mode是CSS中用于控制文本排版方向及块级排列方向的属性。其主要值包括horizontal-tb（默认，横排从左到右）、vertical-rl（竖排从右到左）和vertical-lr（竖排从左到右），分别适用于不同语言及设计需求；它不仅影响文字走向，还改变盒模型中width、height及padding等属性的方向逻辑；与direction属性不同，writing-mode控制整体书写维度，而direction仅调整行内文字流向；常见应用场景包括多语言支持（如日文、中文竖排）、创意视觉排版及图表标签布局；使用时需注意text-orientation设置以控制字符朝向，理解盒模型变化，处理文本换行与对齐问题，并关注浏览器兼容性。

CSS中的writing-mode属性，简单来说，就是用来控制文本的排版方向和行块的排列方向。它决定了文字是横着写还是竖着写，以及新的一行或一个块从哪个方向开始排列。

writing-mode 属性是CSS中一个非常强大的排版工具，它定义了文本的行内方向（inline progression）以及块级容器的块方向（block progression）。这不仅仅是文字旋转那么简单，它改变了整个布局的“重力”方向。

它的主要值包括：

• horizontal-tb (默认值): 文本从左到右水平排列，新行从上到下。这是我们最熟悉的西方语言排版模式。
• vertical-rl: 文本从上到下垂直排列，新行从右到左。常用于传统的日文、中文竖排。
• vertical-lr: 文本从上到下垂直排列，新行从左到右。偶尔用于一些特殊的垂直排版需求。

举个例子：

/* 默认的横向排版 */
.horizontal-text {
  writing-mode: horizontal-tb;
}

/* 垂直排版，新列从右向左 */
.vertical-text-rl {
  writing-mode: vertical-rl;
  /* 垂直排版时，文字方向可能需要调整 */
  text-orientation: upright; /* 让每个字符都正立 */
}

/* 垂直排版，新列从左向右 */
.vertical-text-lr {
  writing-mode: vertical-lr;
  text-orientation: mixed; /* 默认值，字母和数字横向，汉字竖向 */
}

当你设置了 writing-mode，整个盒模型的概念其实也跟着变了。比如，width 和 height 的含义，在垂直书写模式下，可能会感觉像是互换了。padding 和 margin 的“top”、“bottom”、“left”、“right”也需要重新理解，它们会根据新的书写模式来决定其物理方向。这背后其实是逻辑属性（logical properties）的概念在起作用，但我们暂时不深入那个。

writing-mode 和 direction 有什么区别？

这是一个特别容易混淆的地方，但它们处理的层级和目的完全不同。 writing-mode，如前面所说，它定义的是整个文本流的方向，包括行内文字的走向（比如是从左到右还是从上到下），以及块级元素（比如段落）的排列方向（是从上到下还是从右到左）。它改变的是整个文档的“轴向”。想象一下，你把一本书从横着翻变成了竖着翻，这就是 writing-mode 在做的事。它对整个布局的维度都有影响，比如一个块元素的“宽度”在垂直书写模式下，实际上控制的是其在水平方向上的尺寸。

而 direction 属性，它控制的仅仅是行内内容的流向，也就是文字的阅读方向，以及表格列的布局方向。它通常用于支持从右到左书写的语言，比如阿拉伯语（direction: rtl）。它不会改变块级元素的堆叠方向，块级元素依然是从上到下堆叠。direction 只是改变了行内文字的“起点”和“终点”。比如，你把一本书的文字从左到右读变成了从右到左读，但书页还是从上到下排列的。

简单来说：

• writing-mode：管的是“书写方向”和“行/块的堆叠方向”，影响的是整个布局的“维度”。
• direction：管的是“文字的阅读方向”和“行内元素的排列顺序”，不改变块的堆叠方向。

举个例子，即使你设置了 writing-mode: vertical-rl，如果再给一个元素设置 direction: rtl，那在垂直模式下，行内文字的逻辑方向会从右到左（视觉上可能是从下到上），但这种组合通常比较少见，也容易造成理解上的混乱。通常在垂直书写模式下，direction 的作用会被 writing-mode 内部的逻辑方向所覆盖或改变其解释。

在实际项目中，writing-mode 有哪些常见的应用场景？

说实话，在大多数以拉丁语系为主的网页设计里，writing-mode 确实不常用。但一旦你遇到需要它的场景，它就是唯一的解决方案。

1. 多语言支持（特别是亚洲语言）：这是最核心的应用。日文、中文等传统上就有竖排书写的习惯。如果你的网站需要支持这些语言的传统排版，vertical-rl 或 vertical-lr 就是必需的。这不仅仅是为了美观，更是为了符合当地用户的阅读习惯。

   <div lang="ja" class="japanese-vertical">
     <p>これは縦書きの日本語です。</p>
   </div>

   .japanese-vertical {
     writing-mode: vertical-rl;
     text-orientation: upright; /* 确保所有字符（包括数字、英文）都正立 */
   }

2. 创意排版和视觉设计：有时候，设计师会为了达到独特的视觉效果，将标题、侧边栏文字或者导航项做成垂直排版。比如，一个艺术画廊网站的侧边导航，或者一个海报风格的页面标题。

   <h1 class="vertical-title">
     <span>艺</span>
     <span>术</span>
     <span>画</span>
     <span>廊</span>
   </h1>

   .vertical-title {
     writing-mode: vertical-lr; /* 文字从上到下，新列从左到右 */
     text-orientation: upright;
     font-size: 3em;
     letter-spacing: 0.5em; /* 调整字间距 */
     margin: 20px;
   }

   这种方式比用 transform: rotate() 更语义化，也对文本选择、复制和SEO更友好，因为它没有真的“旋转”文字，只是改变了它的书写方向。

3. 图表标签或复杂布局的辅助：在一些数据可视化或图表设计中，轴标签如果太长，横向显示会占用太多空间，这时就可以考虑将其垂直显示。或者在一些需要紧凑布局的区域，比如一个侧边信息卡片的标题。

   <div class="chart-label">
     <span>年度销售额趋势</span>
   </div>

   .chart-label {
     writing-mode: vertical-rl;
     text-orientation: mixed; /* 默认，英文数字横着，汉字竖着 */
     width: 2em; /* 限制宽度，让文字自然换行（垂直方向的“行”） */
     height: 100px; /* 限制高度 */
     border-right: 1px solid #ccc;
     padding-right: 5px;
   }

   它提供了一种优雅的解决方案，避免了使用复杂的定位和旋转技巧。

使用 writing-mode 时需要注意哪些兼容性或布局问题？

尽管 writing-mode 已经是一个成熟的CSS属性了，但在实际应用中还是有些“坑”需要注意。

1. 与 text-orientation 的配合：这是个大头。当你把文本设置为垂直排版时（vertical-rl 或 vertical-lr），英文字母、数字和标点符号是会跟着一起旋转90度呢，还是保持正立？这就需要 text-orientation 来决定了。

   • text-orientation: mixed (默认值): 汉字、日文假名等全角字符会保持正立，而拉丁字母、数字、半角标点等会旋转90度。这在日文竖排中很常见。
   • text-orientation: upright: 所有字符都会保持正立。这在中文竖排或创意设计中更常用，看起来更整齐。
   • text-orientation: sideways-right / sideways-left: 不常用，了解即可。 如果忘记设置 text-orientation，你的英文数字可能会“歪着脖子”看，体验会很糟糕。

2. 盒模型理解的转变：前面提到了，writing-mode 会改变“内联轴”和“块轴”的方向。这意味着你习惯的 width 和 height、padding 和 margin 的 top/bottom/left/right，在视觉上可能会感觉“互换”了。比如，在 vertical-rl 模式下，元素的“宽度”实际上是其垂直方向的尺寸，而“高度”则是水平方向的尺寸。这要求开发者在布局时，脑子里要跟着切换一下“坐标系”。 解决这个问题的一种思路是，尽量使用逻辑属性，比如 inline-size (对应 width 或 height，取决于 writing-mode)，block-size，以及 padding-block-start 等。但目前逻辑属性的普及度还不如物理属性。

3. 文本溢出和换行：在垂直书写模式下，文本的“行”是垂直的，而“列”是水平的。如果文本过长，它会在垂直方向上换行。如果容器的“高度”（在垂直模式下是水平方向的限制）不足，就可能出现水平方向的溢出。你需要像处理水平排版时的宽度一样，去考虑垂直排版时的“高度”限制。

4. 对齐和定位：当 writing-mode 改变时，text-align、vertical-align、float、flexbox、grid 的行为都会根据新的书写模式进行调整。例如，text-align: center 在 vertical-rl 模式下，会将文本在垂直方向上居中。这通常是符合预期的，但也意味着你需要重新思考这些属性在不同书写模式下的具体表现。position: absolute 这样的物理定位，其 top/left 等值依然是相对于物理坐标系，不会因为 writing-mode 改变而改变，这可能需要更精细的计算。

5. 浏览器兼容性：虽然主流浏览器对 writing-mode 的支持已经很好了，但在一些老旧浏览器或者特定版本中，可能存在一些细微的差异或bug。在使用前，最好查阅 caniuse.com 确认目标用户群的兼容性情况。

总的来说，writing-mode 是一个强大但需要细致理解的属性。它不仅仅是视觉上的旋转，更是对整个文本流和布局模型的深层改变。用好了，能为你的网页带来更丰富的表现力。

本篇关于《CSS中writing-mode设置文本方向详解》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！