writing-mode 是 CSS 中的一個屬性，用于設置文本、內聯元素、表格單元格和表格列的書寫方向、文本排列以及塊流方向。以下是對 writing-mode 屬性的詳細介紹：

1. 語法和值

• 語法：writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr | initial | inherit;
• 值：
  • horizontal-tb：水平方向從左到右，從上到下書寫方式。這是默認值，類似于西方語言的常規模式。
  • vertical-rl：垂直方向自右而左的書寫方式，即從上到下，從右到左。這種布局是東亞語系通常使用的。
  • vertical-lr：垂直方向內內容從上到下，水平方向從左到右。這種布局主要用于內蒙古的蒙古語和滿語。
  • sideways-rl：內容垂直方向從上到下排列，并向右傾斜。
  • sideways-lr：內容垂直方向從下到上排列，并向左傾斜。
  • initial：將屬性設置為其默認值，即 horizontal-tb。
  • inherit：從父元素繼承該屬性的值。

2. 瀏覽器支持

• writing-mode 屬性在現代瀏覽器中得到了廣泛的支持，包括 Chrome、Firefox、Safari 和 Edge。
• 在舊版本的 Internet Explorer 中，writing-mode 是一個私有屬性，但在后續版本中逐漸被標準化。

3. 兼容性前綴

• 為了確保在所有瀏覽器中都能正常工作，有時可能需要使用瀏覽器特定的前綴，如 -webkit-（針對 Chrome 和 Safari）和 -ms-（針對 Internet Explorer）。

4. 使用場景

• 支持多種語言的排版，特別是東亞語言的豎排文本。
• 創造非傳統的頁面布局和視覺效果。

5. 注意事項

• writing-mode 屬性會改變元素的布局方向，但不會影響文本內容的實際順序。
• 如果父元素設置了 writing-mode 屬性，子元素會繼承該屬性，除非子元素自己也設置了 writing-mode 屬性。
• 在使用 writing-mode 屬性時，可能需要同時調整其他相關屬性，如 text-align、padding、margin 等，以確保布局的正確性。

6. 示例

.example-text {writing-mode: vertical-rl; /* 設置為垂直方向自右而左的書寫方式 */text-align: right; /* 調整文本對齊方式以適應新的書寫方向 */padding: 10px; /* 添加內邊距以改善可讀性 */
}

最后附上效果案例https://jsrun.net/2fDKp