ruby标签支持数字读音标注，需用rb显式包裹数字、rt提供拼音（如yī èr sān），并重置CSS（display:inline-table、font-size/line-height/vertical-align等）确保跨浏览器对齐；但屏幕阅读器默认不读rt内容，须额外添加aria-label或aria-describedby实现无障碍。
ruby 标签的基本结构是否支持数字读音标注
可以，ruby 标签本身不限制内容类型，数字和汉字一样能作为基文（rb 或 rt 的主体），但浏览器默认样式对纯数字的排版可能不理想——比如 rt（注音）容易紧贴数字底部，看起来像下标而非拼音。
常见错误是直接写：<ruby>123<rp>(</rp><rt>yī èr sān</rt><rp>)</rp></ruby>，结果注音挤在右下角、括号位置错乱，甚至被截断。
-
rp元素只在浏览器不支持ruby时显示括号，现代浏览器基本忽略它；若想视觉上加括号，应改用 CSS 或手动插入(/) - 数字作为基文时，建议用
rb显式包裹，避免部分旧版 Safari 对无rb的ruby解析异常 - 注音内容（
rt）推荐用空格分隔单字读音，如yī èr sān，而非连写yier san，便于语音朗读工具识别
如何让数字注音在 Chrome/Firefox/Safari 中对齐稳定
关键在重置默认 ruby 行内布局行为。各浏览器对 ruby 的基线处理不一致，尤其当基文是等宽数字时，rt 容易偏移。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
ruby添加display: inline-table，再为rb和rt设display: table-cell，强制表格式对齐 - 用
rt的line-height和vertical-align微调高度，例如vertical-align: 0.6em比默认更居中 - 避免对
ruby设置font-size，优先控制rb和rt的独立字号，比如rb { font-size: 1rem; } rt { font-size: 0.6rem; }
示例片段：
<style>
ruby { display: inline-table; }
rb, rt { display: table-cell; }
rb { font-size: 1rem; }
rt { font-size: 0.58rem; line-height: 1; vertical-align: 0.55em; }
</style>
<ruby><rb>404</rb><rt>sì líng sì</rt></ruby>aria-label 和 screen reader 是否能正确读出 ruby 注音
不能依赖 ruby 自动触发屏幕阅读器播报注音。NVDA、VoiceOver 等主流读屏工具目前**跳过 rt 内容**，仅朗读 rb 中的数字（如“404”），rt 的拼音完全静默。
如果需要无障碍支持，必须额外补充：
- 在
ruby外层加aria-label="sì líng sì"，覆盖原数字读法 - 或用
aria-describedby指向一个隐藏的<span id="hint" aria-hidden="true">sì líng sì</span>，同时确保该span不被视觉隐藏（仅aria-hidden） - 注意：不要把拼音塞进
title属性，移动端长按不会触发，且语义不符
ruby 标注数字时最常被忽略的兼容性细节
IE 完全不支持 ruby（包括 IE11），Edge Legacy 也仅部分支持；即使现代浏览器支持，ruby 在表单控件（如 input、button）内部会被忽略，无法嵌套使用。
真正落地时要权衡：
- 若目标用户含大量政务/银行类场景（IE 强依赖），应放弃
ruby，改用 CSS 伪元素 +data-*属性模拟注音 - 移动端 WebView（尤其安卓低版本 UC / QQ 浏览器）对
ruby的rt垂直居中支持不稳定，需加@supports (display: ruby)条件判断 - PDF 导出（如通过 print CSS）时，
ruby极大概率丢失注音层，需服务端预渲染或 fallback 图片
注音这事，浏览器渲染只是第一关，读屏、导出、降级路径都得单独验证——数字看着简单，反而比汉字更容易踩空。
