竖排文本中ruby注音默认旋转需手动干预，通过设置rt的writing-mode: horizontal-tb和text-orientation: upright实现横排；须用title或ARIA补充读音依据，IE/旧Edge需span降级并用@supports检测。
竖排文本里给多音字加注音，ruby + rt 能用，但默认会跟着文字转90°，导致注音横着躺倒——这不是你想要的“标准注音排版”，得手动干预。
竖排时 ruby 注音自动旋转，怎么强制横排显示
浏览器对竖排（writing-mode: vertical-rl）下 ruby 的处理是：把整个 ruby 块当作文本流的一部分旋转，结果 rt 也跟着翻转。解决方法是单独重置 rt 的 writing-mode：
<ruby style="writing-mode: vertical-rl"> <rb>衰</rb> <rt style="writing-mode: horizontal-tb; text-orientation: upright;">shuāi</rt> </ruby>
-
text-orientation: upright确保汉字本身不被侧翻（尤其在 Safari 中关键） -
horizontal-tb强制rt内容按水平方向布局，不受外层竖排影响 - Chrome 和 Firefox 支持良好；Safari 需要额外加
text-orientation才能避免注音字歪斜或错位
多音字标注必须绑定语义，不能只靠视觉位置
“衰”在《回乡偶书》中读 shuāi 是因取“衰枯”义，不是古音残留；“斜”读 xié 是审音表规范，与押韵无关。HTML 标注时，别只写拼音，建议用 title 或 ARIA 属性补充释义依据：
<ruby> <rb>衰</rb> <rt title="《普通话异读词审音表》：shuāi，表衰弱、枯萎义">shuāi</rt> </ruby>
- 纯视觉注音容易误导用户以为这是“古音”或“叶音”，实际是现代规范读音
- 若页面面向教育场景，
title是最轻量、无需 JS 就能触发的解释入口 - 避免用
data-*自定义属性替代语义化属性，屏幕阅读器可能不识别
IE 和旧版 Edge 不支持 ruby，得有降级方案
ruby 在 IE 完全不可用，Edge 17–18 支持有限（比如不渲染 rt）。如果目标用户仍含政务、教育类内网环境，必须提供 fallback：
立即学习“前端免费学习笔记（深入）”；
- 用
span模拟结构：<span class="ruby"><span class="rb">衰</span><span class="rt">shuāi</span></span>，再配 CSS 控制定位 - 用
@supports (display: ruby)包裹原生ruby样式，确保老浏览器走降级路径 - 不要依赖 JS 动态插入
ruby—— 无脚本环境下注音直接消失，对无障碍极不友好
真正难的不是让注音横过来，而是让每个拼音背后都有可验证的语言学依据；样式能修，语义一旦标错，就成硬伤了。
