支持，ruby标签是html5原生语义化标签，专为日语假名等注音设计，需严格嵌套rb与rt，多字词应按音节拆分并一一对应，避免整词包裹导致排版错位。
ruby 标签的基本结构是否支持日语假名标注
ruby 是 HTML5 原生支持的语义化标签，专为注音（如日语振假名、中文拼音）设计，浏览器原生解析，无需 JS 或 CSS 强制干预。它不是装饰性元素，而是有明确语义的内联结构：一个 rb（base text）配一个或多个 rt（ruby text），可选 rp（fallback parentheses）用于兼容老浏览器。
实际写法必须严格嵌套，常见错误是把 rt 放在 ruby 外、或漏掉 rb：
<ruby><rb>東京</rb><rt>とうきょう</rt></ruby>
注意：rb 和 rt 必须同级且都在 ruby 内；rp 是可选的，仅当需要向不支持 ruby 的浏览器（如 IE11）提供括号包裹的 fallback 时才加：
<ruby><rb>桜</rb><rp>(</rp><rt>さくら</rt><rp>)</rp></ruby>
多音节词与长句中标注对齐问题怎么处理
日语歌词常含多字词（如「思い出」），不能简单把整词塞进一个 rb 再配一个 rt —— 这会导致假名长度与汉字宽度严重不匹配，排版错位。正确做法是按音节/语义单位拆分，每个 rb 对应一个 rt：
- ✅ 推荐：逐字或按训读单位拆分，例如「想い出」→
<rb>想</rb><rt>おも</rt><rb>い</rb><rt>い</rt><rb>出</rb><rt>で</rt> - ❌ 避免：整词包成一个
rb，如<rb>思い出</rb><rt>おもいで</rt>，多数浏览器会拉伸或压缩假名，导致阅读困难 - ? 小技巧：用空格或零宽空格
分隔相邻ruby块，避免假名连在一起粘成一团
CSS 控制 ruby 显示效果的关键样式有哪些
默认情况下，rt 会显示在 rb 正上方（横排）或右方（竖排），但字体大小、行距、间距常需微调。重点控制三项：
-
ruby { ruby-align: center; }—— 让假名在汉字上方居中对齐（默认是 start，易偏左） -
rt { font-size: 75%; line-height: 1; }—— 缩小假名字号、收紧行高，避免撑开行距 -
rb, rt { letter-spacing: 0.05em; }—— 微调字间距，提升可读性（尤其对细体假名）
注意：不要给 ruby 设 display: inline-block 或强行设置高度，这会破坏内联流式布局，导致换行异常或截断。
移动端和旧版 Safari 对 ruby 的支持是否可靠
Chrome / Firefox / Edge（Chromium 内核）对 ruby 支持良好；但 Safari 直到 iOS 15.4 / macOS 12.3 才开始支持，且早期版本存在假名垂直偏移、rp 渲染异常等问题。若目标用户包含大量 iOS 14 及更早设备，建议：
- 用
@supports (ruby-align: center)做特性检测，降级为纯文本或图片标注 - 避免依赖
ruby-position: under（底部标注），Safari 对该值支持不稳定 - 测试真实设备：iOS 模拟器常比真机渲染更“理想”，务必在 iPhone 实机上验证对齐效果
最易被忽略的一点：ruby 不会自动换行断行，长歌词行若未设 white-space: normal 或容器宽度限制，可能溢出视口——得靠外层 p 或 div 控制最大宽度和换行策略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
