竖排中文应优先用 writing-mode: vertical-rl 配合 text-orientation: mixed，禁用 text-orientation: upright；兼容旧浏览器需降级为 display: block + width: 1em 伪竖排；须规避 direction/unicode-bidi 干扰、选用支持竖排的字体，并精细调控 line-height 与 letter-spacing。
用 writing-mode 实现竖排，但不是所有值都适用
现代浏览器中，writing-mode 是控制文字方向最直接的方式。但别一上来就写 writing-mode: vertical-rl —— 它会让整块内容（包括换行、对齐、甚至内联元素顺序）都按垂直右到左处理，而你可能只想让中文字符“竖着读”，其他行为保持水平逻辑。
常见误用是把 writing-mode: vertical-lr 用在英文或混合文本上，结果标点位置错乱、数字倒置。真正稳妥的竖排中文场景，优先选 writing-mode: vertical-rl，并配合 text-orientation: mixed（让数字和拉丁字母自动旋转成可读方向）。
-
writing-mode: vertical-rl：文字从上到下，行从右到左（符合传统中文竖排习惯） -
text-orientation: mixed：汉字保持直立，ASCII 字母和数字顺时针转 90°，括号等标点自动适配 - 避免用
text-orientation: upright，它会强制所有字符直立，导致英文完全不可读
IE 和旧版 Safari 不支持 writing-mode 的 vertical 值？用 transform 回退不现实
直接对每个字套 span + transform: rotate(90deg) 看似可行，实际会破坏行高计算、光标定位、复制粘贴顺序，而且无法正确处理换行和断词 —— 用户复制出来是一串乱序字符。
真正可用的兼容方案是：检测 writing-mode 支持性，仅对不支持的浏览器（如 IE11 及更早、Safari ≤ 12.1）降级为「伪竖排」：用 display: block + width: 1em 强制单字占一行，并手动调整 line-height 模拟竖向间距。
- 检测方式：
@supports (writing-mode: vertical-rl)写在 CSS 中，或用 JS 查CSS.supports('writing-mode', 'vertical-rl') - IE 下不要尝试
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1)，它不支持子元素重排，且已废弃 - 移动端 Safari 13+ 已完整支持，无需额外 hack
direction 和 unicode-bidi 会影响竖排中的括号与数字对齐
即使设置了 writing-mode: vertical-rl，如果容器有 direction: rtl 或嵌套了 bdi 元素，某些 Unicode 双向字符（如中文括号、阿拉伯数字）可能被错误重排序，出现「）」在左、「（」在右，或数字列错位。
竖排中文应显式重置双向文本行为：
- 去掉所有不必要的
direction设置，让其保持默认ltr（这是writing-mode: vertical-rl下的推荐基线） - 避免在竖排文本内部使用
bdi或dir="auto"，它们会干扰text-orientation的自动旋转逻辑 - 若必须混排阿拉伯数字（如「第123章」），用
...（U+202A / U+202C）包裹数字段，强制其按 LTR 渲染后再旋转
字体选择和行距控制比想象中更关键
很多中文字体（尤其是免费字体）没有为竖排优化字形，比如「。」「，」在 text-orientation: mixed 下可能旋转后位置偏高或偏低；思源黑体、Noto Serif CJK、霞鹜文楷等明确标注支持竖排的字体才可靠。
行距不能只靠 line-height：竖排时，line-height 对应的是「行间距」（即字与字之间的垂直距离），但视觉上还需考虑字宽带来的横向留白。建议统一用 em 单位，并额外加 letter-spacing: 0.15em 避免汉字紧贴。
- 慎用系统字体栈如
"PingFang SC", "Hiragino Sans GB"—— 它们在 macOS 上竖排表现尚可，但在 Windows 上常缺失竖排字形 -
line-height: 1.6是较安全的起始值；低于 1.4 容易让相邻字碰撞，高于 2.0 会显得松散 - 避免设置
font-size小于14px，小字号下旋转后的标点识别度急剧下降
竖排不是简单改个属性就能“看起来像古籍”，真正难点在标点朝向、数字旋转、字体字形、复制逻辑四者协同 —— 其中任意一项没对齐，用户一眼就能感觉到别扭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
