第 362 篇 · 第 14 卷 前端,沒有極限 2026 年 7 月 7 日 · 台北
ls -lt ./posts --since=2013 REC · node 362 · uplink

css

CSS3 垂直文字書寫

2013 年 10 月 20 日 · 1 分鐘閱讀 · By Wang Casper

html最早都是應用於拉丁文上,而拉丁文主要是水平由左到右的書寫方式,而到了其他的語系國家,文字也只能用水平由左到右的書寫方式;而漢字是屬於垂直書寫由右到左的書寫方式,現在也能透過CSS的writing-mode改變,就來看一下範例吧。

正常版

床前明月光
疑是地上霜
舉頭望明月
低頭思故鄉

這是最正常的水平書寫方式,但我們都知道古詩還是直行的比較習慣。

Writing-mode

床前明月光
疑是地上霜
舉頭望明月
低頭思故鄉
-webkit-writing-mode: vertical-lr
writing-mode: vertical-lr 

透過writing-mode,值設定為 vertical-lr,就可以把文字改為直書,透過小學課本我們可以了解不只是直書還要由右到左。

床前明月光
疑是地上霜
舉頭望明月
低頭思故鄉
-webkit-writing-mode: vertical-rl
writing-mode: vertical-rl

再把值改為vertical-rl,就可以直書且由右到左。

床前明月光
疑是地上霜
舉頭望明月
低頭思故鄉

如果還不夠,可以把字體換成標楷體...,就可以重現小學課本上的古詩了...。