利用CSS实现竖排文字效果：从基础到进阶的完整方案

竖排文字是东亚传统排版的重要形式，尤其在中文古籍、日文和歌、韩文诗集等场景中广泛应用。随着Web技术的进步，CSS提供了多种实现竖排文字的方案，本文将系统梳理这些技术，并提供可落地的解决方案。

一、CSS竖排文字的核心技术

1. writing-mode属性：竖排文字的基石

writing-mode是CSS Writing Modes Module Level 3中定义的核心属性，它控制文本的书写方向。该属性接受以下值：

• horizontal-tb：默认值，水平从左到右，从上到下（西文标准）
• vertical-rl：垂直从右到左，从上到下（中文传统）
• vertical-lr：垂直从左到右，从上到下（蒙古文等）

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

实现原理：该属性会改变文本行的排列方向，将原本的水平行转为垂直列，同时调整字符的显示方向（默认情况下汉字会旋转90度）。

2. text-orientation属性：字符方向控制

当使用vertical-rl时，拉丁字母和数字默认会侧向显示，这通常不是我们想要的效果。text-orientation属性可以解决这个问题：

• mixed：保持汉字正立，旋转拉丁字母和数字（默认值）
• upright：所有字符都正立显示
• sideways：所有字符都侧向显示

.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: upright; /* 保持所有字符正立 */
}

实际应用：在中文排版中，通常需要配合text-orientation: upright使用，以确保中英文混合排版时所有字符都保持正立。

二、竖排文字的进阶技巧

1. 标点符号处理

竖排文字中，标点符号应位于字符的右侧（中文传统）。可以使用text-combine-upright属性处理数字和英文缩写：

.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: upright;
}
/* 将"100%"压缩为一列宽度 */
.vertical-text span.numeric {
  text-combine-upright: all;
}

效果说明：text-combine-upright: all会尝试将数字或英文缩写压缩在一列宽度内显示，保持竖排的整洁性。

2. 多列竖排布局

结合CSS多列布局（column-count）可以实现复杂的多列竖排效果：

.vertical-container {
  writing-mode: vertical-rl;
  column-count: 3; /* 三列竖排 */
  column-gap: 2em;
  height: 600px; /* 需要指定高度 */
}

注意事项：多列竖排需要明确指定容器高度，否则列数可能无法正确计算。

3. 表格竖排

表格的竖排需要同时处理表头和单元格：

.vertical-table {
  writing-mode: vertical-rl;
}
.vertical-table th {
  text-orientation: upright;
  /* 可能需要调整padding方向 */
  padding: 0.5em 1em 0.5em 0;
}

兼容性提示：表格竖排在复杂布局中可能出现渲染问题，建议测试目标浏览器的支持情况。

三、兼容性与回退方案

1. 浏览器支持情况

• 现代浏览器（Chrome 50+, Firefox 41+, Edge 12+, Safari 10.1+）都支持writing-mode
• IE11支持部分属性，但需要-ms-前缀
• 移动端浏览器普遍支持良好

2. 渐进增强方案

.vertical-text {
  /* 现代浏览器方案 */
  writing-mode: vertical-rl;
  text-orientation: upright;
  /* IE11回退方案 */
  -ms-writing-mode: tb-rl;
  transform: rotate(90deg); /* 不完美回退 */
}

建议：对于关键项目，可以使用JavaScript检测writing-mode支持情况，提供替代布局方案。

四、实际项目中的最佳实践

1. 响应式竖排设计

.vertical-section {
  writing-mode: vertical-rl;
  @media (max-width: 768px) {
    writing-mode: horizontal-tb; /* 小屏幕转为横排 */
  }
}

2. 混合排版技巧

中英文混合竖排时，建议：

1. 为英文部分添加单独的类
2. 使用text-orientation: upright保持正立
3. 适当调整行高和间距

.vertical-mixed {
  writing-mode: vertical-rl;
}
.vertical-mixed .english {
  text-orientation: upright;
  letter-spacing: 0.1em; /* 英文可能需要更大间距 */
}

3. 性能优化建议

• 避免在大型文本块中频繁切换书写方向
• 对于复杂竖排布局，考虑使用CSS自定义属性（CSS Variables）简化管理
• 使用will-change: writing-mode提示浏览器优化

五、未来展望

CSS Writing Modes Module Level 4正在讨论更多高级特性，包括：

• 更精细的标点符号控制
• 竖排中的浮动元素处理
• 与CSS Grid的更好集成

开发者应关注W3C规范更新，及时调整实现方案。

结语

利用CSS实现竖排文字效果已经从早期的hack方案发展为标准化的解决方案。通过合理使用writing-mode、text-orientation等属性，结合适当的回退策略，开发者可以在现代Web项目中轻松实现专业的竖排文字效果。随着浏览器对CSS标准的持续完善，竖排文字的Web实现将变得更加稳定和高效。