你不知道的CSS—writing-mode：垂直排版的艺术与实用指南

在Web开发的布局世界中，CSS的writing-mode属性长期处于“冷门但强大”的角落。尽管它能够轻松实现垂直文本、日文竖排、多语言混合排版等复杂需求，但许多开发者对其了解仅停留在表面。本文将深入解析writing-mode的核心用法、兼容性细节及实际开发场景，助你解锁这一隐藏的排版利器。

一、writing-mode的核心功能：从水平到垂直的文本革命

1.1 属性定义与基础值

writing-mode用于定义文本的书写方向，其核心值包括：

• horizontal-tb（默认值）：水平从左到右，垂直从上到下（英文/中文主流模式）
• vertical-rl：垂直从右到左，水平从上到下（传统中文/日文竖排）
• vertical-lr：垂直从左到右，水平从上到下（蒙古文等特殊语言）

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

1.2 视觉方向的本质改变

与text-orientation（控制字符旋转）不同，writing-mode会彻底改变文本流的布局方向。例如，设置vertical-rl后：

• 文本行变为垂直列
• 块级元素（如div）的宽度变为高度，高度变为宽度
• 内联元素（如span）的流向变为垂直

<div class="vertical-container">
  <p>这段文字将垂直排列</p>
</div>

.vertical-container {
  writing-mode: vertical-rl;
  border: 1px solid #ccc;
  height: 300px; /* 实际表现为宽度 */
  width: 100px;  /* 实际表现为高度 */
}

二、实际开发场景：垂直排版的五大应用

2.1 传统中文/日文竖排设计

在古籍数字化、日式网站或文化类项目中，竖排能还原传统美感。例如：

.chinese-poem {
  writing-mode: vertical-rl;
  text-orientation: upright; /* 保持汉字直立 */
  line-height: 2;
}

关键点：需配合text-orientation: upright防止汉字旋转，同时调整line-height避免行距过密。

2.2 多语言混合排版

当页面需同时显示阿拉伯文（从右到左）、英文（从左到右）和中文（垂直）时，writing-mode可结合direction属性实现精准控制：

.arabic-text {
  direction: rtl;
  writing-mode: horizontal-tb; /* 阿拉伯文水平但方向反向 */
}
.chinese-text {
  writing-mode: vertical-rl;
}

2.3 标签页或侧边栏的垂直导航

垂直排列的导航菜单可节省横向空间，尤其适合移动端或窄屏设计：

.vertical-nav {
  writing-mode: vertical-rl;
  gap: 20px; /* 使用gap替代margin控制间距 */
}
.vertical-nav a {
  display: block; /* 转换为块级元素以填充垂直空间 */
}

2.4 艺术化标题设计

通过垂直排版创造视觉焦点，例如将标题旋转90度：

.artistic-title {
  writing-mode: vertical-rl;
  transform: rotate(180deg); /* 额外旋转以调整方向 */
  margin: 50px auto;
  font-size: 2rem;
}

注意：此时需通过transform微调方向，避免文字倒置。

2.5 数据可视化中的标签优化

在柱状图或时间轴中，垂直排列的标签可避免重叠：

.chart-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg); /* 调整文字可读性 */
  text-anchor: middle; /* 配合SVG使用 */
}

三、兼容性与浏览器差异：跨平台实战指南

3.1 主流浏览器支持

• Chrome/Edge/Firefox/Safari：完整支持vertical-rl和vertical-lr
• IE11：部分支持，需添加-ms-writing-mode前缀
• 移动端：iOS和Android均无重大问题

3.2 渐进增强方案

为兼容旧浏览器，可采用以下策略：

.vertical-fallback {
  /* 现代浏览器 */
  writing-mode: vertical-rl;
  /* IE11 */
  -ms-writing-mode: tb-rl;
  /* 极旧浏览器回退 */
  transform: rotate(90deg); /* 仅作为最后手段 */
}

警告：transform旋转会改变元素坐标系，可能影响布局计算。

3.3 性能与渲染优化

垂直排版可能触发额外的布局重排（Reflow），尤其在动态内容更新时。建议：

• 避免在滚动容器中使用writing-mode
• 对垂直元素设置固定宽高以减少重绘
• 使用will-change: transform提示浏览器优化（需谨慎）

四、常见问题与解决方案

4.1 垂直文本中的标点符号

默认情况下，标点符号会跟随文本方向旋转。若需保持标点水平（如中文竖排中的句号），需结合text-combine-upright：

.vertical-punctuation {
  writing-mode: vertical-rl;
  text-combine-upright: all; /* 压缩横向字符为竖排 */
}

4.2 表单元素的垂直适配

输入框（input）和按钮（button）在垂直模式下需额外调整：

.vertical-input {
  writing-mode: vertical-rl;
  height: 2em; /* 替代width */
  padding: 0 10px;
}
/* 需通过JavaScript动态调整光标位置 */

4.3 响应式设计中的断点策略

在媒体查询中切换writing-mode需谨慎，避免布局闪烁：

@media (max-width: 768px) {
  .responsive-vertical {
    writing-mode: horizontal-tb; /* 小屏恢复水平 */
  }
}

建议：优先通过CSS变量或预处理器管理不同模式的样式。

五、未来展望：CSS Writing Modes Level 4

CSS规范正在扩展writing-mode的能力，包括：

• sideways-rl/sideways-lr：字符水平排列但文本流垂直（类似传统竖排但字符不旋转）
• logical属性集成：与margin-block-start等逻辑属性配合，实现更智能的布局
• 多列垂直文本：结合column-count实现复杂排版

/* 未来可能支持的语法 */
.future-vertical {
  writing-mode: sideways-rl;
  column-count: 2;
}

六、总结与行动建议

1. 立即尝试：在文化类项目或艺术网站中尝试vertical-rl，体验垂直排版的美感。
2. 兼容性测试：使用BrowserStack或本地虚拟机测试IE11及移动端表现。
3. 结合现代布局：将writing-mode与CSS Grid/Flexbox结合，创造更灵活的排版。
4. 关注规范更新：订阅CSS Working Group草案，提前掌握新特性。

writing-mode不仅是文本方向的开关，更是打开多语言支持、艺术化设计和空间优化大门的钥匙。通过合理运用，你能让Web布局突破水平限制，进入垂直排版的全新维度。