如何使用CSS writing-mode属性实现文本垂直排列

CSS的writing-mode属性是实现文本竖排的核心方案，通过vertical-rl等参数可精准控制中文排版方向。下文将详细解析其工作原理及实际应用中的注意事项。

writing-mode作为原生CSS方案，不仅能改变文本流方向，还具备语义清晰、实现可靠的特点，与单纯旋转文字的伪竖排方案有着本质区别。

---

vertical-rl 是中文竖排的默认选择，但别直接套用

虽然writing-mode: vertical-rl符合中文竖排规范，但需要注意它会完全改变布局坐标系：

1. 原width属性将控制视觉高度
2. 原height属性将决定视觉宽度
3. 内外边距的方位也会发生对应旋转

仅添加writing-mode而不调整相关属性，往往会导致容器变形或文字截断。建议采取以下措施：

1. 明确设置width和height的值，理解其新含义
2. 使用text-orientation: upright确保汉字保持直立
3. 通过line-height控制列间距而非行间距

.poem {  writing-mode: vertical-rl;  text-orientation: upright;  width: 2em;    /* 视觉上是“高度”，即每列多高 */  height: 20em;  /* 视觉上是“宽度”，即总共几列 */  line-height: 1.8;}

---

vertical-lr 和 sideways-rl 的使用场景很窄，慎用

vertical-lr适合蒙古文等特殊文字方向，中文场景强行使用会破坏阅读习惯。sideways-rl会导致字符旋转90度，虽然能实现特殊效果但存在三大问题：

1. Firefox@浏览器长期不兼容
2. 小字号时识别困难
3. 屏幕阅读器可能无法正确解析

除非确实需要特殊视觉效果，否则不建议使用这些值。

---

writing-mode 影响 flex / grid 布局，必须重审容器逻辑

当父容器设置writing-mode: vertical-rl后，flex和grid布局会发生以下变化：

1. flex-direction: row将变为垂直方向排列
2. grid的列宽控制实际上变成了行高控制
3. 对齐属性的参照轴也会相应旋转

常见错误是使用flex布局时，竖排文字块意外堆叠。解决方案包括：

1. 改用inline-block或float实现并排效果
2. 在flex布局中明确指定flex-direction: column
3. 通过开发者工具可视化检查主轴方向

---

移动端和打印样式中，writing-mode 的行为更敏感

在移动设备和打印场景中，writing-mode可能引发以下问题：

1. 字体缩放时出现字符错位
2. 垂直基线渲染不一致
3. 打印设备支持度有限

应对建议：

1. 优先使用px或ch单位定义尺寸
2. 打印样式表中默认禁用竖排效果
3. PDF导出时考虑Canvas渲染方案

实现中文竖排绝非简单调整文字方向，而是需要对整个排版系统进行重构，包括字体处理、尺寸控制和可访问性等多方面的全面考量。