CSS 寫作模式：穿梭於文字方向的旅程

Hello, 有志於網頁開發的同學們！今天，我們將踏上一段令人興奮的旅程，進入 CSS 寫作模式的世界。作為你們親切鄰居的計算機老師，我在這裡引導你們了解這個非常迷人的屬性，它簡直可以讓你的文字頭下腳上！所以，請繫好安全帶，我們一起來探索吧！

什麼是 CSS 寫作模式？

在我們開始編碼之前，讓我們先了解一下寫作模式是什麼。想像你正在閱讀一本書。在英語中，我們通常從左到右、從上到下閱讀。但如果你正在閱讀一本傳統的日文書呢？文字是從上到下垂直排列，並且從右到左閱讀。這就是 CSS writing-mode 派上用場的地方！

CSS 中的 writing-mode 屬性讓我們能夠控制我們顯示文字和其他內聯內容的方向。這就像有一根魔法棒，可以讓你的文字在不同的方向上起舞！

可能的值

讓我們看看我們可以使用 writing-mode 屬性的不同值：

值	描述
horizontal-tb	文字從左到右水平流動，從上到下
vertical-rl	文字垂直流動，從上到下，從右到左
vertical-lr	文字垂直流動，從上到下，從左到右
sideways-rl	文字垂直流動，從上到下，所有字符順時針旋轉 90°
sideways-lr	文字垂直流動，從上到下，所有字符逆時針旋轉 90°

適用範圍

writing-mode 屬性可以應用於所有元素，包括 ::first-letter 和 ::first-line 伪元素。這就像是一個萬能遙控器，用於控制文字方向！

DOM 語法

現在，讓我們看看我們如何在 CSS 中使用 writing-mode：

element {
writing-mode: value;
}

簡單吧？讓我們深入每一個值，並看看它們在實際中的應用！

CSS writing-mode - horizontal-tb 值

這是大多數語言的默認寫作模式，包括英語。讓我們看一個例子：

<div class="horizontal-tb">
<p>這是水平文字，從左到右，從上到下。</p>
</div>

.horizontal-tb {
writing-mode: horizontal-tb;
}

這將會像你現在閱讀這篇文章一樣顯示文字。沒有什麼花哨的，但這是我們的起點！

CSS writing-mode - vertical-rl 值

現在，讓我們來個翻轉：

<div class="vertical-rl">
<p>這是垂直文字，從右到左！</p>
</div>

.vertical-rl {
writing-mode: vertical-rl;
height: 200px;
}

看哪！你的文字現在是從上到下垂直排列，並且多行文字會從右邊開始向左移動。這就像閱讀傳統的日文或中文卷軸！

CSS writing-mode - vertical-lr 值

讓我們試試左到右的垂直模式：

<div class="vertical-lr">
<p>這是垂直文字，從左到右！</p>
</div>

.vertical-lr {
writing-mode: vertical-lr;
height: 200px;
}

現在，你的文字是垂直的，但它從左邊開始。這就像閱讀蒙古文一樣！

CSS writing-mode - sideways-rl 值

準備好來點特技了嗎？讓我們試試 sideways-rl：

<div class="sideways-rl">
<p>這是側向文字，從右到左！</p>
</div>

.sideways-rl {
writing-mode: sideways-rl;
height: 200px;
}

這會讓每個字符順時針旋轉 90°。這就像你的文字在做前翻！

CSS writing-mode - sideways-lr 值

最後來個後翻：

<div class="sideways-lr">
<p>這是側向文字，從左到右！</p>
</div>

.sideways-lr {
writing-mode: sideways-lr;
height: 200px;
}

這次，每個字符逆時針旋轉 90°。這就像你的文字在做後翻！

CSS writing-mode - 英語的美學應用

雖然這些不同的寫作模式對於支持多種語言至關重要，但它們也可以在英語中創造性地使用。這裡有一個有趣的例子：

<div class="book-spine">
<h2>The CSS Adventure</h2>
</div>

.book-spine {
writing-mode: vertical-rl;
transform: rotate(180deg);
height: 300px;
width: 50px;
background-color: #f0f0f0;
padding: 10px;
}

這會創造出一個看起來像書脊的垂直文字。酷炫吧？

CSS writing-mode - 相關屬性

為了完全控制文字方向，你可能想要與 writing-mode 一起使用以下屬性：

屬性	描述
text-orientation	定義文字字符的取向
direction	設置文字、內聯元素和表格列的方向
unicode-bidi	覆蓋文字的方向算法

這裡有一個快速的例子：

.vertical-mixed {
writing-mode: vertical-rl;
text-orientation: mixed;
}

這允許垂直文字中有些字符（如拉丁字母）被旋轉，而其他字符（如中文字符）保持直立。

那麼，我們就這樣啦，各位！我們一起穿越了 CSS 寫作模式的迷人世界。記住，網絡是一個全球平台，這些屬性幫助我們讓它對每個人，無論他們的語言或書寫系統如何，都能夠訪問和美麗。

下次你建造網站時，為什麼不試著玩玩這些屬性？你可能會創造出一些意外驚喜的东西！快樂編碼，願你的文字永遠朝著正確的方向流動！

Credits: Image by storyset