ruby 标签必须与 rt 成对且 rt 为 ruby 直接子元素才生效，单独 ruby 无效；多字需拆分为独立 ruby-rb-rt 结构，须配 CSS 控制排版并用 rp 降级兼容。
ruby 标签必须配 rt 才能生效，单独写无效
浏览器根本不认 ruby 自身的语义，只把 rt 当作注音内容的唯一载体。写 <ruby>汉</ruby> 或 <ruby></ruby>，结果就是纯文本，拼音压根不出现。
常见错误包括：<ruby>汉</ruby><rt>hàn</rt>（rt 脱离 ruby）、<ruby>汉<rt>hàn</rt></ruby>（缺 rb，Safari 16.4+ 和部分安卓 WebView 会错位）。
-
rt必须是ruby的直接子元素，且紧贴在对应基字之后——中间不能有空格、换行或其它标签 - 现代浏览器要求显式用
rb包裹被注音字，别指望自动识别；<rb>汉</rb><rt>hàn</rt>是当前最稳妥结构 - 多音字如“长”，必须按上下文手动指定：
<ruby><rb>长</rb><rt>cháng</rt></ruby>vs<ruby><rb>长</rb><rt>zhǎng</rt></ruby>
多字必须逐字拆成独立 ruby，不能共用一个 rt
写 <ruby>汉字<rt>hàn zì</rt></ruby> 表面可能出效果，但风险极高：Firefox 可能压缩拼音、iOS Safari 容易断行错位、屏幕阅读器无法分别播报“汉”和“字”，CSS 也难以精准控制单个字的注音样式。
正确做法是每个字一层 ruby，并显式配对 rb 和 rt：
从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。
立即学习“前端免费学习笔记（深入）”；
<ruby><rb>汉</rb><rt>hàn</rt></ruby><ruby><rb>字</rb><rt>zì</rt></ruby>
- 地名如“重庆”必须拆：
<ruby><rb>重</rb><rt>chóng</rt></ruby><ruby><rb>庆</rb><rt>qìng</rt></ruby>，否则易误读为zhòng qìng - 数字/英文混排时（如「第123页」），同样要逐字包裹，避免窄屏下拼音与基字脱节
- 连续多个
ruby在 iOS Safari 上可能出现微小间距异常，可用父容器font-size: 0+ 子元素重设字号缓解
必须加 CSS 触发浏览器内置排版逻辑
不写 CSS，rt 在 Chrome 看着正常，在 Firefox 或旧 Edge 里可能压在文字上、没间距、甚至被裁掉——根本原因是不同引擎对 ruby 内联布局的 baseline 处理不一致。
- 给
ruby设line-height: 1.8（至少比汉字字号大 0.6），防止拼音贴底或重叠 - 重置基础字号：
ruby { font-size: 1em; }，再单独控制rt { font-size: 0.6em; line-height: 1; } - 加
white-space: nowrap到整个ruby组合外层，防换行破坏字-音对应关系 - 禁用
position: absolute、float或display: block，这些会切断语义和屏幕阅读器识别
导出 PDF 或服务端渲染时容易丢拼音
wkhtmltopdf、Puppeteer 或多数 headless 渲染器压根没实现 ruby 布局模块，导出后只剩汉字，rt 全丢。这不是 bug，是能力缺失。
服务端渲染时若拼音数据为空（比如接口没返回），务必避免输出空 <rt></rt>——部分屏幕阅读器会读出“空白注音”，造成干扰。
- 导出前需降级：用 JS 检测
document.createElement('ruby').supportsRuby（或简单判断getComputedStyle(document.body).rubyPosition是否存在），不支持时改用括号 fallback：汉(hàn) - 动态生成（Vue/React）优先封装组件，别用
v-html或dangerouslySetInnerHTML拼字符串，防 HTML 转义破坏结构 -
rp不是可选项，它是降级关键：老环境显示汉(hàn)，新环境隐藏括号只留拼音，必须成对且只含纯括号字符
