Ruby标签在日语教学课件中必须严格采用「字/词级rb+rt」结构，rb需显式包裹每个被注音汉字或词，rt仅含纯假名且禁用空格与HTML实体，多音字须人工拆解并用class区分，移动端需处理Safari间距问题。
ruby 标签在日语教学课件中能用，但必须严格按「字/词级 rb + rt」结构组织，否则 Safari 会错位、Chrome 可能忽略、屏幕阅读器完全跳过注音——它不是视觉装饰工具，而是语义锚点。
rb 必须显式包裹每个被注假名的汉字或词
很多人写 <ruby>東京<rt>とうきょう</rt></ruby>，结果“東”没标上、“京”标双份。浏览器只把 <rt> 绑定到最后一个文本节点（即“京”），前面的“東”失去基点。正确做法是每个字或词单独配 <rb>：
<ruby><rb>東</rb><rt>とう</rt></ruby><ruby><rb>京</rb><rt>きょう</rt></ruby>- 词级标注也需显式
<rb>：<ruby><rb>赤提灯</rb><rt>あかちょうちん</rt></ruby>（非<ruby>赤提灯<rt>あかちょうちん</rt></ruby>） - 省略
<rb>在 Safari 17+ 和 Chrome 120+ 中已基本不渲染<rt>，仅 Firefox 偶尔降级显示
rt 内容必须是纯假名，禁用空格与 HTML 实体
日语训读或音读常含长音符号（ー）、促音（っ）、拗音（ゃゅょ）等，这些是 Unicode 字符，直接写即可；但若混入空格或 ，会导致 Safari 垂直对齐偏移、Android WebView 截断：
- ✅ 正确：
<rt>はなび</rt>、<rt>おおさか</rt>、<rt>きゃく</rt> - ❌ 错误：
<rt>はな び</rt>（空格导致两段假名错位）、<rt>おお</rt>（实体编码可能不解析） - 注意「々」「ゝ」「ヽ」等重复符号需确认字体支持，macOS 的
PingFang JP支持良好，Windows 的Meiryo部分缺失
多音字与训读/音读切换必须人工拆解
ruby 不识别上下文，不会自动选「行」读こう还是ぎょう、「上」读じょう还是しょう。教学课件中若需对比展示，必须手动分层并加 class 区分：
立即学习“前端免费学习笔记（深入）”；
-
<ruby class="on"><rb>行</rb><rt>こう</rt></ruby>（音读） -
<ruby class="kun"><rb>行</rb><rt>おこな</rt></ruby>（训读，注意「な」是活用部分，常需额外说明） - 避免用 JS 动态切换
<rt>内容——DOM 替换后，Safari 可能不重绘位置，且屏幕阅读器无法感知变更 - 若需高亮某读音，用 CSS 控制
ruby.on rt而非修改结构，否则破坏语义顺序
移动端 Safari 对连续 ruby 的间距控制极敏感
iOS Safari 默认给每个 <ruby> 加约 0.15em 水平外边距，连写五个字时易撑出容器或换行异常。这不是 bug，是其内联布局引擎对 ruby 元素的固有处理：
- 修复方式：父容器设
font-size: 0;，再为<ruby>单独设font-size: 16px;，消除空白间隙 - 禁用
letter-spacing或word-spacing在<ruby>上——会放大错位幅度 - 测试重点：在 iOS 17.6 Safari 中长按文字，确认仅选中汉字（不带假名）；若假名也被选中，说明结构被破坏或
<rt>脱离了语义流
最易被忽略的是：ruby 的语义终点在 <rt> 关闭标签处，任何后续空格、换行、注释都会让 Safari 认为基文结束，导致下一个 <rt> 失去绑定目标——所以课件中所有 <ruby> 块必须紧贴书写，中间不能有回车或制表符。
