ruby标签支持方言拼音标注，但必须用标准结构+显式语义；它不解析拼音内容，仅原样渲染rt中的字符串（如“sek6”“tâi-lô”），前提是字体支持对应Unicode字符。
ruby 标签是否支持方言拼音标注
支持，但必须用标准结构 + 显式语义，不能依赖浏览器自动识别方言规则。ruby 本身不解析拼音内容，只负责把 rt 内容按注音语义上标显示；你写「粤拼」、「台罗」或「吴语拼音」，它就原样渲染，前提是字体能显示那些字符（比如「jyut6」「tâi-lô」「ghoq」）。
常见错误是直接套用普通话拼音库输出方言音，结果声调符号错位、韵母缺失（如粤拼的6声调数字被当成普通数字排版），或用了非 Unicode 字符（如自定义符号代替ŋ）。正确做法是：确保拼音字符串为合法 UTF-8 编码，且所有音素、声调、变音符号都来自 Unicode 标准区块（如拉丁扩展-A/B、IPA 扩展等）。
- 粤语示例（用 Jyutping）：
<ruby>食<rt>sek6</rt></ruby>—— 数字声调必须紧贴韵母，不能加空格 - 闽南语示例（用 TLPA）：
<ruby>福<rt>hok</rt></ruby><ruby>建<rt>kian</rt></ruby>—— 不要合并成<rt>hok kian</rt>，否则对齐失效 - 避免用图片、SVG 或 CSS 伪元素模拟方言音标——屏幕阅读器无法朗读，搜索引擎无法索引
方言拼音与普通话拼音混排时的 DOM 结构陷阱
同一段文字里既有普通话又有方言标注（比如教材中对比读音），不能靠一个 ruby 包多个字再配不同 rt。浏览器只按 DOM 顺序一对一匹配，混排必须严格分层。
错误写法：<ruby>重<rt>chóng</rt><rt>zhòng</rt></ruby> —— 第二个 rt 会被忽略或错位到前一个字上。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 正确方式：每个读音独立
ruby，用 class 区分语种：<ruby class="mandarin">重<rt>chóng</rt></ruby><ruby class="cantonese">重<rt>zung6</rt></ruby> - 若需视觉并列（如上下两行：上普通话、下粤拼），用
ruby套rb+ 多个rt不可行；应改用display: grid容器包裹两个独立ruby块，并设ruby-position: over统一控制位置 - 注意 Safari 对连续多个
ruby的字间距处理偏大，可加font-size: 0父容器 + 子元素重设字号来收紧
方言注音在移动端和旧 WebView 中的实际兼容性
iOS Safari 渲染稳定，但 Android 旧版 WebView（≤ Android 7.1）基本不支持 ruby，会把 rt 当作普通内联文本平铺在字后，变成「食sek6」这种不可读形式。这不是样式问题，是解析层面缺失。
- 降级方案不是加
rp就够——rp只包裹括号，不解决拼音暴露问题；真正有效的是用 JS 检测支持性：typeof document.createElement('ruby').getBoundingClientRect === 'function'，不支持时替换为span+aria-label - 字体仍是最大瓶颈：Windows 默认字体不支持粤拼数字声调（如「6」常显示为方框），macOS 和 iOS 一般没问题；建议在 CSS 中指定后备：
font-family: "Noto Sans CJK SC", "PingFang TC", "Heiti TC", sans-serif; - 不要用
text-transform: uppercase或letter-spacing影响方言拼音——粤拼「gwong2」中的「2」是声调标识，不是字母，大小写转换会破坏语义
动态生成方言注音时最易忽略的编码细节
服务端用 Python/Node.js/Ruby 生成 HTML 时，如果拼音来自外部词典 API（比如 Cantonese Jyutping Dictionary），返回值常含不可见控制字符或 BOM，导致 rt 内容被截断或渲染异常。
- Python 示例：用
.strip()清除首尾空白，再用.encode('utf-8').decode('utf-8')强制标准化 Unicode 归一化（NFC） - Node.js 示例：用
String.prototype.normalize('NFC')处理带组合音标（如「ō」由 o + ◌̄ 组成）的拼音，否则某些安卓浏览器会显示两个分离字符 - Ruby 示例：避免用
CGI.escapeHTML转义整个rt字符串——它会把<变成，破坏标签结构；只对用户输入的汉字做转义，拼音字段保持原样插入
