电子书阅读器上的浏览器 [Day14] 中文直排阅读模式

这功能对於浏览器来说，应该是个没人(或很少人)想过会存在的功能。

从十几二十年前开始有浏览器以来，浏览器就一直是以横读为主。而中文阅读习惯，也渐渐地变成横式阅读。除了实体出版的小说有一定比例还是会用直排发行外，连电子书有支援直排功能的也不多(最近有愈来愈多的趋势就是了，很好)。

所以网路上找得到的文章或是讨论，也大都围绕着电子书的直排支援上。在电子书都还支援得不是很完整的情况下，何况是一般的网页浏览呢？

下面是一篇对我帮助很大的文章。里头提到中文直排的现况，和 css style 的相关语法支援。透过文章中提到的 css style 语法，我得以初步的将网页转为直排。

https://bobtung.medium.com/电子书直横转换有什麽困难-5926fa019003

private const val verticalLayoutCss = "body {" +
        "-webkit-writing-mode: vertical-rl;" +
        "writing-mode: vertical-rl;" +
        "}"

private const val horizontalLayoutCss = "body {" +
        "-webkit-writing-mode: horizontal-tb;" +
        "writing-mode: horizontal-tb;" +
        "}"

虽然文字部分可以成功转为直排，而且是由左往右读；但是画面中的其他元素全都不受控制地散在画面中：

转换後的直排效果会根据每个网页的复杂度不同，有的看起来走位的元素比较少，可以正常的直排阅读；有的就跟上面的例子一样，把画面东一块西一块地盖住，想看也看不了。如此不稳定的功能，很难让人有想用的念头。

Combo 技：阅读模式 + 直排

直排功能的窘境，无法直接在直排的实作上排除，因为网页上的元件写法千千万万种，不大可能针对每一种都去处理直排的应变方式。但是，如果搭配上最近刚实作好，接近完美的阅读模式，直排的效果瞬间有了跳跃式的改善！开启阅读模式後，画面上的元件已经是可以完全(几乎？)在掌控之中；这时再加上直排的处理 -- 一个堪用的浏览器直排功能诞生了！