rp不能省略，因其在老浏览器（如ie8及更早）中提供括号fallback，使注音结构可读；现代浏览器则隐藏rp、仅渲染rt。

rp 和 rt 必须和 ruby 一起用，单独写没效果；不加 rp 在老浏览器里注音会直接“粘”在文字后面，根本看不出是注音。

为什么rp不能省略？

IE8 及更早版本完全忽略 ruby 和 rt，但会渲染 rp 里的内容。它的作用不是“显示括号”，而是告诉老浏览器：“这里本该有注音，但你看不见，至少让我把括号给你画出来”。

• 没 rp：HTML 解析器跳过 rt，ruby 内容变成纯文本拼接，比如 “汉Han字” 渲染为 “汉Han字”
• 有 rp：老浏览器只显示 rp 的内容（如 ( 和 )），形成 “汉(Han)字(zi)” 这种可读结构
• 现代浏览器会隐藏 rp 元素（默认 display: none），只按 ruby 布局渲染

rt 标签的写法陷阱

rt 必须严格嵌套在 ruby 内部，且每个需注音的字符/词组应配一个独立的 ruby 单元，不能跨字共用 rt。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

• ✅ 正确：<ruby>汉<rp>(</rp><rt>hàn</rt><rp>)</rp></ruby><ruby>字<rp>(</rp><rt>zì</rt><rp>)</rp></ruby>
• ❌ 错误：<ruby>汉字<rp>(</rp><rt>hàn zì</rt><rp>)</rp></ruby> —— 注音与字数不对应，语义断裂
• ⚠️ 注意：rt 里的文本默认垂直居中、字体较小，若要调整样式，需用 CSS 选择器 ruby rt，不能只写 rt

兼容 IE9 以下的底线方案

即使写了 rp，IE8 及更早仍无法识别 ruby 语义，必须靠 JavaScript 补全 DOM 行为或降级为 inline HTML 结构。

• html5shiv.js 可让 IE8 支持 ruby 标签名解析，但不提供样式或布局支持 —— 仍需手动加 CSS 模拟上标效果
• 最稳妥的降级写法是双层结构：<ruby class="fallback">汉<rp>(</rp><rt>hàn</rt><rp>)</rp></ruby>，再用 CSS 对 .fallback 类做 position: relative + top: -0.5em 模拟
• 别依赖 ruby 做关键信息传达 —— 屏幕阅读器对 ruby 支持依然参差，重要读音建议同时放在 aria-label 或正文括号内

真正容易被忽略的是：注音内容是否随字号缩放、是否影响行高、是否在打印样式中消失——这些都得靠实际测试，光看浏览器能否“显示括号”不代表语义可用。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！