writing-mode 是 CSS 中控制文本書(shū)寫(xiě)方向的屬性，常見(jiàn)值包括 horizontal-tb（默認(rèn)）、vertical-rl（從右向左豎排）和 vertical-lr（從左向右豎排）；其常見(jiàn)用途包括支持日文、韓文等語(yǔ)言的豎排文本、縱向?qū)Ш綑诓季帧DF 閱讀器界面適配等；text-orientation 用于控制豎排模式下單個(gè)字符的方向，常見(jiàn)值有 mixed（默認(rèn)，拉丁字符保持水平）、upright（所有字符豎直顯示）、sideways（字符順時(shí)針旋轉(zhuǎn) 90 度）；處理 RTL 語(yǔ)言如阿拉伯語(yǔ)時(shí)需配合 direction: rtl 和 unicode-bidi: bidi-override 來(lái)統(tǒng)一文本方向并確保布局一致性；使用這些屬性時(shí)需注意其對(duì)元素尺寸、排版邏輯及整體樣式的影響，以提升網(wǎng)頁(yè)的多語(yǔ)言兼容性和專業(yè)性。

CSS writing modes 和文本方向控制，是網(wǎng)頁(yè)布局中常被忽視但非常關(guān)鍵的一部分。尤其在處理多語(yǔ)言網(wǎng)站或需要豎排文字的場(chǎng)景時(shí)，掌握這些特性能讓你的頁(yè)面更靈活、更專業(yè)。

什么是 writing-mode？

writing-mode 屬性決定了文本塊在頁(yè)面上如何流動(dòng)。默認(rèn)情況下，大多數(shù)瀏覽器使用的是從左到右、從上到下的書(shū)寫(xiě)方式（也就是 horizontal-tb），這適用于英語(yǔ)、中文等語(yǔ)言。

但如果你需要處理日語(yǔ)、韓語(yǔ)或者蒙古語(yǔ)這類傳統(tǒng)上采用垂直書(shū)寫(xiě)的語(yǔ)言，就可以用：

writing-mode: vertical-rl; /* 從右往左豎排 */

或者

writing-mode: vertical-lr; /* 從左往右豎排 */

這樣設(shè)置之后，整個(gè)元素內(nèi)的文本會(huì)自動(dòng)變成豎排形式，而且布局也會(huì)隨之調(diào)整。比如一個(gè) div 的寬度和高度會(huì)根據(jù)新的書(shū)寫(xiě)方向重新計(jì)算。

常見(jiàn)用途：

• 日文、韓文、繁體中文網(wǎng)站中的豎排文本
• 橫向?qū)Ш綑诟臑榭v向排列，省去 flex 或 grid 設(shè)置
• 制作 PDF 閱讀器類界面時(shí)適配不同語(yǔ)言內(nèi)容

text-orientation 控制單個(gè)字符的方向

當(dāng)使用 vertical-rl 或 vertical-lr 這樣的豎排模式時(shí)，有些字符默認(rèn)還是保持水平顯示，比如拉丁字母和數(shù)字。這時(shí)候你可以用 text-orientation 來(lái)控制它們的方向。

常見(jiàn)的值包括：

• mixed：默認(rèn)值，拉丁字符保持水平，漢字等表意文字旋轉(zhuǎn)為豎直
• upright：所有字符都豎直顯示（適合全角符號(hào)和日文假名）
• sideways：字符整體順時(shí)針旋轉(zhuǎn)90度，適合標(biāo)題類展示

舉個(gè)例子，如果你想讓一段混合了英文和中文的文本在豎排時(shí)看起來(lái)更整齊，可以這樣寫(xiě)：

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

這樣無(wú)論是英文字母還是中文字符，都會(huì)以統(tǒng)一的豎直方向呈現(xiàn)。

direction 和 unicode-bidi 的配合使用

雖然不屬于 writing modes 的直接范疇，但在處理 RTL（從右到左）語(yǔ)言（如阿拉伯語(yǔ)、希伯來(lái)語(yǔ)）時(shí)，常常需要配合使用 direction 和 unicode-bidi。

• direction: rtl; 可以讓整個(gè)元素內(nèi)的文本從右到左顯示
• unicode-bidi: bidi-override; 強(qiáng)制覆蓋瀏覽器的默認(rèn)雙向算法，確保方向一致

例如：

.rtl-content {
  direction: rtl;
  unicode-bidi: bidi-override;
}

這個(gè)組合在國(guó)際化網(wǎng)站中特別有用，尤其是在用戶切換語(yǔ)言時(shí)動(dòng)態(tài)改變文本方向的情況下。

需要注意的是，RTL 布局不只是文字方向變化，還會(huì)影響 padding、margin、flex 排列等樣式邏輯，建議結(jié)合 CSS 工具類或 BEM 命名規(guī)范進(jìn)行管理。

基本上就這些。寫(xiě)作模式和文本方向看似簡(jiǎn)單，但在實(shí)際應(yīng)用中很容易遇到兼容性或排版錯(cuò)位的問(wèn)題。合理使用這幾個(gè)屬性，能讓你的網(wǎng)頁(yè)更具適應(yīng)性和國(guó)際范兒。

以上是了解CSS編寫(xiě)模式和文本取向的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！