HTML中ruby标签的多种拼音对齐方式探讨-html教程-PHP中文网

现代浏览器必须显式使用与一一配对，缺则失去语义锚点，导致拼音平铺而非上标对齐；firefox、edge 120+及safari 17.4+严格遵循此规范，chrome/safari仅宽容处理。

html中ruby标签的多种拼音对齐方式探讨

现代浏览器只认 <rb></rb> + <rt></rt> 的显式配对结构，不写 <rb></rb> 就没有上标对齐——这不是样式问题，是语义缺失导致的降级渲染。

为什么写了 `<ruby></ruby>` 和 `<rt></rt>` 却没对齐

核心原因是没写 <rb></rb>。Chrome 和 Safari 会宽容地把 <ruby></ruby> 内非 <rt></rt> 的文本自动当 <rb></rb> 处理，但 Firefox、Edge（120+）、新版 Safari（17.4+）严格遵循 HTML 规范：没有 <rb></rb>，<rt></rt> 就失去锚点，直接平铺在汉字右侧，甚至被截断。

<ruby>汉<rt>hàn</rt></ruby> → 错误：缺 <rb></rb>，Firefox 中显示为“汉hàn”
<ruby><rb>汉</rb><rt>hàn</rt></ruby> → 正确：所有主流浏览器均触发上标对齐
多字必须逐字拆开：<ruby><rb>重</rb><rt>chóng</rt></ruby><ruby><rb>庆</rb><rt>qìng</rt></ruby>，不能合在一个 <ruby></ruby> 里共用 <rt></rt>

`ruby-position: over` 和 `margin-top` 哪个更可靠

ruby-position: over 是唯一跨浏览器稳定的对齐控制方式；用 margin-top 或 position: relative 拉高 <rt></rt> 会在缩放、换字体、打印时彻底失效。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

rt { ruby-position: over; } → 浏览器原生理解“注音应位于基字正上方”，缩放时自动重算位置
rt { margin-top: -0.6em; } → 字号从 16px 改成 20px 后偏移量就错，打印预览中常完全脱节
部分旧版 Safari 对连续多个 <ruby></ruby> 的 baseline 对齐有轻微偏移，此时加 ruby { line-height: 1.8; } 比调 margin 更治本

繁体字、数字、英文混排时怎么保持对齐

所有字符都得进 <rb></rb>，不能只挑汉字处理——否则结构断裂，后续 <rt></rt> 会错位或被忽略。

繁体字如「臺」「灣」需确保字体支持 Unicode 注音符号（U+3105–U+312F），否则显示方块：用 <ruby><rb>臺</rb><rt>ㄊㄞ</rt></ruby>
数字和英文也得包裹：<ruby><rb>第</rb><rt>dì</rt></ruby><ruby><rb>123</rb><rt>yī èr sān</rt></ruby>
混排时加 white-space: nowrap; 防止 <ruby></ruby> 在空格处断行，导致拼音与基字分离

导出 PDF 或邮件客户端里拼音消失怎么办

wkhtmltopdf、Puppeteer、Outlook 等环境根本不解析 <rt></rt>，不是渲染 bug，是模块未实现。必须提前降级为可读文本。

导出前运行 JS 替换：document.querySelectorAll('ruby').forEach(r => { const rb = r.querySelector('rb'); const rt = r.querySelector('rt'); if (rb && rt) r.replaceWith(`${rb.textContent}(${rt.textContent})`); });
别用 visibility: hidden 或 display: none 隐藏 <rt></rt>——这会让屏幕阅读器也跳过拼音
<rp></rp> 只在 IE11 或老旧 WebView 中起作用，现代项目可省，但若保留，必须严格嵌套：<rt><rp>(</rp>hàn<rp>)</rp></rt>

最容易被忽略的是：所有非汉字字符（包括空格、emoji、全角顿号）都得参与 <rb></rb> 包裹，否则整段注音链就断了；另外，<rb></rb> 不是可选语法糖，而是现代浏览器触发拼音排版的硬性前提。