ruby元素专用于东亚文字发音注释，不适用于古文翻译；仅适合简体教材拼音标注或日韩影印本训读，复杂注释应采用css grid与语义化标签替代。
ruby 标签不是为古文翻译设计的
ruby 元素在 HTML5 规范中明确定义为「用于东亚文字的发音或语义注释」，核心使用场景是汉字 + 拼音（如 <ruby>漢<rt>hàn</rt></ruby>）或日文汉字 + ふりがな。它不支持竖排古籍常见的「夹注」「双行小注」「眉批」「旁训」等结构，也没有对「之乎者也」类虚词、通假字、异体字、训诂术语的语义建模能力。
强行用 ruby 做古文翻译，常见错误现象包括：
- 浏览器忽略嵌套
rt或多层ruby，只渲染最外层 - 换行/断词错乱，尤其遇到「曰：『……』」这类引号嵌套时
- 无法控制注文与正文的字号比例（
rt默认太小，且不能用em单位可靠缩放） - 屏幕阅读器将
rt内容读作「括号内补充说明」，而非独立译文，影响无障碍访问
真正能用 ruby 的古文场景只有两类
如果你手头是简体出版物级别的整理本（非影印、非稿本），且注释严格遵循「单字对单音、逐字标音」或「短句直译+位置固定」，ruby 才有实用价值：
-
小学教材级文言选段：比如《论语·学而》「学而时习之」，用
<ruby>学<rt>xué</rt></ruby><ruby>而<rt>ér</rt></ruby>…配拼音；或加简明白话：<ruby>学<rt>学习</rt></ruby> -
日韩汉籍影印本的现代排印版：如《群书治要》日藏抄本整理本，原文汉字 + 右侧小号平假名训读，此时
ruby+writing-mode: vertical-lr可模拟传统版式
注意：rp 标签在这里基本无用——现代浏览器全支持 ruby，加 rp 反而增加 DOM 节点和维护成本。
古文翻译更该用 CSS Grid 或自定义 data 属性
遇到需要「一句原文，两行译文（直译+意译）」、「某字下双注（读音+训释）」、「段末总评」等真实需求，硬套 ruby 会迅速失控。推荐做法：
- 用
<span class="gushi-annotation"></span>包裹注文，CSS 里用display: grid控制原文/注文垂直对齐 - 对通假字，用
data-original="蚤"+data-replace="早"，再靠 JS 渲染 hover 提示或点击展开 - 整段译文统一放在
<aside class="translation"></aside>，用aria-labelledby关联对应原文<p id="para-3"></p> - 若需打印，直接用 @media print { .gushi-annotation { font-size: 0.7em; } }
容易被忽略的兼容性细节
ruby 在 Safari 15.4+、Chrome 102+、Firefox 100+ 中表现一致，但以下两点常被跳过：
- IE 和旧版 Edge 完全不支持，且无法用 CSS fallback 模拟——必须检测
'ruby' in document.createElement('div')后降级为 inline parentheses -
rt元素默认 vertical-align 是text-top，但古籍排版要求注文底部与正文字基线对齐，需显式写rt { vertical-align: baseline; } - 移动端 Safari 对
writing-mode: vertical-lr+ruby的组合支持不稳定，测试时务必真机验证
真正做古籍数字化，别卡在标签语法上；先理清「谁读、为什么读、在哪读」，再选技术路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
