vertical-rl不是古籍排版万能解，因其仅改变行方向，未处理标点翻转、西文旋转、内联元素继承、夹注横排等细节；需配合text-orientation: mixed和unicode-bidi: plaintext，并选用支持vert特性的字体。
writing-mode 能实现垂直排版，但直接设 writing-mode: vertical-rl 不等于古籍效果——缺了字序、标点、行首对齐、内联元素方向等关键细节，容易变成“看起来垂直，读起来别扭”。
vertical-rl 为什么不是古籍排版的万能解？
浏览器默认的 writing-mode: vertical-rl 把整块文字顺时针转90°，但古籍是“从上到下、从右到左”，且汉字本身不旋转，只是行方向改变。现代浏览器会把拉丁字母、数字、标点（尤其是括号、引号）也跟着旋转，导致 （ 变成横躺、， 指向左而非下，破坏阅读流。
- 标点符号方向错乱：如
「」『』（）在vertical-rl下会翻转或歪斜 - 英文/数字仍保持水平，但位置偏移（默认按 baseline 对齐，非字面中心）
- 行内元素（如
、）继承父级 writing-mode，可能意外旋转 - 没有自动处理“直排中夹注”的需求（如双行小注、旁批）
真正接近古籍的写法：vertical-rl + text-orientation + unicode-bidi
必须组合三个属性才能让汉字竖排自然、标点 upright、数字/西文不突兀：
- 用
writing-mode: vertical-rl定义主流向 - 加
text-orientation: mixed—— 让汉字、平假名、片假名保持 upright（不旋转），而西文字母、数字、标点按需 upright 或 sideways（浏览器自动判断） - 对纯中文段落，显式设置
unicode-bidi: plaintext避免双向文本算法干扰（否则遇到阿拉伯数字可能倒序）
示例：
.ancient-text {
writing-mode: vertical-rl;
text-orientation: mixed;
unicode-bidi: plaintext;
line-height: 1.6;
}
标点和夹注怎么处理才像雕版？
古籍里括号、引号、顿号都“直立”，且常与正文同宽；夹注（如双行小注）需独立控制方向，不能随主文旋转。
- 避免用默认标点：把
（换成〈、）换成〉（Unicode 中文括号），它们在mixed模式下天然 upright - 夹注用
display: inline-block+writing-mode: horizontal-tb强制横排，再用transform: scale(0.8)缩小字号 - 句末句号、逗号建议用全角字符（
。、），它们在mixed下表现稳定；慎用半宽符号
字体与渲染兼容性坑点
不是所有中文字体支持垂直排版的 OpenType 特性，尤其免费字体常缺失 vert 和 vrt2 表，导致标点错位或 fallback 到系统字体。
- 优先选明确声明支持竖排的字体，如
"Noto Serif CJK SC"、"Source Han Serif"、"霞鹜文楷" - 务必在
@font-face中声明font-feature-settings: "vert"（部分字体需手动启用） - Firefox 对
text-orientation: mixed支持最稳；Chrome 115+ 才完全修复西文数字在竖排中的 baseline 偏移 - 移动端 Safari 仍可能忽略
text-orientation，需用-webkit-text-orientation: mixed前缀
真正难的不是让字竖起来，而是让每个字符在它该在的位置上“站直”——尤其是当一行里混着汉字、数字、破折号和一个英文人名时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
