ruby标签仅用于注音（如拼音、假名），不支持笔画分解或笔顺动画；展示笔画需改用SVG、Canvas或专用库如hanzi-writer。
ruby 标签不是用来展示笔画的
直接说结论：ruby 标签只负责「注音」（如拼音、日文假名），不支持笔画分解或笔顺动画。想用它显示“横、竖、折”这类笔画信息，浏览器会忽略或渲染异常——因为 ruby 的语义和 DOM 结构根本不为此设计。
常见错误现象包括：rb 里塞 SVG 路径、用 rt 显示笔画名称但排版错位、试图用 rp 包裹笔画数导致括号乱跳。这些都不是规范用法，且在 Safari 和旧版 Edge 中尤其不可靠。
如果你看到某页面“用 ruby 展示了笔画”，大概率是：
- 实际用了
div+ CSS Grid 模拟 ruby 布局，ruby只是摆设 - 用 JavaScript 动态替换文本，把笔画拆成字符后套了
ruby，但语义失真、无障碍支持差 - 混淆了「汉字部件」和「笔画」——
ruby可以给整字标拼音，但不能逐笔标注
正确用法：只用 ruby 标注读音（拼音/假名）
ruby 的唯一标准用途是提供短小的发音辅助，比如给生僻字加拼音、给日文汉字加振假名。它的结构必须严格符合 ruby > rb + rt 或 ruby > rb + rp + rt + rp。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 拼音必须写在
rt里，不能放在rb或外面的span - 避免嵌套其他行内元素（如
strong、em）在rt中，部分屏幕阅读器会跳过 - 中文场景下，
rp（括号）通常可省略；但若需兼容 IE，可保留空rp防止显示异常 - 字体大小默认比正文小，可通过
ruby rt { font-size: 0.6em; }微调，但不要设为 0 或负值
示例（合规）：
<ruby> <rb>魑</rb> <rt>chī</rt> </ruby>
想展示笔画？换技术栈，别硬套 ruby
笔画属于「字形结构分析」，需要字符级控制、路径绘制或动态描摹，ruby 完全不具备这些能力。真实可行的方案有：
- 用
canvas或 SVG 加载预生成的笔顺数据（如《通用规范汉字表》笔顺 XML），逐笔绘制 - 使用开源库如
hanzi-writer（JS），它内部用 SVG 路径+CSS 动画实现，与ruby无关 - 服务端生成带笔画编号的 PNG/SVG，前端用
img或object嵌入 - 若只要静态笔画数，直接用 Unicode 笔画数属性（如 U+4E00 的
UnicodeData.txt记录为 1 画），但无法展示笔顺
注意：所有这些方案都绕不开「汉字字形数据源」——没有统一 API，得自己集成或调用第三方服务（如 OpenCC、HanLP、或商用 OCR 引擎的字形模块）。
兼容性与无障碍的真实现状
ruby 在现代 Chrome/Firefox/Edge 中基本可用，但 Safari 对 rb/rt 的垂直对齐仍有细微偏差；更麻烦的是，主流屏幕阅读器（NVDA、VoiceOver）对 ruby 的支持极弱——多数直接跳过 rt 内容，或把它跟 rb 连读成“魑chī”，失去注音本意。
所以即使你只做拼音标注，也得额外加 aria-label 或隐藏文本兜底：
<ruby aria-label="魑，读作 chī"> <rb>魑</rb> <rt>chī</rt> </ruby>
而一旦涉及笔画，无障碍就彻底失效：SVG 描摹无语义、canvas 无文本替代、动态 JS 渲染常被读屏器忽略。这点容易被忽略，但上线前必须验证。
