**CSS** `writing-mode` 与排版：打造垂直排版与混合流文本

CSS `writing-mode` 与排版：让你的文字站起来，甚至跳舞！

各位看官，咱今天聊聊 CSS 里一个挺有意思的属性：writing-mode。别看名字挺学术，其实它能干的事情可有趣了，能让你的文字不再老老实实地横着排，想站着就站着，想斜着就斜着，简直就是文字界的“变形金刚”。

想象一下，你辛辛苦苦写了一段文案，放在网页上规规矩矩地横向排列，是不是觉得有点平淡无奇？这时候，writing-mode 就能派上大用场了！它能改变文本的走向，玩转垂直排版，甚至能创造出一些意想不到的混合流文本效果，让你的网页瞬间变得与众不同。

一、啥是 writing-mode？

简单来说，writing-mode 属性定义了文本在块级元素中是水平还是垂直排列，以及文本块中行进的方向。听起来有点绕？没关系，咱们把它拆开揉碎了好好理解。

你可以把网页想象成一张画布，而 writing-mode 就是控制你在画布上如何“写字”的工具。默认情况下，咱们都是横着写，从左到右，一行写满了就换下一行。但有了 writing-mode，你就可以尝试竖着写，从上到下，或者从下到上，甚至可以玩一些更花哨的组合。

二、 writing-mode 的常用取值：

writing-mode 属性有很多可选值，但最常用的莫过于以下几个：

horizontal-tb (默认值): 这就是我们最熟悉的水平排版模式，文本从左到右，从上到下排列。就像我们平时写字一样，一行接一行。
vertical-rl: 垂直排版模式，文本从上到下，从右到左排列。这种模式在传统的中文排版中比较常见，想象一下古书的排版方式，是不是就是这样？
vertical-lr: 也是垂直排版模式，但文本从上到下，从左到右排列。这种模式在某些亚洲语言中也会用到。

除了这三个最常用的值之外，还有一些其他的取值，例如 sideways-rl 和 sideways-lr，它们可以将文本旋转90度，创造出一些特殊的排版效果。

三、 writing-mode 的应用场景：

说了这么多理论，咱们还是得结合实际，看看 writing-mode 在实际开发中能派上什么用场。

垂直导航菜单：

传统的导航菜单都是横向排列的，如果想要做出一些与众不同的效果，可以尝试使用 writing-mode 将导航菜单垂直排列。想象一下，一列垂直的文字导航，是不是瞬间就显得更有个性了？
```
.vertical-nav {
  writing-mode: vertical-rl; /* 或者 vertical-lr */
}
```
古风排版：

如果你要做一个古风主题的网站，或者想要展示一些古诗词，writing-mode 绝对是你的好帮手。它可以让你轻松实现传统的垂直排版效果，让你的网站瞬间充满古韵。
```
.ancient-poem {
  writing-mode: vertical-rl;
  text-align: justify; /* 对齐方式 */
}
```
特殊排版效果：

writing-mode 还可以用来创造一些特殊的排版效果，例如将标题垂直排列，或者将某些关键信息以垂直的方式突出显示。只要你有足够的想象力，就可以用 writing-mode 玩出各种花样。
```
.vertical-title {
  writing-mode: vertical-lr;
  font-size: 2em;
}
```
表格表头：

在某些情况下，表格的表头可能需要垂直显示，例如当表头文字过长，横向显示会影响表格的整体布局时。使用 writing-mode 可以轻松解决这个问题。
```
th {
  writing-mode: vertical-rl;
}
```

四、使用 writing-mode 的注意事项：

虽然 writing-mode 非常强大，但在使用时也需要注意一些细节，否则可能会出现一些意想不到的问题。

兼容性问题：

虽然现在主流浏览器都支持 writing-mode 属性，但仍然存在一些兼容性问题，特别是在一些老版本的浏览器上。因此，在使用 writing-mode 时，最好进行一些兼容性处理，例如使用一些 CSS hack 或者使用 JavaScript 来实现类似的效果。
文本对齐问题：

当使用 writing-mode 将文本垂直排列时，文本的对齐方式可能会发生一些变化。例如，原本使用 text-align: center 居中对齐的文本，在垂直排列后可能会偏离中心位置。因此，在使用 writing-mode 时，需要根据实际情况调整文本的对齐方式。可以使用 text-align (水平方向) 和 vertical-align (垂直方向) 来控制文本的对齐。
阅读习惯：

虽然垂直排版可以创造出一些独特的视觉效果，但同时也可能会影响用户的阅读体验。毕竟，我们已经习惯了横向阅读，突然改成垂直阅读可能会让人感到不适应。因此，在使用 writing-mode 时，需要权衡视觉效果和阅读体验，尽量选择一种既美观又易于阅读的排版方式。
与其他CSS属性的配合：

writing-mode 并不是一个孤立的属性，它需要与其他 CSS 属性配合使用才能发挥最大的效果。例如，可以使用 width 和 height 属性来控制文本块的尺寸，使用 margin 和 padding 属性来调整文本块的位置和间距，使用 font-size 和 line-height 属性来控制文本的字体大小和行高。

五、举个栗子，让文字跳支舞：

光说不练假把式，咱们来个实际的例子，让文字跳支舞！假设我们要创建一个垂直的标题，并且让标题中的每个字都旋转一定的角度，形成一种错落有致的视觉效果。

首先，我们需要一个 HTML 结构：

<div class="dancing-title">
  <span>春</span>
  <span>江</span>
  <span>潮</span>
  <span>水</span>
  <span>连</span>
  <span>海</span>
  <span>平</span>
</div>

然后，我们需要一些 CSS 来控制文字的样式：

.dancing-title {
  writing-mode: vertical-rl;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 300px; /* 设置一个高度，方便观察 */
}

.dancing-title span {
  display: inline-block;
  font-size: 2em;
  margin: 0.2em;
  animation: rotateText 3s linear infinite; /* 添加动画 */
}

/* 关键帧动画 */
@keyframes rotateText {
  0% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(-10deg);
  }
}

在这个例子中，我们首先使用 writing-mode: vertical-rl 将标题垂直排列。然后，我们使用 display: flex 和相关的属性来控制标题中每个字的位置和对齐方式。最后，我们使用关键帧动画 rotateText 让每个字都旋转一定的角度，创造出一种跳舞的效果。

怎么样，是不是觉得 writing-mode 挺有趣的？它可以让你在网页排版方面有更多的可能性，让你的网站更加个性化和吸引人。

六、总结：

writing-mode 是一个强大的 CSS 属性，它可以改变文本的走向，玩转垂直排版，甚至能创造出一些意想不到的混合流文本效果。掌握 writing-mode 的用法，可以让你在网页排版方面有更多的选择，让你的网站更加个性化和吸引人。

当然，在使用 writing-mode 时，也需要注意一些细节，例如兼容性问题、文本对齐问题和阅读习惯问题。只有综合考虑各种因素，才能真正发挥 writing-mode 的威力，创造出令人惊艳的排版效果。

希望这篇文章能帮助你更好地理解 writing-mode 属性，并且在实际开发中灵活运用它，让你的文字在网页上也能“翩翩起舞”！赶紧去尝试一下吧，相信你会发现更多有趣的用法！

CSS `writing-mode` 与排版：打造垂直排版与混合流文本

CSS `writing-mode` 与排版：让你的文字站起来，甚至跳舞！

发表回复取消回复

CSS writing-mode 与排版：让你的文字站起来，甚至跳舞！

发表回复 取消回复

CSS `writing-mode` 与排版：让你的文字站起来，甚至跳舞！

发表回复取消回复