不能直接用 writing-mode 套在 ruby 外层实现拼音垂直排版，否则会破坏注音与汉字的一一对应关系，导致屏幕阅读器读错、复制乱序、css 定位失效；正确做法是每个汉字单独包裹 ruby，外层容器设 vertical-rl 与 mixed。
不能直接用 writing-mode 套在 ruby 外层实现“拼音垂直排版”——它会破坏注音与汉字的一一对应关系，导致屏幕阅读器读错、复制乱序、CSS 定位失效。
为什么 ruby + vertical-rl 会出问题
把 ruby 整体设为 writing-mode: vertical-rl 后，整个结构（汉字 + rt）会被当作一个“竖排块”，但浏览器无法再正确识别哪个 rt 对应哪个汉字。常见现象包括：
-
rt拼音堆叠在顶部或错位到侧边，不再紧贴上方 - 复制文本时变成「tāo tiè 饕餮」而非「饕餮 tāo tiè」，顺序完全颠倒
- NVDA / VoiceOver 朗读时跳过
rt，或把拼音当独立行读出 - 响应式缩放下，
rt字体大小与汉字比例失衡，挤在一起
正确做法：ruby 保持横排，仅对容器启用 vertical-rl
真正可行的方案是让汉字和拼音维持语义正确的横向一对一关系，再把整个 ruby 当作一个“字”放进竖排流中。关键点：
- 每个生僻字单独包一层
ruby：<ruby>饕<rt>tāo</rt></ruby><ruby>餮<rt>tiè</rt></ruby>
- 外层容器设
writing-mode: vertical-rl; text-orientation: mixed; - 确保该容器 display 为
block或inline-flex（inline不生效） - 避免在
ruby上加float、position: absolute或transform
示例结构：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
<div style="writing-mode: vertical-rl; text-orientation: mixed; line-height: 1.6;"> <ruby>饕<rt>tāo</rt></ruby><ruby>餮<rt>tiè</rt></ruby><ruby>龘<rt>dá</rt></ruby> </div>
拼音字体与间距微调必须单独处理
竖排后，rt 的默认位置（汉字正上方）会因 writing-mode 变成“右侧”，需用 CSS 主动拉回：
- 用
ruby rt { position: relative; right: 0.2em; top: -0.1em; }微调偏移（数值依字体而异） - 禁用
rt { writing-mode: horizontal-tb; }—— 它会强制拼音横排，破坏竖排流 -
font-size建议设为0.7em起步，避免拼音在窄列中换行 - 若内容含英文术语（如「API」），改用
text-orientation: upright避免字母躺倒
IE11 及旧 Safari 用户看到的是什么
IE11 完全不支持 writing-mode: vertical-rl，也不解析 ruby 的语义；Safari ≤ 12.1 对 text-orientation: mixed 支持不全。降级逻辑必须明确：
- 用
@supports (writing-mode: vertical-rl)包裹竖排样式，否则 fallback 到横排 - 对不支持的浏览器，显示 plain text：
<span title="tāo tiè dá">饕餮龘</span> - 不要尝试用 JS 拆字 +
span+rotate(90deg)—— 复制粘贴顺序错乱，且无法被语音引擎识别
真正难的不是写对一行 writing-mode，而是让拼音始终“黏”在对应汉字旁边，同时不牺牲可访问性——这点连很多 UI 框架都默认忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
