html的ruby标签在vertical-rl下默认将rt置于基字正右方且横向铺开，无法实现中文竖排所需的紧凑右侧小字效果；需用inline-flex模拟布局，并为safari等浏览器降级处理。
ruby在writing-mode: vertical-rl下默认往右排，不是你想要的“字旁小字”
HTML 的 ruby 标签在竖排时不会自动把 rt 挤到汉字右侧——它默认走的是「竖排注音逻辑」：基字垂直排列，rt 出现在基字**正右方**（即物理右侧），且按字符宽度横向铺开。这跟日文竖排中「振り仮名」常出现在左/右外侧、或中文古籍里「直角小字」贴着字身的效果完全不同。
常见错误现象：
写了 writing-mode: vertical-rl 后发现拼音横着堆在每个字右边，像一串被拉长的标签；更糟的是，如果容器窄，rt 会直接换行或溢出，而不是缩成一格。
-
ruby的竖排行为由浏览器内置排版引擎决定，不响应text-align或margin-left等常规定位 - 必须显式设置
ruby { ruby-position: right; }（而非默认的over）才能触发右向注音；但 Safari 目前仍忽略该值，只认over/under - Chrome 和 Firefox 支持
ruby-position: right，但仅当writing-mode为vertical-rl或vertical-lr时生效 - 别指望
rt { writing-mode: horizontal-tb; }能“强行横过来”——它会让拼音在右方再转一次方向，视觉混乱
想让拼音紧贴汉字右侧？得用 inline-flex + transform 模拟
原生 ruby 在竖排下无法实现「汉字+右侧小字」的紧凑贴合效果。真实项目中，能稳定控制位置的只有手动布局：
- 用
span包裹每个字和对应拼音，设为display: inline-flex; flex-direction: row; - 汉字设
flex: 0 0 auto;，拼音设flex: 0 0 1.2em;+font-size: 0.65em;+line-height: 1; - 对拼音加
transform: translateX(0.15em);微调间距（避免紧贴导致字形粘连） - 禁用
ruby相关样式，否则可能干扰 flex 流
示例结构：<span class="vert-char"><span class="base">汉</span><span class="pinyin">hàn</span></span>
vertical-rl + ruby 的组合在 Safari 上基本不可用
Safari（包括 iOS 17+）对 ruby-position: right 完全不识别，即使写了也回退到 over，结果是拼音跑到汉字**上方**（竖排时变成“上边一排小字”，完全错位）。这不是 bug，是 WebKit 当前实现限制。
- 检测方式：用 JS 判断
getComputedStyle(document.documentElement).rubyPosition是否返回"right" - 生产环境建议：对 Safari UA 直接降级为 inline-flex 方案，不要依赖 CSS fallback
- 别用
@supports (ruby-position: right)—— Safari 声称支持该属性，但实际不渲染，导致误判 - 安卓 WebView（尤其旧版）同样不处理
ruby-position: right，表现比 Safari 更差：拼音直接堆在基字下方
真正要竖排注音，优先考虑语义降级而非视觉妥协
如果你的场景是古籍数字化、辞典条目或教学材料，且必须保持语义正确性，那就接受 ruby 在竖排下的原生行为：它本就不是为「右侧小字」设计的，而是为「竖排文本中的右侧假名注释」（如日文）准备的。强行塞进中文竖排，只会放大兼容性裂痕。
容易被忽略的一点：
屏幕阅读器在 writing-mode: vertical-rl 下仍按 DOM 顺序读 rb 和 rt，但若你用 transform 或 position 打乱视觉流，可访问性会彻底失效——此时 inline-flex 是唯一兼顾语义与视觉的折中路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
