应使用 dl + dt + dd 标签组织戏剧旁白，其中 dt 表示角色名、dd 表示台词，语义准确且布局可控；ruby 标签专用于东亚注音，不适用于旁白，强行使用会导致语义错误、样式失控和无障碍支持失效。
ruby 标签不是为戏剧旁白设计的
ruby 标签在 HTML 中专用于东亚文字的注音（如汉字上标假名），浏览器会按「主文本 + 上方/右侧小字号注音」的固定布局渲染。它不支持自定义位置（比如把文字放在左侧或下方）、不接受块级内容、也不能嵌套 div 或 p —— 所以直接用 ruby 展示「角色名：台词」这类戏剧结构，会导致语义错误、样式失控、屏幕阅读器误读。
旁白需要语义明确 + 布局可控，推荐用 dl + dt + dd
戏剧台词本质是「角色（术语）→ 台词（定义）」关系，dl 是最贴合的语义容器：
- 哈姆雷特
- 生存还是毁灭，这是一个值得思考的问题。
- 奥菲莉娅
- 殿下，您最近好像心事重重？
-
dt表示说话人，天然具有“术语”语义，适合被 CSS 独立样式化（如加粗、右对齐、不同颜色） -
dd表示对应台词，可设置缩进、行高、字体大小等，且保持与dt的逻辑绑定 - 无障碍支持好：屏幕阅读器能正确识别「谁说了什么」，无需额外
aria标注 - 打印、响应式适配都更稳定——不像
ruby那样在移动端可能错位或折叠
如果硬要用 ruby，只能 hack 出近似效果（不推荐）
有人尝试把角色名塞进 rb、台词塞进 rt，再用 CSS 反转位置：
<ruby><rb>哈姆雷特</rb><rt>生存还是毁灭……</rt></ruby>
然后加样式：
ruby { display: block; }
rb, rt { display: inline; }
rt { float: right; font-size: 0.9em; } /* 强行右置台词 */
- 结果不可靠：Chrome 和 Safari 对
ruby的块级化支持不一致，Firefox 可能忽略float -
rt内容会被朗读为“注音”，听障用户听到的是「哈姆雷特，生存还是毁灭……」，逻辑颠倒 - 无法换行：长台词会溢出容器，
ruby不支持white-space: pre-wrap等文本控制
旁白里的特殊格式（动作提示、括号说明）要单独标记
真正的戏剧脚本常含舞台指示，比如「（低声）」「（踱步至窗前）」，这些不是台词主体，也不该和角色名混同：
- 用
span加语义类：（停顿，望向远方） - 避免用
em或i——它们只表示语气或外文，不是舞台动作 - 如果需强调某句台词中的词，再用
strong或em套在dd内部，层级清晰
语义混乱的成本远高于多写几个标签：后期加语音合成、导出为剧本 PDF、或接入字幕系统时，错用 ruby 会导致解析失败或格式坍塌。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
