ruby标签可凑合用于化学方程式注释，但仅解决位置偏移和字号缩放，不表达化学语义，且存在渲染偏差、兼容性差、可访问性弱等问题，适合轻量fallback而非专业排版。
ruby 标签不是为化学方程式设计的，但能凑合用
ruby 标签本意是标注东亚文字的读音（比如汉字上标拼音），浏览器对它的语义支持和渲染逻辑都围绕「小号、居中、紧贴基线」展开。化学方程式里的注释——比如反应条件「Δ」「浓H₂SO₄」写在箭头上方，或离子电荷「Ca²⁺」中的上标数字——本质是**位置偏移 + 字号缩放 + 语义弱关联**。ruby 能解决前两点，但不表达化学含义，搜索引擎、屏幕阅读器也不会识别这是反应条件。
怎么用 ruby 给反应箭头加条件注释
常见写法是把 → 或 → 当作 rb（基础文本），把条件当作 rt（注释文本）：
<ruby>→<rt>浓H₂SO₄, 170℃</rt></ruby>
这样渲染出来，「浓H₂SO₄, 170℃」会以小号字体出现在箭头正上方。但要注意几个实际问题：
-
rt默认垂直对齐方式是text-top，在 Firefox 中可能略偏高，Chrome 较居中；如需微调，得用ruby的 CSS 属性（如ruby-align: center），但兼容性有限 - 如果条件含下标（如
H₂SO₄），必须确保页面已声明<meta charset="UTF-8">，否则可能乱码 - 别嵌套
sub或sup到rt里——部分旧版 Safari 会忽略其样式，直接显示为普通文本
ruby 和 sup/sub 混用时的排版冲突
想在一个式子里同时有电荷上标（Fe³⁺）和反应条件（ruby 注释），容易出错。例如：
立即学习“前端免费学习笔记（深入）”；
<ruby>Fe<sup>3+</sup><rt>氧化剂</rt></ruby>
这会导致 rt 相对于整个 Fe³⁺ 块定位，而不是仅对 Fe。正确做法是把基线内容严格限定为单个字符或紧凑组合：
- 电荷用原生
sup：写成Fe<sup>3+</sup>，单独处理 - 条件注释只包裹箭头或反应物名称：比如
<ruby>KMnO₄<rt>酸性</rt></ruby>，而非包裹带sub的整个分子式 - 若真要给分子式整体加注，先用
span包裹再套ruby，并设display: inline-block防止换行错位
移动端和可访问性的现实妥协
手机上看 ruby 注释常被压缩得难以辨认，尤其当条件文字稍长（如「光照、无水AlCl₃催化」）。此时建议：
- 用媒体查询降级：在
@media (max-width: 480px)中隐藏rt，改用title属性提供悬停提示 - 对屏幕阅读器用户，
ruby内容默认会被朗读，但顺序是「先rb后rt」，可能造成「箭头 浓H₂SO₄, 170℃」这种非自然语序；可在rt上加aria-label显式说明作用，例如<rt aria-label="反应条件">... - 真正需要语义化和高保真渲染的场景（比如教学平台、论文发布），应优先考虑 MathML 或 KaTeX 渲染化学式，
ruby只作为轻量 fallback 方案
别指望 ruby 能替代专业化学排版工具；它只是 HTML 里一个顺手的“胶带”，粘得住，但拉力有限。
