日语注音必须逐字用 ruby 包裹，每个汉字配独立 rt；需显式使用 rb 标签包裹基字，rb 必须为 ruby 直接子元素；禁用动态拼接含 HTML 实体的字符串。
必须逐字用 ruby 包裹汉字，每个汉字配一个 rt，不能单词级合并；否则假名错位、语音规则失效、屏幕阅读器无法正确播报。
日语假名标注必须逐字拆开，不能一个 ruby 覆盖多个汉字
浏览器不会自动切分词，也不会识别连浊（如「日本」读にほん而非にっぽん）或促音（如「学校」的っ）。如果写成 <ruby>日本<rt>にほん</rt></ruby>，两个汉字共用一个 rt，会导致：
- 小字号假名在窄屏下挤在一起，声调符号（如は行的゛）错位或被裁剪
- iOS Safari 渲染时可能把「ほん」整体右移，尤其遇到长音符「ー」时更明显
- 屏幕阅读器朗读为“にほん”，无法区分「日」和「本」各自的发音
正确写法是显式拆开：<ruby>日<rt>に</rt></ruby><ruby>本<rt>ほん</rt></ruby>。每个 ruby 块只含一个基字 + 一个 rt，语义清晰、对齐可控。
rb 标签不是可选，而是现代浏览器稳定渲染的必要结构
省略 rb（比如直接写 <ruby>東<rt>とう</rt></ruby>）在 Chrome 最新版中可能侥幸显示，但在 Safari 17.4+ 和部分 Android WebView 中会降级为普通文本，假名贴在字右侧甚至不渲染。
立即学习“前端免费学习笔记（深入）”；
- 必须显式包裹基字：
<ruby><rb>東</rb><rt>とう</rt></ruby> -
rb必须是ruby的直接子元素，中间不能有空格、换行或span等标签 - 若用 Vue/React 动态生成，避免用
v-html或dangerouslySetInnerHTML拼接字符串——汉字含&或会破坏 DOM 结构
字体、编码与 rp 的实际取舍
日文假名对字体和编码极其敏感，rp 在绝大多数现代项目中可以安全省略。
- 务必声明
<meta charset="utf-8">，服务端响应头也需设为Content-Type: text/html; charset=utf-8 - 字体推荐
Noto Sans CJK JP或Source Han Sans JP；避免依赖系统默认字体（如 macOS 的 Hiragino），Safari 和 Chrome 渲染宽度差异大 -
rp仅在 IE ≤10 或旧版 Outlook 中生效，现代项目加了反而增加 DOM 复杂度；iOS Safari 对rp支持极弱，括号常不显示 - 真要兼容老环境，用 JS 检测：
document.createElement('ruby').tagName === 'RUBY'，不支持则 fallback 为「東京(とうきょう)」格式
CSS 控制假名位置时，只用 ruby-position 和 font-size
别碰 vertical-align、top 或 transform——这些会绕过 ruby 布局模型，导致缩放错位、换行脱节、朗读顺序混乱。
- 强制上标位置：
ruby { ruby-position: over; }（横排默认值，但显式声明更稳） - 统一注音字号：
rt { font-size: 0.6em; line-height: 1; }，避免用像素值（如12px）导致缩放失准 - 禁用
rt { display: block; }或width设置——这会破坏浏览器自动收缩逻辑 - 连续多个
ruby在 iOS 上可能出现微小间距异常，可用父容器font-size: 0;+ 子元素重设缓解
最麻烦的从来不是标签怎么写，而是「行」在「行動」里读こう、「行う」里读おこなう——ruby 不帮你判断训读还是音读，所有语音规则都得人工查证后填进去。
