ruby标签仅适用于简短汉字/日文注音，无法实现古典排版；其结构强制rb/rt配对，浏览器支持残缺、样式控制力弱，多字注音错位、竖排定位等需求须用writing-mode、absolute定位等CSS方案替代。
ruby 标签在现代网页中无法可靠实现古典排版效果，它只适用于极窄的汉字/日文注音场景，且浏览器支持残缺、样式控制力极弱。
ruby 标签的真实用途和限制
HTML <ruby> 是为东亚文字「注音」设计的语义标签（如汉字上标假名、拼音），不是通用排版工具。它的结构强制要求 <rb>（基字）、<rt>（注音）、可选 <rp>（括号降级 fallback），浏览器仅按此语义渲染，不接受任意嵌套或换行控制。
常见误用现象：Uncaught DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this operation. —— 因为部分浏览器（如 Safari）拒绝在 <ruby> 内插入 <div> 或 <p> 等块级元素。
- Chrome 仅支持单行
<rb><rt>对，多字并列时注音会错位 - Firefox 对
display: flex在<ruby>上完全忽略 - Safari 不支持
ruby-position: under（即脚注式排版）
古典排版需求该用什么替代 ruby
所谓“古典排版”（如中文古籍的竖排旁注、西文 margin note、段首大写字下沉加装饰线）本质是「定位 + 叠层 + 字体控制」，<ruby> 既不能竖排，也不能控制注文位置或字体大小。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
实操建议：
- 竖排旁注：用
writing-mode: vertical-rl+position: absolute定位<aside>元素 - 段首大写下沉：用
::first-letter伪元素 +float: left+ 自定义字体 - 页边批注（margin note）：用
@media print规则配合margin-left和transform: rotate(-90deg) - 需要语义化注音？只在简短汉字+拼音/假名场景用
<ruby><rb>汉</rb><rt>hàn</rt></ruby>，并配<rp>(</rp><rt>hàn</rt><rp>)</rp>保底
兼容性差到什么程度？一个真实测试案例
以下代码在 Chrome 125、Firefox 127、Safari 17.5 中表现完全不同：
<ruby> <rb>诗</rb><rt>shī</rt> <rb>经</rb><rt>jīng</rt> </ruby>
结果：
- Chrome：两组注音挤在同一行顶部，「shījīng」连写无间隔
- Firefox：正确分组，但
<rt>字体强制缩小至 50%，无法用 CSS 覆盖 - Safari：直接忽略第二组
<rb><rt>，只显示「诗 shī」
想靠 <ruby> 实现《陶庵梦忆》式的双行小注或《天工开物》插图题跋？行不通。它连基本的字距、行高、对齐都锁死，更别说响应式缩放。
真正要复刻古典排版，得从 CSS writing-mode、@font-face 加载思源宋体/刻本字体、::before/::after 插入装饰符开始——<ruby> 只是语义占位符，不是排版引擎。
