writing-mode: vertical-rl 是中文竖排唯一合理选择，因其严格匹配“从上到下、从右到左”的传统阅读流，确保语义正确、布局稳定与可访问性达标；vertical-lr 仅适用于蒙古文等特殊场景，中文使用会导致段落顺序颠倒、标点错位。
writing-mode: vertical-rl 是唯一可靠、语义正确、可复制可访问的竖排方案，其他用 transform、flex 拆字或 br 强制换行的做法，都会破坏文本流、光标定位和屏幕阅读器支持。
为什么 writing-mode: vertical-rl 而不是 vertical-lr？
中文传统竖排是“从上到下、从右到左”——vertical-rl 正好匹配这个逻辑：每行文字自上而下堆叠，新行出现在左侧（即整块内容向左推进）。而 vertical-lr 是从左到右推新行，适合蒙古文，中文用它会导致段落顺序反了，比如两段话会左→右排列，不符合阅读习惯。
常见错误现象：vertical-lr 下括号方向错乱、引号位置偏移、多段文字左右错位。
- 只在明确需要左起竖排（如某些现代设计实验）时才考虑
vertical-lr - 混合中英文时，
vertical-rl+text-orientation: mixed能让汉字直立、ASCII 字母顺时针转 90°，保持可读性 - 别用
text-orientation: upright—— 它会让英文完全横着挤成一列，根本没法读
writing-mode 不生效？先查这三处
语法没错但没效果，大概率是布局上下文不支持。CSS 的 writing-mode 只对块级容器生效，且会被某些旧式布局模式屏蔽。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 父容器是
display: inline或inline-block→ 改成block或inline-flex - 元素被
float、position: absolute或display: table-cell包裹 → 这些会脱离标准文档流，writing-mode失效 - 容器没设高度或
white-space: nowrap→ 竖排文字会无限向下延伸或直接溢出，建议加height或用max-height+overflow: hidden控制可视范围
移动端和旧浏览器怎么兼容？
Safari 13+、Chrome 48+、Firefox 41+、Edge 79+ 都原生支持 writing-mode: vertical-rl；IE11 及更早版本仅支持私有属性 -ms-writing-mode: tb-rl，且不支持 text-orientation。但 2026 年绝大多数项目已无需为 IE 做降级。
真正要小心的是 Safari ≤ 12.1（macOS Mojave 及更早系统），它识别 writing-mode 但渲染异常。可用 @supports 安全检测：
@supports (writing-mode: vertical-rl) {
.vertical-text {
writing-mode: vertical-rl;
text-orientation: mixed;
}
}
@supports not (writing-mode: vertical-rl) {
.vertical-text {
display: block;
width: 1em;
line-height: 1.5;
}
}
- 别用
transform: rotate(90deg)降级——它让复制粘贴变成乱序字符，且无法正确处理换行和断词 - 伪竖排（
display: block+width: 1em）虽简陋，但保留了语义和可选性，是唯一可用的兜底方案 - 移动端不用加
text-combine-upright，它只用于数字/字母合字（如「2026」缩成一个字宽），和竖排无关
竖排里 line-height 和 letter-spacing 怎么调？
竖排时 line-height 仍控制“行间距”，但方向变成了垂直方向；letter-spacing 则控制字与字之间的横向距离（即竖排时的“上下字距”）。这两者必须协同调整，否则看起来松散或拥挤。
-
line-height推荐用无单位值（如1.4），避免固定px在不同字号下失衡 -
letter-spacing在竖排中影响视觉节奏，中文建议设为0.05em～0.1em，太大会割裂阅读流 - 别依赖
margin或padding微调字距——它们作用于整个块，不是字符级控制 - 如果用了
font-feature-settings: "vkrn"（竖排字距优化），需确认字体本身支持该 OpenType 特性，否则无效
最易被忽略的一点：竖排容器内尽量不要嵌套 bdi、dir="rtl" 或 unicode-bidi，这些会干扰 Unicode 双向算法，导致括号翻转、数字列错位。保持默认 direction: ltr，让 writing-mode: vertical-rl 自主管理流向。
