這功能對於瀏覽器來說，應該是個沒人(或很少人)想過會存在的功能。

從十幾二十年前開始有瀏覽器以來，瀏覽器就一直是以橫讀為主。而中文閱讀習慣，也漸漸地變成橫式閱讀。除了實體出版的小說有一定比例還是會用直排發行外，連電子書有支援直排功能的也不多(最近有愈來愈多的趨勢就是了，很好)。

所以網路上找得到的文章或是討論，也大都圍繞著電子書的直排支援上。在電子書都還支援得不是很完整的情況下，何況是一般的網頁瀏覽呢？

下面是一篇對我幫助很大的文章。裡頭提到中文直排的現況，和 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 技： 閱讀模式 + 直排

直排功能的窘境，無法直接在直排的實作上排除，因為網頁上的元件寫法千千萬萬種，不大可能針對每一種都去處理直排的應變方式。但是，如果搭配上最近剛實作好，接近完美的閱讀模式，直排的效果瞬間有了跳躍式的改善！開啟閱讀模式後，畫面上的元件已經是可以完全(幾乎？)在掌控之中；這時再加上直排的處理 -- 一個堪用的瀏覽器直排功能誕生了！

雖然還有些小地方要處理，但現在的直排模式已經可以拿來日常使用了。對於內容較多的中文網頁內容，切換成直排模式，搭配點擊翻頁，在閱讀上的感覺會更接近於電子書。

至於內容裡夾雜的數字，桌上型電腦的瀏覽器其實有支援 css style 語法可以將其轉正；但在 Mobile 上的 WebView 目前都還沒有支援；得要自己撈出這些數字，再利用 將它轉正。以後有時間應該會再補一下這個修正。而內容中的英文單字和句子…就無能為力了。

參考影片

參考版本: https://github.com/plateaukao/browser/releases/tag/v8.4.5