一份全面的 CSS writing-mode 指南，探討如何控制文本方向以實現國際化 (i18n)，並創建具有視覺吸引力的全球無障礙網站。
CSS 書寫模式：精通全球網站的國際文本方向
在今日互聯的世界中，網站必須迎合多元化的受眾，而其中一個關鍵方面是處理不同的文本方向。CSS writing-mode 是一個強大的工具，它允許開發者控制文本流動的方向，從而能夠創建真正國際化 (i18n) 且視覺上引人入勝的網頁體驗。本綜合指南將探討 writing-mode 的複雜性，提供實用範例和可行的見解，幫助您為全球網站精通文本方向的控制。
了解書寫模式
writing-mode CSS 屬性指定了文本行是水平還是垂直佈局，以及區塊的前進方向。它在為使用不同書寫方向的語言（例如：）調整網頁方面扮演著至關重要的角色：
- 從左到右 (LTR): 英語、西班牙語、法語、德語以及許多其他西方語言。
- 從右到左 (RTL): 阿拉伯語、希伯來語、波斯語和烏爾都語。
- 垂直: 繁體中文、日語和蒙古語。
默認情況下，網頁瀏覽器使用 horizontal-tb 書寫模式，即文本從上到下水平佈局。然而，writing-mode 允許您更改此默認行為，並創建適應不同文本方向的佈局。
writing-mode 屬性的值
writing-mode 屬性接受幾個值，每個值指定不同的文本方向和區塊流：
horizontal-tb: 水平，從上到下。文本行是水平的，從上到下流動。這是默認值。vertical-rl: 垂直，從右到左。文本行是垂直的，從右到左流動。區塊向下推進。vertical-lr: 垂直，從左到右。文本行是垂直的，從左到右流動。區塊向下推進。sideways-rl:vertical-rl的過時別名。sideways-lr:vertical-lr的過時別名。
以下值也可用，但較少使用：
block-flow: 使用區塊格式化上下文的方向，該方向可能受其他屬性影響。
基本範例
讓我們用一些簡單的範例來說明 writing-mode 的用法：
水平文本（默認）
這是默認行為，因此不需要明確指定 writing-mode：
<p>這是水平文本。</p>
垂直文本（從右到左）
要將文本從右到左垂直顯示，請使用 vertical-rl：
<p style="writing-mode: vertical-rl;">這是垂直文本（從右到左）。</p>
垂直文本（從左到右）
要將文本從左到右垂直顯示，請使用 vertical-lr：
<p style="writing-mode: vertical-lr;">這是垂直文本（從左到右）。</p>
writing-mode 的實際應用
除了基本的文本方向，writing-mode 還提供了一系列實際應用，用於創建視覺上引人入勝且國際無障礙的網站：
1. 適應 RTL 語言
對於支援 RTL 語言（如阿拉伯語或希伯來語）的網站，正確顯示文本至關重要。您可以使用 CSS 選擇器，根據語言屬性將 direction: rtl; 應用於特定元素或整個文件：
<html lang="ar">
<body>
<p>هذا نص عربي.</p>
</body>
</html>
html[lang="ar"] {
direction: rtl;
unicode-bidi: bidi-override;
}
雖然 direction: rtl; 對於設定基本方向至關重要，但您可能還需要 unicode-bidi: bidi-override; 來確保正確處理混合方向的文本。現代方法通常傾向於使用邏輯屬性，這將在稍後討論。
2. 創建垂直導航菜單
writing-mode 可用於創建垂直導航菜單，這在日本和中文網站中很常見。這可以為您的網站增添獨特的視覺風格：
<ul class="vertical-menu">
<li><a href="#">首頁</a></li>
<li><a href="#">關於</a></li>
<li><a href="#">服務</a></li>
<li><a href="#">聯繫</a></li>
</ul>
.vertical-menu {
list-style: none;
padding: 0;
margin: 0;
}
.vertical-menu li a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
background-color: #f0f0f0;
border-bottom: 1px solid #ccc;
writing-mode: vertical-rl;
text-orientation: upright;
}
在此範例中，使用 text-orientation: upright; 來確保垂直菜單項中的文本是直立顯示而不是旋轉的。
3. 設計雜誌風格佈局
可以結合使用 writing-mode 來實現雜誌風格的佈局。例如，您可以在一張大圖上疊加垂直文本，以創造引人注目的視覺效果。
<div class="magazine-section">
<img src="image.jpg" alt="Magazine Image">
<div class="vertical-text">獨家專訪</div>
</div>
.magazine-section {
position: relative;
width: 500px;
height: 300px;
}
.magazine-section img {
width: 100%;
height: 100%;
object-fit: cover;
}
.vertical-text {
position: absolute;
top: 0;
right: 10px;
color: white;
font-size: 2em;
writing-mode: vertical-rl;
text-orientation: upright;
transform-origin: top right;
transform: rotate(180deg); /* 為確保在各瀏覽器中正確渲染所必需 */
}
transform: rotate(180deg); 通常是必要的，以確保在不同瀏覽器（尤其是舊版本）中有一致的渲染效果。
4. 增強數據可視化
在數據可視化中，writing-mode 對於標記圖表中的坐標軸非常有用，尤其是在空間有限的情況下。例如，您可以旋轉垂直軸上的標籤以防止它們重疊。
進階技術與考量
要充分利用 writing-mode 的強大功能，請考慮以下進階技術和重要因素：
1. 邏輯屬性與值
現代 CSS 引入了邏輯屬性與值，它們提供了一種更靈活、更具語義化的方式來處理佈局和方向。不同於 left 和 right 等物理屬性，邏輯屬性如 start 和 end 會根據書寫方向自動適應。例如：
margin-inline-start: 在 LTR 中相當於margin-left，在 RTL 中相當於margin-right。padding-block-start: 在水平書寫模式中相當於padding-top，在垂直書寫模式中相當於padding-left或padding-right。
使用邏輯屬性可以使您的 CSS 更具適應性和可維護性，尤其是在處理多種書寫方向時。
2. 將 writing-mode 與其他 CSS 屬性結合
writing-mode 會與其他 CSS 屬性（如 text-orientation、direction 和 unicode-bidi）相互作用，以控制文本的外觀和行為。理解這些相互作用對於實現預期效果至關重要。
text-orientation: 指定垂直書寫模式中字符的方向。值包括upright、sideways、mixed和use-glyph-orientation。direction: 指定文本的基本方向（LTR 或 RTL）。unicode-bidi: 控制 Unicode 雙向演算法如何應用於元素。
3. 處理混合方向文本
在處理同時包含 LTR 和 RTL 字符的文本時（例如，阿拉伯語段落中的英語文本），使用 unicode-bidi 屬性來確保正確渲染非常重要。bidi-override 值通常用於強制指定一個特定方向。
<p dir="rtl">هذا نص عربي يتضمن بعض الكلمات الإنجليزية <span style="unicode-bidi: bidi-override; direction: ltr;">如此範例。</span></p>
4. 字體考量
並非所有字體都適合垂直書寫。有些字體可能不包含用於垂直書寫的字形，或者可能無法正確渲染。在使用垂直書寫模式時，應選擇專為垂直文本設計或對垂直字形有良好支援的字體。
來自東亞國家（中國、日本、韓國）的字體通常對垂直書寫有很好的支援。
5. 無障礙性
確保您對 writing-mode 的使用不會對無障礙性產生負面影響。為圖像和其他非文本內容提供替代文本，並確保殘障用戶能夠閱讀和理解文本。使用語義化 HTML 元素和 ARIA 屬性來改善無障礙性。
6. 瀏覽器兼容性
writing-mode 在現代瀏覽器中有良好的支援，但舊版瀏覽器可能需要供應商前綴（例如 -webkit-writing-mode、-ms-writing-mode）。使用像 Sass 或 Less 這樣的 CSS 預處理器來自動添加供應商前綴，或使用像 Autoprefixer 這樣的工具。
使用 writing-mode 的最佳實踐
要有效地使用 writing-mode 並創建全球無障礙的網站，請遵循以下最佳實踐：
- 盡可能使用邏輯屬性與值。 這將使您的 CSS 更具適應性和可維護性。
- 為垂直書寫模式選擇合適的字體。 測試您的字體以確保它們在垂直文本中能正確渲染。
- 考慮無障礙性。 確保您對
writing-mode的使用不會對殘障用戶的無障礙性產生負面影響。 - 在不同的瀏覽器和設備上測試您的佈局。 確保您的佈局在不同平台上都能正確渲染。
- 使用 CSS 預處理器或 Autoprefixer 來處理供應商前綴。 這將節省您的時間和精力，並確保您的 CSS 與舊版瀏覽器兼容。
- 將內容與表現分離。 使用 CSS 來控制內容的呈現，避免使用 HTML 進行樣式設計。
使用 writing-mode 的全球網站範例
世界各地的許多網站都出於各種目的利用 writing-mode，從適應 RTL 語言到創建獨特的視覺佈局。以下是一些範例：
- 阿拉伯語或希伯來語的新聞網站： 這些網站使用
direction: rtl以及可能的writing-mode調整來正確顯示文本。 - 日本和中國的藝術與文化網站： 經常為標題、菜單和裝飾元素採用垂直書寫。
- 時尚雜誌： 經常在視覺佈局中使用垂直文本以達到風格化效果。
結論
CSS writing-mode 是創建國際化和視覺上引人入勝網站的強大工具。通過理解該屬性的不同值以及它如何與其他 CSS 屬性相互作用，您可以創建適應不同文本方向的佈局，並為全球受眾提升用戶體驗。請記住考慮無障礙性、瀏覽器兼容性和字體選擇，以確保您的網站對所有用戶都是無障礙且具有視覺吸引力的。
隨著網頁開發的不斷發展，掌握像 writing-mode 這樣的技術對於創建真正全球化和包容性的在線體驗變得越來越重要。擁抱國際化的力量，創建能與世界各地用戶產生共鳴的網站。