使用“writing-mode” CSS 属性轻松创建横向文本

如何在从上到下而不是从左到右（或从右到左）运行的网页上显示文本。有两种方法，一种比另一种更好，让咱们一起来看看吧！

如果您熟悉 CSS，您可能会本能地认为这transform是解决此问题的最佳方法，但让我告诉您为什么它不理想。咱们将从一些内容（一些标题和一个段落）开始，然后咱们将应用 atransform和 atransform-origin以便它从正确的点旋转，然后是一个偏移量以使其保持在屏幕上：

这种方法在旋转文本方面起作用，但文档流不受影响，所以h2在咱们的例子中，现在位于它下面的内容之上。尽管如此，它还是给了咱们一个很酷的抽象结果。

咱们的第二种方法将保持文档流动，使其保持真实的尺寸h2，无论文本方向如何。咱们将使用 writing-mode 属性，如下所示：

h2 {
  writing-mode: vertical-rl;
}

在这种情况下，咱们给它一个值 vertical-rl，它应用垂直的显示方向和从右到左的文本方向。看一看：

好多了。您还会注意到光标也发生了变化，而 CSS 转换不会发生这种情况。

您可能已经注意到咱们使用了rl(right to left) 的值，而咱们习惯于从左到右阅读拉丁脚本。但那是因为咱们改变了Block Flow Direction。如果咱们给咱们h2一个设置的高度值，你会看到文本换行，你会意识到在这种情况下，咱们实际上需要从页面右侧到左侧读取行：

这导致咱们需要定义所有这些对齐的哪些位需要流动以及沿哪些方向流动。基于拉丁语的脚本从上到下流动（这是块流向）。他们的文本从左到右阅读（这是内联流向）。并且他们的角色在底部有一条基线，同时指向上方（这是Character Direction）。像这样：

其他脚本，例如基于阿拉伯文、基于汉文（如中文和日文）和基于蒙古文的文字，可以使用这三种流向任意方向组合显示文本。

书写模式规范旨在支持世界上所有不同的脚本和书写系统。咱们提到了基于蒙古语的系统，例如，它们是垂直显示的，但从左到右流动。

您今天可以使用的其他写入模式值包括：

这里还有一件事要看：一首***诗歌，使用vertical-rl 写作模式。它的内容是向右浮动的，因此您从页面的右侧开始向左阅读。但是您可能会注意到，角色仍然是直立的。使用这些完全相同的规则，拉丁字符的方向会有所不同。这是故意的：

“Unicode 标准为每个字符分配一个属性，浏览器可以使用它来确定给定字符的默认方向。” – W3C

您可以使用该 text-orientation属性进一步定制字符的方向。

结论

CSS 编写模式在撰写本文时具有出色的浏览器支持，尽管它的某些方面仍在开发中。您在本教程中看到我所做的一切现在都可以在生产中使用。

文章目录

结论