CSS 书写模式

学习writing-mode · 难度：入门 · +10XP

CSS 书写模式 writing-mode

writing-mode 属性定义了文本的书写方向，即文字是水平排列还是垂直排列，以及排列的流向。它对于处理东亚竖排文字（中文、日文、韩文）等场景至关重要。

属性值

值	文字方向	块流向
horizontal-tb	水平（从左到右）	从上到下（默认）
vertical-rl	垂直（从上到下）	从右到左
vertical-lr	垂直（从上到下）	从左到右
sideways-rl	垂直（整行旋转）	从右到左
sideways-lr	垂直（整行旋转）	从左到右

基本用法

/* 中文竖排 — 适合古风排版 */
.vertical-text {
  writing-mode: vertical-rl;
  /* 文字从上到下，列从右向左排列 */
}
/* 日文竖排 */
.japanese-vertical {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

中文竖排示例

<div class="poem">
  <h2>静夜思</h2>
  <p>床前明月光，疑是地上霜。</p>
  <p>举头望明月，低头思故乡。</p>
</div>
<style>
.poem {
  writing-mode: vertical-rl;
  height: 400px;
  font-family: "KaiTi", "STKaiti", serif;
  font-size: 20px;
  letter-spacing: 4px;
  margin: 0 auto;
}
</style>

text-orientation 文字方向

配合 writing-mode 控制单个字符的旋转方式：

.upright {
  writing-mode: vertical-rl;
  text-orientation: upright;
  /* 字符保持直立，适合 CJK 文字 */
}
.mixed {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  /* CJK 直立，英文/数字旋转 90°（默认） */
}
.sideways {
  writing-mode: vertical-rl;
  text-orientation: sideways;
  /* 所有字符旋转 90° */
}

实用场景

1. 中文古风排版：诗词、对联、篆刻风格的文字
2. 日文/韩文竖排：日文小说、传统文档的竖排布局
3. 表格表头：窄列的竖排表头文字
4. 侧边标签：侧边栏的垂直标签文字
5. 装饰性排版：打破水平布局的设计创意

表头竖排

th.vertical-header {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  height: 120px;
  white-space: nowrap;
  text-align: center;
}

CSS 逻辑属性

writing-mode 改变后，CSS 逻辑属性也会相应调整：

/* 物理属性 vs 逻辑属性 */
.element {
  /* 物理属性（始终相对于屏幕） */
  width: 200px;
  margin-top: 10px;
  /* 逻辑属性（相对于书写模式） */
  inline-size: 200px;          /* 替代 width */
  margin-block-start: 10px;    /* 替代 margin-top */
}

注意事项

• 改变 writing-mode 后，width/height 的方向概念不变但视觉效果改变
• 在竖排模式下，overflow 的方向也会相应改变
• 建议优先使用逻辑属性来适应不同的书写模式
• sideways-rl 和 sideways-lr 浏览器支持度较低

writing-mode 是国际化 web 设计和东亚文字排版的基础属性。就算不做竖排中文，了解它对于理解 CSS 逻辑属性和国际化布局也很有帮助。