书写模式，英文排版也能横转竖写

大约一年前，我写了在一次 Web 中文垂直排版的尝试中的一些发现。这是一个简单的 demo，它允许你通过复选框来切换书写模式。我在不久后遇到了 Yoav Weiss，并聊了一下响应式图片社区小组，因为我提到如果可以通过媒体查询得到 picture 元素的 writing-mode属性，那它将成为一个真正的改变游戏规则的事情。

大约一年前，我写了在一次 Web 中文垂直排版的尝试中的一些发现。这是一个简单的 demo，它允许你通过复选框来切换书写模式。我在不久后遇到了 Yoav Weiss，并聊了一下响应式图片社区小组，因为我提到如果可以通过媒体查询得到 picture 元素的 writing-mode属性，那它将成为一个真正的改变游戏规则的事情。

Yoav 发现我展示的并不是一个标准的功能。当他追究原因时，我从编写过垂直排版的 Igalia 文档中找到了我的答案。这个功能被认为与响应式 web 设计的目标不符。我不太同意这个结论，因为这已经超过 15 年了，如果这真的那么糟糕，那这个功能根本就不应该出现在 CSS3 中。但这就是它目前的状态。

到目前为止，我们需要遵循编写垂直排版 web 内容的传统方法。直到目前为止，这意味着使用浮动或 transform 旋转整个文本，或者使用绝对定位使字符堆叠。这都是非常丑陋的 hack。

如果我们的目标是轻松地做到这种风格，那么最好的方法就是使用一些可以有效完成任务的工具。这就是 writing-mode 属性发挥作用的地方。这是一个 CSS3 功能，它可以很容易地将文本从一个方向转换成另一个方向。这让整个过程变得简单多了，因为你只需要一行 CSS 就可以完成所有的事情。

尽管有 writing-mode，我仍然认为实现垂直排版是一个令人头疼的事情。首先，writing-mode 并不是一个很兼容的属性。这并不是一个很好的方法，但是 Chrome 和 Firefox 支持它，而 IE、Edge 和 Safari 则不支持。

我还没有完成对 Safari 的测试，所以也许我遗漏了什么。

值得注意的是，如果你只是为了改变标题方向，你可以通过将其包装在一个具有 writing-mode 属性的块级元素中来实现。一个 li 元素也可以。这允许你只改变你想要的特定块。

writing-mode 属性除了 horizontal-tb 这个默认值之外还有两个值： vertical-lr (这是一个像日文书写那样的从右到左的纵向书写模式)和 vertical-rl (这是一个像日文书写那样的从左到右的纵向书写模式)。

在考虑使用 vertical-lr 时，有几件事需要注意。首先，它并不是一个很兼容的属性。这并不是一个很好的方法，但是 Chrome 和 Firefox 支持它，而 IE、Edge 和 Safari 则不支持。其次，当你开始使用它时，它可能会与其他东西发生冲突。例如，如果你有子元素，或者你有浮动的元素，它们可能会与主元素重叠。当出现冲突时，最好的方法是尝试调整 z-index 属性。

总之，writing-mode 并不是一个完美的解决方案。但是，它是目前我们能得到的最接近的东西。它可以让你轻松地转换文本方向，而且它兼容大部分的现代浏览器。