Ruby 标签可在文言文排版中使用，但需手动处理多音字、竖排对齐（用 ruby-position: right 和 text-orientation: mixed）、夹注需 rb/rt/rp 组合或 span 模拟，且字体声调易错位。
ruby 标签在文言文排版中能直接用吗
能，但效果受限。文言文常含多音字、通假字、异体字，ruby 只负责「一对一」或「一对多」的注音映射，不处理语义判断。比如「行」字在「道行」中读 xíng 还是 hàng，得靠人工标注，浏览器不会自动识别。
常见错误现象：<ruby>行<rt>xíng</rt></ruby> 和 <ruby>行<rt>hàng</rt></ruby> 在同一段里混用时，若未加空格或分隔，视觉上容易粘连；竖排时 writing-mode: vertical-rl 与 ruby 的默认对齐方向冲突，拼音可能错位到左侧而非正上方。
- 必须显式设置
ruby-position: over（尤其在 Firefox 中默认是under） - 遇到「之乎者也」等虚词，通常不注音，但若漏掉
<ruby></ruby>包裹，会导致行高不一致 - 古籍中双行小注（如夹注、旁批）不能用
<rt></rt>实现，需改用ruby+rb+rp组合，或退而用span模拟
如何让 ruby 在竖排文言文中正确对齐
竖排时，ruby 默认仍按横排逻辑渲染：拼音在字「上方」，但竖排的「上方」其实是右方——这会让拼音挤到字的右侧，破坏阅读流。
解决核心是两步：重定向 ruby 的书写方向 + 锁定注音位置。仅靠 writing-mode: vertical-rl 不够，必须配合 text-orientation: mixed 和 ruby-position: right（注意：不是 over）。
立即学习“前端免费学习笔记（深入）”；
-
ruby-position: right是关键，它让<rt></rt>显示在竖排文字的右侧（即传统朱丝栏内侧），符合古籍惯例 -
text-orientation: mixed确保汉字保持直立，拼音字符自动顺时针旋转 90°，无需额外 CSS 变换 - 避免用
transform: rotate()手动转拼音，会导致 line-height 计算异常和点击区域偏移 - 示例片段：
<div style="writing-mode: vertical-rl; text-orientation: mixed;"> <ruby>學<rt>xué</rt></ruby> <ruby>而<rt>ér</rt></ruby> <ruby>時<rt>shí</rt></ruby> <ruby>習<rt>xí</rt></ruby> <ruby>之<rt>zhī</rt></ruby> </div>
文言文夹注（双行小字）怎么用 ruby 实现
ruby 原生支持双行注音，但仅限「主字 + 上下两行注」结构，不适用于文言文中常见的「正文右列夹注」「字间小注」或「括号内训诂」。例如《论语》「君子务本，本立而道生。（包曰：务本，务本仁孝也。）」里的括号内容，不能塞进 <rt></rt>。
真实可用的方案只有两种：一是用 ruby + rb + rp 显式声明层级，二是放弃 ruby，用 span + font-size + position: relative 手动定位。前者语义正确但兼容性差（Safari 16.4+ 才稳定支持 rb），后者灵活但维护成本高。
- 标准双行写法：
<ruby> <rb>道</rb> <rp>（</rp><rt>dào</rt><rp>）</rp> </ruby>
—— 但注意rp内容在无 ruby 支持时会显示为括号，非理想 fallback - 更稳妥的做法是把夹注抽成独立
span，加 class 如class="annotation"，再用 CSS 控制字体大小、颜色和垂直对齐 - 切忌在
<rt></rt>里嵌套 HTML 标签（如<b></b>），多数浏览器会忽略或报解析警告
为什么 ruby 渲染的拼音在某些字体下声调错位
根本原因是中文字体与拉丁字体的 baseline 设计差异。宋体、思源宋体等中文默认字体对带声调拼音（如 nǐ）的 glyph 排布未做精细 hinting，导致声调符号（特别是 ˇ、ˋ）垂直位置浮动，尤其在小字号（
这不是 bug，而是字体本身的设计取舍。解决办法不是换浏览器，而是换字体栈或微调排版参数：
- 强制指定拼音字体：
rt { font-family: "Noto Sans SC", "PingFang SC", sans-serif; } - 用
text-rendering: optimizeLegibility提升子像素渲染精度（Chrome/Firefox 有效） - 对单个
<rt></rt>元素加vertical-align: top或baseline微调，但需逐字测试，无法批量生效 - 若用系统默认中易黑、微软雅黑，声调错位概率更高；优先选 Google Fonts 的
Noto Serif SC或Noto Sans SC
最易被忽略的一点：CSS 中 line-height 若设为无单位数值（如 line-height: 1.4），会放大字体 baseline 差异带来的错位感；建议对 ruby 容器单独设 line-height: normal，再用 padding 控制行距。
