WRITING-MODE: HORIZONTAL-TB + MULTI-COLUMN

横排版式

自西方印刷术传入并与现代计算机技术结合后,横向排版不仅成为了目前万维网(World Wide Web)最基础、最默认的文本呈现方式,也逐渐塑造了当代读者在屏幕上由左至右、由上而下的信息接收节奏。

在这个模式下,我们可以利用原生的CSS属性 text-indent: 2em; 完美实现传统的首行缩进两字。而在中文排版中,为了达到更优的视觉边缘,我们通常会开启 text-align: justify; 以实现两端对齐。

当内容长度较大时,借助 column-countcolumn-gap 可以进行分栏,让阅读节奏更接近杂志与报刊的编排方式。

WRITING-MODE: VERTICAL-RL + MULTI-COLUMN

直排版式

自古以來的竹簡與線裝書,皆採用由上至下、由右至左的書寫習慣;這種直排閱讀邏輯深刻影響了東亞長期以來的文獻形態,也讓文字在空間中的行進方向承載了明確的文化記憶。

透過CSS屬性 writing-mode: vertical-rl;,我們可以在不改變任何HTML結構的前提下,瞬間將網頁轉換為傳統的東亞直排佈局。在該佈局下,不僅文字方向發生了改變,瀏覽器的滾動條、盒模型的邏輯方向也隨之進行了無縫的映射換位。