ruby 和 rt 标签需与 rb 组合使用才能正确渲染拼音，rb 标明被注音字、rt 提供注音，二者须一一对应且紧邻；多字注音应拆分为多个独立 ruby 结构，并通过 CSS 控制行高、字体大小和位置以确保跨浏览器一致性。
ruby 和 rt 标签不是“加拼音的快捷键”，而是语义容器组合
单独写 <rt>hàn</rt> 或 <ruby>汉字</ruby> 都不会渲染出拼音——浏览器只认 <ruby><rb>汉</rb><rt>hàn</rt></ruby> 这个完整结构。其中 rb 是必须的，它明确标出“被注音的基字”，rt 是注音内容，二者必须一一对应、紧邻出现。
常见错误现象：
- 写成
<ruby>汉<rt>hàn</rt></ruby>：缺少rb，Chrome 可能勉强显示，Firefox 直接忽略rt，拼音平铺在汉字后面 - 写成
<ruby><rb>重庆</rb><rt>chóng qìng</rt></ruby>：两个字共用一个rb，拼音容易挤在一起、换行错位，且无法单独控制每个字的声调位置
多字注音必须拆成多个 ruby + rb + rt 组合
“长”字有 cháng / zhǎng / zhàng 三音，“重庆”的“重”读 chóng 不是 zhòng——ruby 不会自动选音，也不理解上下文。你得自己按字粒度控制，否则排版和语义都会出问题。
实操建议：
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 每个汉字独立套一层：
<ruby><rb>重</rb><rt>chóng</rt></ruby><ruby><rb>庆</rb><rt>qìng</rt></ruby> - 避免在
rb里塞空格、全角顿号或括号；如需分隔，用零宽空格 - 英文/数字混排时（如“第123页”），给数字部分也加
ruby：<ruby><rb>第</rb><rt>dì</rt></ruby><ruby><rb>123</rb><rt>yī èr sān</rt></ruby>，再配合white-space: nowrap防断行脱节
浏览器渲染不一致？靠 CSS 强制对齐，别信默认值
Chrome 默认把 rt 渲染在汉字正上方，Firefox 可能压底、Safari 行高异常——这不是 bug，是各引擎对 ruby 内联布局 baseline 的实现差异。
关键样式设置：
-
ruby { line-height: 1.8; font-size: 1em; }：撑开行高，防止拼音贴底或重叠 -
rt { font-size: 0.6em; line-height: 1; ruby-position: over; }：显式声明位置，禁用浏览器默认缩放逻辑 - 避免用
margin-top: -0.5em拉高拼音：字体缩放、字号变化时极易偏移失准
导出 PDF 或兼容旧环境时，ruby 会直接消失
wkhtmltopdf、Puppeteer、多数打印预览，以及 IE11 或 Android 4.x WebView，根本不解析 rt 标签。它们不是“渲染不好”，而是压根没实现 ruby 布局模块。
应对方式：
- 导出前用 JS 遍历所有
ruby，生成降级文本：汉(hàn)，再替换 DOM - Vue/React 动态渲染时，别用
v-html或dangerouslySetInnerHTML拼字符串——char含&或<div> 会导致结构断裂；改用组件封装：<code><rubytext char="汉" pinyin="hàn"></rubytext> -
rp标签现在基本不用了（IE 已淘汰），但如果你真要兼容极老环境，格式只能是：<rp>(</rp><rt>hàn</rt><rp>)</rp>
真正难的不是写对标签，而是让拼音在不同设备、不同字号、不同导出场景下始终对得上位置——这需要你主动控制 line-height、font-size、white-space，而不是依赖浏览器“应该会做好”。
