不能直接用 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></li>
  <li>外层容器设 <code>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 框架都默认忽略。