最稳妥用ruby标签，因其专为东亚注解设计且语义明确——需严格遵循<ruby><rb>主文</rb><rt>注文</rt></ruby>结构，配合rt { font-size: 0.6em; line-height: 1; }实现紧凑双行效果。
双行注解在HTML里用什么标签最稳妥
古文排版里的双行注解（比如正文一行、小字注释紧贴其下并左右对齐），本质是「一对主文 + 附属注文」的垂直对齐关系。HTML原生没有ruby以外的语义化标签能表达这种结构，而ruby正是为东亚注音/注解设计的——它支持rb（基文）、rt（注文）、rp（括号fallback）三类子元素，浏览器默认渲染为上下叠排，且能通过CSS控制间距和字体大小。
不推荐用div+绝对定位或table模拟：前者脱离语义、屏幕阅读器无法识别注解归属；后者在响应式场景下容易错位，且table语义与注解无关。
关键点：
-
ruby必须包裹完整的注解单元，不能跨字切分（比如“之”字带注，就得<ruby><rb>之</rb><rt>代词，指代前文</rt></ruby>） - 单个
ruby块内只能有一个rb和一个rt，多字共用一注时需多个ruby并列（如“孟子见梁惠王”每字独立注，就写6个ruby） - 现代浏览器（Chrome 100+、Firefox 95+、Safari 16.4+）对
ruby支持良好，但IE全系不支持，需确认目标用户环境
怎么让注文变小、居中、不撑高行距
默认ruby的rt会继承父级字号，且上下留白较大。要贴近传统雕版注文效果，得用CSS压窄：
直接在rt上设样式：
rt {
font-size: 0.6em;
line-height: 1;
letter-spacing: 0.02em;
}
重点说明：
-
font-size建议用em而非px，避免正文缩放时注文失比 -
line-height: 1消除rt内部行高冗余，否则小字会额外顶高 - 若注文过长换行，加
white-space: nowrap强制单行（古籍注文通常简短，换行反而破坏节奏） - 不要用
vertical-align调位置——ruby的对齐逻辑由浏览器内置，乱调易导致不同引擎渲染不一致
遇到“注文被截断”或“上下错位”怎么办
常见现象：注文文字显示不全，或rt飘到右侧、悬空、甚至跑到下一行。
根本原因通常是父容器设置了overflow: hidden或line-height过小，挤压了ruby的内部布局空间。
立即学习“前端免费学习笔记（深入）”；
- 检查外层
p或div是否设了overflow: hidden——删掉，或改用overflow: visible - 把正文所在容器的
line-height设为至少1.8（比如正文16px时，line-height: 1.8≈28.8px，足够容纳基文+注文） - 避免给
ruby本身设display: inline-block或width，这会破坏其内联流式行为 - 如果用了Web字体，确保
@font-face加载完成后再渲染——未加载时浏览器按默认字体度量，可能导致rt定位偏移
繁体字、异体字和特殊符号怎么处理
古籍常含U+3000全角空格、U+25CB○圈号、U+2026……省略号等，这些字符在ruby里照常使用，但要注意两点：
一是字体兼容性：
- 指定
font-family时，把支持CJK扩展区的字体放前面，例如"Noto Serif CJK TC", "Source Han Serif SC", serif - 避免用仅含简体字形的字体（如某些“思源黑体简体”变体），否则繁体字会 fallback 成方框
二是语义清晰性：
- 注文中出现的引号、书名号尽量用中文全角符号（
「」『』），别混用英文半角 - 如果注文含校勘记号（如“【校】作‘某’”），建议用
span class="note"包裹，再单独设色或加边框，别塞进rt——rt只负责语音/释义类短注
ruby标签的语义价值远大于视觉效果，一旦结构写错，后续所有CSS调整都是徒劳。最容易被忽略的是：每个字的注解必须独立闭合，漏掉一个/ruby，后面整段都会错位。 
