HTML的ruby标签仅提供基字与注音的一一对应语义结构，不支持跨字连读、音变等复杂假名标注；必须严格按DOM顺序逐字配对，配合rp标签实现降级兼容，并通过CSS微调位置与字号。
ruby标签本身不支持“复杂假名标注”这个概念
HTML 的 ruby 标签不是排版引擎，它只提供语义结构：一个基字（rb）对应一个注音单元（rt）。所谓“复杂”，比如跨字连读、促音小写、长音线、浊音符号位置微调、或一个假名对应多个汉字——这些都不是 ruby 能自动处理的。浏览器不会解析「っ」「ー」「゛」的语义，也不会根据上下文决定「は」读作「わ」。你写什么，它就显示什么。
多假名对一汉字或一假名对多汉字怎么写
必须严格按 DOM 顺序一一配对，不能靠视觉“看起来像”。常见错误是把整段假名塞进一个 rt，结果对齐错乱或被截断。
- ✅ 正确（一字一注）：
<ruby><rb>東</rb><rt>ひがし</rt></ruby><ruby><rb>京</rb><rt>きょう</rt></ruby> - ❌ 错误（两字共用一个
rt）：<ruby><rb>東</rb><rb>京</rb><rt>とうきょう</rt></ruby>—— 多数浏览器只给「京」标音 - ⚠️ 特殊情况（如「羽田空港」读作「はねだくうこう」）：仍需拆字，
<ruby><rb>羽</rb><rt>は</rt></ruby><ruby><rb>田</rb><rt>ね</rt></ruby>…，无法靠结构自动合并
CSS 微调假名位置和外观的关键点
默认渲染下，假名常偏高、偏左、字号不均。不靠 position: absolute，而是用标准属性压制差异：
- 强制统一上标位置：
ruby { ruby-position: over; }（Chrome 122+、Safari 17.4+ 支持） - 避免假名被压扁：
rt { line-height: 1; font-size: 0.65em; }，别用百分比值（如70%），各浏览器计算基准不同 - 小假名（っ、ゃ、ゅ、ょ）需要单独控制：
rt::first-letter { font-size: 0.5em; }不可靠，建议在字符串中显式插入 Unicode 小写假名（U+3063、U+3083 等），再用 class 控制 - 禁用
vertical-align: super—— 它会让假名相对于行高偏移，而非相对于汉字基线
rp 标签不是可选项，而是降级刚需
不加 rp，旧版 Safari 或某些邮件客户端会把假名直接平铺在汉字后面，变成「東ひがし京きょう」，完全不可读。正确结构必须包含括号包裹：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
<ruby> <rb>東</rb> <rp>(</rp> <rt>ひがし</rt> <rp>)</rp> </ruby>
注意：rp 必须嵌套在 rt 内部，且内容只能是纯括号字符（( ) [ ]），不能带空格或样式；否则部分安卓 WebView 会忽略整个 rt。
真正难的不是写对结构，而是接受：ruby 不负责“理解”日语，只负责“呈现”你明确指定的对应关系。所有连读、音变、缩略，都得人工拆解、硬编码。漏掉一个 rb，或错位一个 rt，整段假名就失去语义锚点，屏幕阅读器跳过，搜索引擎忽略，打印时错行——这些不是 bug，是规范本意。
