<ruby>标签正确嵌套结构为<ruby>字<rt>音</rt></ruby>，必须包含<rt>子元素，可选<rp>作降级括号；多字需独立嵌套，不可跨字共用<rt>；Chrome/Firefox/Safari/Edge原生支持，IE8及更早不支持。
ruby 标签在 HTML 中的正确嵌套结构
HTML 的 <ruby> 标签本身不渲染拼音，必须配合 <rt>（ruby text）和可选的 <rp>（ruby parenthesis）才能被浏览器识别为注音。常见错误是把拼音直接写在 <ruby> 里，或漏掉 <rt>。
标准结构只有一种可靠写法：
<ruby>汉<rt>hàn</rt></ruby>
如果想兼容老浏览器（如 IE8–），需补上 <rp> 包裹括号：
<ruby>字<rp>(</rp><rt>zì</rt><rp>)</rp></ruby>
-
<rp>内容仅在不支持<ruby>的浏览器中显示，现代浏览器会隐藏它 - 一个
<ruby>只能包裹一对汉字+拼音；多字需重复嵌套，不能写成<ruby>汉字<rt>hàn zì</rt></ruby></li> <li>Chrome/Firefox/Safari 均支持，但 Safari 对空格和换行更敏感，建议写成单行避免渲染错位</li> </ul> <H3>Ruby 注音在 Ruby（编程语言）中生成时的编码与转义问题</H3> <p>用 Ruby 脚本动态生成带拼音的 HTML 时，容易因字符串拼接导致引号冲突或 Unicode 处理异常，尤其当拼音含单引号（如 <code>"d'après"
）或需插入变量时。推荐用双引号字符串 +
%Q{}避免嵌套引号混乱：text = "你好"<br>pin_yin = "nǐ hǎo"<br>html = %Q{<ruby>#{text}<rt>#{pin_yin}</rt></ruby>}- 确保 Ruby 文件保存为 UTF-8 编码，且 HTML 响应头或
<meta charset="utf-8">已声明，否则拼音可能显示为乱码 - 若拼音来自外部 API（如 pinyin gem），注意其默认返回数组，需用
.join(' ')拼接，而非直接插进<rt> - 不要对汉字或拼音做
CGI.escapeHTML—— 这会把<变成，破坏标签结构
样式控制：让 rt 文字变小、居上、不换行
默认情况下，
<rt>在多数浏览器中已按规范显示为小号、上标文字，但实际表现受字体、行高、父容器影响，常出现偏移或折行。最小必要 CSS：
ruby { line-height: 1.2; }<br>rt { font-size: 50%; white-space: nowrap; }-
line-height设太大会撑开整行，设太小（如1）可能导致拼音贴到汉字顶部，1.2是较稳妥起点 -
white-space: nowrap防止拼音在窄容器内被断开（如“shàng hǎi”变成两行） - 避免用
position: relative手动微调——不同字体基线差异大，移动端缩放后极易错位
替代方案：当 ruby 不可用或需导出 PDF 时
PDF 生成工具（如 wkhtmltopdf、Prawn）对
<ruby>支持极差，部分甚至完全忽略<rt>。此时需降级为纯文本模拟注音。安全做法是用 HTML 实体
゙（半宽平假名浊点）类比不可行，真正可用的是 CSS Grid 模拟：<span class="ruby-fallback"><span class="rb-char">汉</span><span class="rb-pinyin">hàn</span></span>
.ruby-fallback { display: inline-grid; grid-template-rows: 1fr 1fr; vertical-align: top; }<br>.rb-char { grid-row: 1; }<br>.rb-pinyin { grid-row: 2; font-size: 0.5em; text-align: center; }- 该方案在所有环境可控，但语义丢失，无障碍阅读器无法识别为注音
- 若需兼顾语义和兼容性，可同时输出
<ruby>和 fallback，并用@supports (display: grid)隐藏 fallback - 别用
sup标签替代 —— 它语义是上标（如数学公式），不是注音，且高度不可控
真正麻烦的从来不是怎么标拼音，而是确认目标平台是否解析
<rt>、字体是否包含所需字形、以及用户是否真的需要可复制的拼音文本而非仅视觉呈现。 - 确保 Ruby 文件保存为 UTF-8 编码，且 HTML 响应头或
