writing-mode 是实现 css 竖排文字最直接、最标准的方式，推荐使用 vertical-rl 配合 text-orientation: mixed，并同步设置 direction: rtl 和调整 text-align 含义，注意兼容性及关联样式重构。
writing-mode 是实现 CSS 竖排文字最直接、最标准的方式，不用 JS、不依赖 transform 旋转，原生支持语义化排版。
vertical-rl 是中文竖排的默认选择
中文古籍、报刊标题、传统牌匾等场景，默认应使用 vertical-rl：文本从上到下排列，行序从右向左——这符合实际阅读习惯。设成 vertical-lr 会把第一列放在最左边，视觉上像“镜像竖排”，极少用于中文。
-
vertical-rl：适用于绝大多数中文、日文、韩文竖排需求 -
vertical-lr：仅在蒙古文或特殊 UI 布局中考虑，日常项目基本不用 - 不要用
horizontal-tb（默认值）去“模拟”竖排，它只是水平排版
text-orientation 决定单个字符怎么转
仅设 writing-mode: vertical-rl 不够，汉字会直立，但英文字母和数字默认被顺时针旋转 90°，可读性差。必须配合 text-orientation 控制：
-
text-orientation: mixed：汉字/假名直立，拉丁字母、数字、标点自动旋转——这是最常用、最自然的组合 -
text-orientation: upright：所有字符强制直立，适合书法展示、印章式排版，但英文会变成“横着站”，需确认设计意图 - 避免省略该属性，否则英文段落可能完全无法识别
direction 和 text-align 要同步调整
竖排后，“左对齐”“右对齐”的含义变了：text-align: left 实际是对齐容器顶部（即“首行顶对齐”），而 direction: rtl 才真正控制行序方向。常见误区是只调 text-align 却忽略 direction：
- 用
vertical-rl时，建议显式加direction: rtl，确保后续子元素（如按钮、图标）布局逻辑一致 -
text-align: center在竖排中是“居中列”，不是居中行；text-align: right反而会让文字贴容器底部 - 若容器内含 inline 元素（如
<span></span>或图标），它们的 baseline 对齐会受writing-mode影响，必要时用vertical-align微调
兼容性与 fallback 方案要提前验证
writing-mode 在 Chrome 48+、Firefox 41+、Safari 12.1+、Edge 79+ 中已稳定支持，但 IE 完全不支持。如果项目仍需兼容 IE，不能只靠 CSS：
- 现代项目可放心用，但需测试 iOS Safari 旧版本（如 iOS 12）是否触发渲染异常
- 避免在
table或flex子项上直接套writing-mode，某些浏览器会破坏布局流，优先包裹一层<div> <li>若需 fallback，可用 <code>@supports (writing-mode: vertical-rl)做特性检测，降级为 transform + width/height 手动控制的方案
真正麻烦的不是写那两行 CSS，而是后续所有关联样式（padding/margin/line-height/overflow）都得按竖排逻辑重新理解一遍——比如
line-height 控制的是“行间距高度”，但在竖排里它实际影响的是“字距宽度”。
