一直覺的 CSS 是種很有生命力的語言，總能三不五時挖掘出新的功能，豐富我們對 Web 的想像力。
最近到 W3School 查詢標籤的用法，意外看到 writing-mode，有種相見恨晚的感覺。對網頁設計師來說，畫面的安排無非由點、線、面依次推導，內容因為文化的關係會有不同的表現方式。
例如：最常見的英文書寫方式為橫書由左而右，從上到下，這也是我們在電腦上最常見的呈現方式，像是 Word、Excel、Powerpoint 等等皆是如此。如果你研究過傳統的中文書寫方式就會發現，傳統的中文書寫習慣是直書由上而下，從右到左，如果你要在網頁裡表現一些中文古籍的編排，電腦中預設的編排方式就不太合適。這時，writing-mode 就派上用場了。
writing-mode 可以滿足三種情況，分別為：
- horizontal-tb：橫書，由上到下。
- vertical-rl：直書，由右到左。
- vertical-lr：直書，由左而右。
我們以禮運大同篇當例子：
在預設的情況下會是 horizontal-tb 的效果，呈現如下：
大道之行也，天下為公。選賢與能，講信修睦。故人不獨親其親，不獨子其子；使老有所終，壯有所用，幼有所長，矜、寡、孤、獨、廢疾者，皆有所養；男有分，女有歸。貨，惡其棄於地也，不必藏於己；力，惡其不出於身也，不必為己。是故謀閉而不興，盜竊亂賊而不作，故外戶而不閉，是謂「大同」。
我們將之改成 vertical-rl 後，呈現如下：
大道之行也，天下為公。選賢與能，講信修睦。故人不獨親其親，不獨子其子；使老有所終，壯有所用，幼有所長，矜、寡、孤、獨、廢疾者，皆有所養；男有分，女有歸。貨，惡其棄於地也，不必藏於己；力，惡其不出於身也，不必為己。是故謀閉而不興，盜竊亂賊而不作，故外戶而不閉，是謂「大同」。
需要注意的是，如果將之改成英文的內容，則字母會順時針轉90度
When the Great Way(or Principle) prevails, the whole is owned by all; they elect men of talents, virtue and ability;
我們在了解這些特點後，就可以透過這些特性去排一些有趣的畫面。
讓區塊翻轉的 block-size
另一個與 writing-mode 有關的是 block-size。在說明它的用途前我們先試想一個版面情況，假設有一段文字在橫書的情況下，區塊的高度是 200px，寬度 auto；改成直書後，則希望將高度設為 auto，寬度設為 200px。這種情況常常發生內容從桌面版轉到手機版，版面編排會由橫式改成直式時發生。
直覺的作法會使用 width 及 height，搭配 @media，這樣我們就可以在不同的斷點間決定寬、高的尺寸，缺點是在寫斷點的時候需要設計師自己依據當時的情況填寫不同尺寸，規則越多越燒腦，有沒有更一勞永逸的簡單作法呢？答案是有的，block-size 就是這種情況的解方。
block-size 的特性
block-size 可以給一個數值，用來決定該區塊的寬或高，至於這個數值代表寬或者代表高，則需要視 writing-mode 的結果而定。
- 當 writing-mode 為 horizontal-tb 時，block-size 的數值代表區塊的高度。
- 當 writing-mode 為 vertical-* 時，block-size 代表寬度。
下面我們舉個例子，在 writing-mode 水平排列，並在沒有設定 block-size 的情況下
當我們設定 block-size: 200px 後，由於 writing-mode 為水平，block-size 的數值會代表區塊的高度。效果如下：
接者我們將 writing-mode 改成垂直排列後，block-size 的數值會代表區塊的寬度，效果如下：
日後，我們在設定 @media 的斷點時，只要簡單的設定該斷點為水平或垂直即可，不用在 width、height 及 aoto 間繞來繞去，維護起來也比較方便。
如果你不想寫死區塊的寬高，也可以使用 max-block-size 及 min-block-size，使用方式等同於 max-width、max-height、max-width、min-width，就不在細說，自己動手玩看看吧。
