打破橫式思維：CSS writing-mode 玩轉文字方向

了解 writing-mode

在螢幕主導的時代，我們已經習慣「橫式閱讀」的世界，CSS 的 writing-mode 使排版可以跳脫框架，是讓畫面可呈現橫、直書「文字流方向」的關鍵屬性，它能夠根據語言和情境自由的變化，實現直書排版與多語系佈局。

基本語法 & 範例

p {
  writing-mode: vertical-rl;
}

透過 writing-mode 控制文字的書寫方向，例如：

• horizontal-tb：預設值，從左到右、由上到下
• vertical-rl：直書，文字由上到下、行由右至左
• vertical-lr：直書，文字由上到下、行由左至右
• sideways-rl / sideways-lr：將文字橫向旋轉排列，適合特殊設計排版

writing-mode 主要影響的是「文字的書寫方向與行的排列方向」，而不是整個容器的物理方向。

可以從範例中觀察，我在標題文字添加了下邊框 border-bottom: 2px solid #190ec4; 發現直書方式標題的下邊框依然位於該元素的底部也就是物理下方，不會隨文字方向旋轉。

writing-mode 改變的是「文字流」方向 (inline、block 的邏輯方向)

如果希望邊框跟著文字方向走 (變成「直書文字的下邊框」)，就需要改用「邏輯屬性」，border-block-end: 2px solid #190ec4; 來對應直書文字的底部。這樣無論是橫書還是直書，下邊框都會出現在「文字閱讀方向的最後一行」。

應用情境：電子書與多語系內容

writing-mode 特別適合在電子書、雜誌閱讀器或文化內容網站中使用。例如電子書頁面可以透過以下設定，讓整個閱讀體驗符合當地閱讀習慣。

html {
  writing-mode: vertical-rl;
}

在多語系或國際化網站中，還能針對語系設定不同的文字方向：

html[lang="ja"] { writing-mode: vertical-rl; }
html[lang="en"] { writing-mode: horizontal-tb; }

這種做法不僅讓內容在不同語言下自然呈現，也為電子書排版或多語系出版提供一致且可維護的方法。

瀏覽器支援

目前主流瀏覽器 (Chrome、Firefox、Safari、Edge) 已完整支援 writing-mode，在一般網站、電子書閱讀器環境中皆可安心使用。

結語

從前端視角來看，「橫書」不再是唯一選項。

在這個全球化的介面時代，writing-mode 開發者能以最少的程式碼來實現多文化排版，讓電子書與網站更貼近真實閱讀體驗。懂得運用 writing-mode，就能讓設計更具包容性，使網頁排版更有溫度與文化感。