2018年8月26日 星期日

CSS 垂直文字書寫- writing-mode 和 text-orientation

網頁的排版預設都是水平由左往右排,所以像是中國文字這種垂直閱讀的,只要設定 css 的 writing-mode 屬性就可以了。

預設的屬性為 writing-mode: horizontal-tb;
可以設成 vertical-lr(垂直由左而右)和 vertical-rl(垂直由右而左)

See the Pen Writing Mode by deathhell (@deathhell) on CodePen.




此外若是英文的話想要調整文字的排列方式,也可以再加上 text-orientation 這個屬性,不過要注意瀏覽器的支援程度。
mixed 為橫向書寫,upright 則是改成英文字母會跟排列方向一樣是垂直的。

See the Pen text-orientation by deathhell (@deathhell) on CodePen.

反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...