大约一年前,我写了一篇关于在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
效果