想像一下，你正在逛台北的誠品書店，突然被一本日式設計的書籍封面吸引住了。書名不是我們習慣的橫排文字，而是優雅地垂直排列，彷彿每個字都在向下流淌，形成一道獨特的視覺瀑布。這種垂直文字的美感，不僅在傳統的東方文化中常見，在現代網頁設計中也越來越受歡迎。

無論是製作一個復古風格的網站標題，還是設計一個創意十足的側邊導航欄，都少不了垂直文字的貢獻。但是，以下面這行文字為例，該如何在 CSS 中實現這個效果呢？

最簡單的方法：使用 rotate 旋轉

最直觀的想法就是使用 CSS 的 transform: rotate() 來旋轉文字：

1
2
3
4

.vertical-text-rotate {
    transform: rotate(90deg);
    /* 或者 rotate(-90deg) 根據需要的方向 */
}

這個方法看起來很簡單，文字確實會垂直顯示。對於簡單的場景，這個解決方案可能就足夠了。但我們在套用後，可能會遇到一些問題。

1. 佔用空間混亂：旋轉後的元素仍然保持原本的寬高比例，這會導致佈局空間計算錯誤。原本應該是細長的垂直文字區塊，卻佔用了一個正方形或橫向矩形的空間。

2. 定位偏移：文字旋轉後，其基準點（通常是中心點）會發生位移，導致文字出現在你意想不到的位置。你需要額外使用 transform-origin 和位置調整來修正。

3. 容器適應困難：父容器很難根據旋轉後的文字自動調整大小，經常需要手動設定寬度和高度，這讓響應式設計變得複雜。

4. 文字方向不自然：最重要的是，rotate 只是把橫排文字整體旋轉了 90 度，但每個字元本身並沒有按照垂直文字的規範來排列。在中文或日文的傳統垂直排版中，某些字元（如標點符號）應該有特定的顯示方式，但 rotate 無法處理這些細節。

更優雅的方案：writing-mode

CSS 提供了一個更專業的屬性來處理垂直文字：writing-mode

1
2
3
4
5

.vertical-text-writing-mode {
    writing-mode: vertical-rl; /* 垂直方向，從右到左 */
    /* 或者 */
    writing-mode: vertical-lr; /* 垂直方向，從左到右 */
}

1. 自然的文字流向：writing-mode 是專門為處理文字書寫方向而設計的，它會讓文字按照正確的垂直排版規範顯示，包括標點符號的正確位置。

2. 準確的空間佔用：使用 writing-mode 後，元素會按照實際的文字排列方式佔用空間，不會出現 rotate 那樣的空間計算問題。

3. 更好的響應式支援：容器可以根據垂直文字的實際尺寸自動調整，讓響應式設計更加簡單。

4. 語義化更強：從語義角度來說，writing-mode 更清楚地表達了「這是垂直文字」的意圖，而不是「這是旋轉的橫向文字」。

總結

雖然 transform: rotate() 看起來是個快速的解決方案，但對於真正的垂直文字需求，writing-mode 才是正確的選擇。它不僅解決了佈局和定位的技術問題，更重要的是提供了符合文字排版傳統的顯示效果。

下次當你需要實現垂直文字時，不妨試試這個更專業的方法，讓你的網頁文字像書店裡那些優雅的書籍封面一樣，散發出獨特的魅力。