<p>HTML 的 ruby 标签不支持多音字自动切换，需通过 JS 控制 data- 属性与 CSS 显隐来实现；应为每个字单独绑定事件，避免影响共存多音字，并兼顾屏幕阅读器与移动端长按交互。</p>
ruby 标签本身不支持多音字自动切换
HTML 的 ruby 是纯静态标注机制，它只负责把 rt（读音）贴在 rb（基字）上方，不感知语境、不响应用户交互、也不支持条件渲染。所谓“多音字灵活标注”，必须靠 JS 驱动 + CSS 控制显隐来模拟，ruby 仅作为 DOM 结构容器使用。
常见错误是直接写多个 rt 并指望浏览器自动选一个——这会导致所有读音堆叠显示，或被忽略（部分浏览器只取第一个 rt）。
实际做法是：为同一组字准备多套 ruby 结构，用 class 或 data-* 属性标记读音类型（如 data-tone="zhong1"），再通过 JS 切换可见状态。
用 data- 属性 + CSS 控制不同读音显隐
避免用 class 名硬编码读音（如 .zhong1），改用语义化 data- 属性，便于 JS 精准匹配和未来扩展。
立即学习“前端免费学习笔记（深入）”；
- 每个
ruby外层加data-hanzi="重"和data-default-tone="chong2" - 内部
rt标签带data-tone="chong2"或data-tone="zhong4" - CSS 默认隐藏所有
rt：ruby rt { visibility: hidden; } - 用
[data-tone="chong2"].active ~ rt[data-tone="chong2"] { visibility: visible; }这类选择器激活对应读音（注意：需配合 JS 切换.active所在元素）
JS 切换逻辑要绑定到具体字而非整段文本
用户点击“重”字时，应只影响这个字的读音标注，而不是整行或整个 ruby 区域。否则会破坏多音字共存场景（比如“重复”和“重要”出现在同一句中）。
推荐结构：
<ruby data-hanzi="重"> <rb>重</rb> <rt data-tone="chong2">chóng</rt> <rt data-tone="zhong4">zhòng</rt> </ruby>
JS 绑定事件时用 event.target.closest('ruby[data-hanzi]') 定位当前字，再基于用户选择设置 data-active-tone="chong2"，CSS 用属性选择器响应。
容易踩的坑：
- 用
innerHTML替换整个ruby—— 会丢失已绑定的事件监听器 - 没做防抖，连续点击触发多次重绘
- 未考虑屏幕阅读器兼容性：需同步更新
aria-label或用role="tooltip"辅助说明
移动端长按唤出读音菜单比点击更可靠
触摸设备上单纯 click 容易误触，且缺乏反馈。建议监听 touchstart + touchend 时间差，超过 500ms 触发长按，弹出含所有候选读音的 div 浮层。
浮层内容直接读取该 ruby 下所有 rt[data-tone] 的文本和属性值，无需额外维护映射表。
注意两点：
- 浮层需用
position: fixed并计算touch.clientY避免被虚拟键盘顶起 - 点击浮层选项后，除了切换显示，还要调用
speechSynthesis.speak()播放对应读音（需用户手势触发后才允许发声）
真正难的是语义判断——“重”在“重拾”里读 chong2，在“重量”里读 zhong4，这没法靠前端规则穷举，得依赖后端返回的上下文标注结果。前端只负责准确呈现和响应交互。
