vertical-rl + mixed 是古风竖排的最小可行组合，因 vertical-rl 仅改变文本流方向，而 text-orientation: mixed 才确保汉字直立、西文数字顺时针转90°后字头朝右，实现中西混排可读。
只写 writing-mode: vertical-rl 在移动端古风文本里基本等于没写——微信 iOS、旧版 Safari、X5 内核会直接忽略，即使生效也大概率文字歪斜、容器塌陷、标点翻转错乱。
为什么 vertical-rl + mixed 是古风竖排的最小可行组合
中文古籍排版要求汉字直立、西文数字可读、标点 upright、列序从右向左。writing-mode: vertical-rl 只切换了文本流方向，但不控制字符朝向；text-orientation: mixed 才真正让汉字/假名保持 upright，同时把拉丁字母和阿拉伯数字顺时针转 90° 后仍字头朝右（即“正立可读”），这是中西混排（如作者名、朝代、注释）不崩的关键。
常见错误现象：漏掉 text-orientation: mixed → 英文段落全躺倒，数字串（如“2024年”）变成一横条，句号。、逗号，指向左侧而非下方，阅读断层。
- 绝对不要用
text-orientation: sideways：它会让汉字也躺倒，彻底破坏古风语义 - 慎用
text-orientation: upright：英文会“横着站”，仅适合纯书法标题或印章式短语 -
unicode-bidi: plaintext建议加上：防止阿拉伯数字或混合 Unicode 字符触发双向算法倒序（尤其在夹注、年份中常见）
移动端容器尺寸与溢出必须手动接管
竖排后，height 不再是“高度”，而是“每列最大视觉高度”；width 反而决定“列宽”。不设 height，容器会塌成一条线；设 min-height 或 auto 无效。
使用场景：古诗每行约 1.5em 行高，20 行需预估 height: 30em 或固定像素值（如 height: 400px）。窄屏下若内容超长，需启用垂直滚动：
- 加
overflow-y: auto控制上下滑动（不是overflow-x） - iOS 必须加
-webkit-overflow-scrolling: touch保平滑 - 避免对 flex/grid 容器直接设
writing-mode：主轴逻辑冲突，子项堆叠错位
微信和旧 iOS 的降级检测不能靠 UA
微信 Android（尤其 X5 内核 8.0.30 前）、iPhone 6s 及更早设备上的 WebKit 对 writing-mode 支持极不稳定，UA 字符串已不可靠。真机验证发现，运行时检测最准：
getComputedStyle(el).writingMode !== 'vertical-rl' 为 true 时，说明未生效，应立即启用降级。
- 降级别用图片——可用
transform: rotate(90deg)+width/height互换模拟，但需重算尺寸（旋转后逻辑反转） - touch 事件坐标会偏移：降级后监听区域需用
clientX/clientY手动映射回原始布局坐标 - 字体 fallback 必须显式写全：
font-family: "Noto Serif CJK SC", "霞鹜文楷", "PingFang SC", sans-serif；-apple-system在竖排下常压扁标点
标点、夹注、数字这些细节才是真难点
浏览器原生 writing-mode 不处理古籍特有结构：括号翻转、双行小注横排、顿号居中、破折号——长度异常。这些不是加几行 CSS 就能解决的。
例如：半角 ( 在 mixed 下仍可能歪斜，换成全角〈〉；句末用全角。、，；夹注用 display: inline-block + writing-mode: horizontal-tb 强制横排，再缩放字号。
真正麻烦的是渲染差异太碎：同一段代码，在 iOS Safari 16、微信 iOS、微信 Android、Chrome for Android 上表现可能完全不同——2026 年了，仍得靠真机矩阵测试，而不是查兼容性表格。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
