使用writing-mode实现垂直排版 主标签

大约一年前，我写了一篇关于在Web中实现垂直排版的文章。这是一个简单的Demo，它允许你通过复选框来切换书写模式。

在不久之后我遇到了@Yoav Weiss，并一起聊了一些关于响应式图片社区小组，因为我提到了如果可以通过媒体查询得到picture元素的writing-mode,就不必在切换排版的时候通过一些黑魔法的方式对图片进行转换。他建议我写一个响应式图片的用例。

当我重新打开这个Demo的时候，看到的结果让我感到无语。为了宣泄一下，我将一步一步写下各种浏览器的渲染结果，以及目前可能的解决方案。

这篇文章的篇幅很长，可能会花费你一定的时间。

初步的调查结果

我只看我能立即访问的浏览器。因为我还有别的事情需要做。

Chrome(64.0.3278.0 dev)

效果看起来很不错。要是我说所有的一切都被破坏了，那其实有点夸张。所有的文字和图片都占满，在垂直书写模式下没有重大的渲染问题。Chrome，这就是我喜欢你的原因之一。

切换排版模式，将东西都放到浏览器的右侧去。我记得在垂直排版下将东西水平居中是一件让人特别痛苦的事情，所以在第一次不太顺利的尝试中，我肯定是用了某些我自己都忘了的黑魔法。

这个在2017年年初是绝对可行的，我有绝对的信心这么的认为。因为我为在Webconf.Asia做分享的PPT中有这个效果的录屏。我很确定当时用的是Chrome。几个月的时间，Demo的效果就变得令人难以置信。我的老大曾经提到过一个词叫作代码腐烂，也许就是这样的吧。

Firefox (59.0a1 Nightly)

效果令我再次感到无语了。Firefox Nightly还是我的默认浏览器，所以我的最初反应是这一切都被破坏了，整个人都崩溃了。事实上，垂直排版是被破坏了，还出现了无限的水平滚动条。到底发生了什么？我自己也是一脸的蒙逼。

我们来切换一下状态，可我找了半天的复选框，都不知道在哪里了。不管怎么说，至少我将复选框绑在了label标签上，这样我仍然可以点击label标签来切换。所以，这绝对不是居中，但也没崩溃。两个浏览器的渲染效果可以说是天差地别。

Safari Technology Preview 44

哈哈哈...。看起来令人惊讶，效果出奇的好。甚至连高度都是正确的。可能我太轻看了Safari。Safari浏览器的渲染引擎到底是什么呢？好吧，是Webkit。

这是页面的中间部分。如果不查看代码，我也确定我尝试过一些很奇怪的转译来改变整个内容块，因此在每个浏览器中行为不一致。但这是个令人欣慰的惊喜。

Edge 16.17046

这是Windows 10内置快速通道版本，所以我认为我的Edge浏览器应该比大多数人的版本更高。没关系，我也可以用我的手机（(^_^)不要有任何的奇怪，我用的就是Windows Phone）。

不管怎么说，效果看上去还不算太坏。只是那个复选框有点偏了。更重要的是滚轮能正常的工作！其他所有的浏览器都不允许我用滚轮水平滚动。虽然我不知道这是Windows的功劳还是Edge的功劳。

事实也是隐约的居中。我真的需要马上检查一下我的转换代码。现在我可能对我的复选框究竟怎么了，也产生了一定的疑问。使用滚轮无法垂直滚动，这就有趣了。另外，注意滚动条在左边。

Edge 15.15254

Edge 15的vertical-rl效果

Edge 15的horizontal-tb效果

几乎和Edge 16的效果一模一样。我有理由相信Windows Phone上的Edge浏览器用的是与桌面版本同样的渲染引擎EdgeHTML，如果有错，烦请各路大婶拍正。

iOS 11 WebKit

iOS 11 Webkit的vertical-rl效果