<ruby>无法用于方言词典，因其仅支持单字对单注、不允许多层语义嵌套、不兼容多读音/多释义并存、无障碍支持差；应改用data-属性+aria-label方案实现灵活可控的标注。
直接用 <ruby> 标签做方言词典网页的注音/释义标注，行不通——浏览器对 ruby 的渲染逻辑是「单字对单注」，而方言词典里常见多字词对应一个发音（如“忒”读 tè，“忒好”整体读 tè hǎo，但“忒”在词中实际轻读为 te），或一个词需同时显示音标+方言义+普通话义，<ruby> 原生结构无法承载这种多层语义。
为什么 <ruby> 不能直接套用在方言词典上
标准 <ruby> 只支持一级嵌套：<rb>（基文）、<rt>（注音）、可选 <rp>（括号 fallback）。它不支持：
-
<rt>内再嵌套结构（比如把「[tʰə˥˩]｜很｜very」拆成三段并列显示） - 同一
<rb>对应多个<rt>（如“冰棍儿”需同时标北京话音、成都话音、闽南语音） - 注音与释义之间需要独立控制样式或交互（比如点击音标才展开释义）
- 搜索引擎和屏幕阅读器对嵌套
<ruby>的解析极不稳定，实测 Chrome 127+ 和 Safari 17.6 对<rt>内含<span>的语义识别基本失效
用 aria-label + data- 属性替代 <ruby> 的核心结构
放弃语义化标签换可控性。每个词条用普通 <span> 包裹基文，用 data- 存原始信息，靠 JS 渲染 UI，用 aria-label 保无障碍访问：
<span class="dialect-entry"
data-pinyin="tè hǎo"
data-wade="tʻê hao"
data-gloss="程度副词，相当于‘很’‘非常’"
data-english="very, extremely"
aria-label="忒好：tè hǎo，程度副词，相当于很、非常">忒好</span>
这样做的好处：
立即学习“前端免费学习笔记（深入）”；
- 所有方言变体可存在不同
data-属性中，互不干扰 - JS 可按用户选择的语言/地区动态注入对应注音块，不污染 HTML 结构
- CSS 能精确控制每个字段的字体、颜色、间距（比如音标用 IPA 字体，释义用等宽字体）
- 服务端可直接输出纯文本版（忽略
data-），兼容爬虫和离线阅读
当必须保留 <ruby> 时的最小妥协方案
如果 CMS 或合作方强制要求使用 <ruby>（如接入某方言语料平台 API），只能降级处理：每个词只取最常用读音，且仅用一个 <rt>，内容用竖线分隔，加空格对齐：
<ruby>忒好<rt>tè hǎo｜很｜very</rt></ruby>
但要注意：
- 绝对不要在
<rt>里写 HTML 标签，否则会破坏渲染流 - 移动端 Safari 对超过 2 行的
<rt>有截断 bug，建议限制在一行内（最多 12 个汉字+符号） - 若需支持语音朗读，必须额外加
aria-roledescription="pronunciation-and-meaning"，否则 VoiceOver 默认只读第一段 - 这种写法无法被词典类插件（如 Zhongwen、Perapera）正确提取音义对，属于权宜之计
真正难的不是怎么标，而是怎么让“同一个词在不同语境下有不同音义”这件事，在 HTML 层就有表达能力——<ruby> 的设计初衷是日文振假名，它从没打算处理汉语方言的语流音变、文白异读、语义分层问题。硬套只会让数据越来越难维护，越改越像补丁。
