标签需配合使用，如汉hàn，不可单独用或省略；多字须各自包裹，拼音须手动填写，不支持自动识别。
ruby 标签怎么给汉字加拼音？
直接用 <ruby></ruby> 标签就能实现，但必须严格遵循「汉字 + <rt></rt> 拼音」的嵌套结构，浏览器才识别为注音。常见错误是把拼音写在 <ruby></ruby> 外面，或漏掉 <rt></rt>。
正确写法示例：
<ruby>汉<rt>hàn</rt></ruby><ruby>字<rt>zì</rt></ruby>
-
<ruby></ruby>只包裹单个汉字或词，不建议跨字共用一个<rt></rt>（如<ruby>汉字<rt>hàn zì</rt></ruby>渲染效果差且语义不清） - 拼音用拉丁字母小写，不带声调符号也能显示，但推荐加上（如
hàn），否则可读性下降 - 部分旧版 Safari 对多字连续
<ruby></ruby>的行内对齐有轻微偏移，需配合ruby-position: over重置（仅当实际排版错位时才加）
中文文本批量加拼音，Ruby 能自动处理吗？
不能。<ruby></ruby> 是纯标记，不解析汉字、不调用拼音引擎。所有 <rt></rt> 内容必须手动填写或由后端/脚本预先生成。
常见做法是：用 Ruby（编程语言）、Python 或 JS 先调用拼音库（如 pypinyin、ruby-china/pinyin）生成带 <rt></rt> 的 HTML 片段，再插入页面。
- 前端 JS 方案：加载
pinyin-pro库后，对指定元素执行pinyin.convertToRuby()类方法（注意不是原生 DOM 方法） - Ruby 后端方案：用
gemoji不行，得用pinyingem，例如Pinyin.t('汉字')返回"han4 zi4"，还需自己转成带声调的小写并包裹<rt></rt> - 别指望 CSS 或
content伪元素动态加拼音——没有标准 API 支持汉字到拼音的映射
移动端和屏幕阅读器对 ruby 的支持如何？
现代 Android Chrome、iOS Safari 基本支持渲染，但屏幕阅读器（如 VoiceOver、TalkBack）是否朗读 <rt></rt> 内容，取决于具体版本和设置。实测 iOS 17+ VoiceOver 默认跳过 <rt></rt>，需手动开启「语音反馈 > 注音朗读」选项。
- 无障碍关键点：必须同时提供
<rp></rp>包裹括号（如<rp>(</rp><rt>hàn</rt><rp>)</rp>），否则不支持 ruby 的老设备会把拼音直接连在汉字后面显示（如「汉hàn字zì」） - 不要用
<ruby></ruby>替代 ARIA label 做可访问性兜底——它不是语义化替代方案，只是视觉辅助 - 微信内置浏览器（X5 内核）对
ruby支持不稳定，某些安卓机型会忽略<rt></rt>样式，建议降级为 inline-block 模拟（如汉字设position: relative，拼音用绝对定位）
ruby 标签会影响 SEO 或文本提取吗？
不影响索引，但影响纯文本提取逻辑。搜索引擎能正确分离汉字主体和 <rt></rt> 内容；但 Python 的 BeautifulSoup.get_text() 默认会把 <rt></rt> 文本一并抓下来，导致「汉字hàn字zì」这种结果。
- 爬虫清洗时需显式过滤
rt标签：soup.find_all('rt')→.decompose() - 服务端 SSR 渲染时，若用 Node.js 的
jsdom提取正文，也要注意默认行为是否保留<rt></rt> - PDF 导出工具（如 Puppeteer）可能完全忽略
<ruby></ruby>样式，拼音不显示——这不是 bug，是多数 PDF 引擎未实现 ruby 渲染规范
实际用起来最麻烦的不是写法，而是拼音数据源的准确性。同一个汉字在不同词里读音可能不同（如「长」在「长度」读 cháng，在「成长」读 zhǎng），而 <ruby></ruby> 本身不带上下文感知能力，全靠人工校验或引入分词+多音字词典。
