应使用 dl + dt + dd 标签组织戏剧旁白，其中 dt 表示角色名、dd 表示台词，语义准确且布局可控；ruby 标签专用于东亚注音，不适用于旁白，强行使用会导致语义错误、样式失控和无障碍支持失效。
ruby 标签不是为戏剧旁白设计的
ruby 标签在 HTML 中专用于东亚文字的注音（如汉字上标假名），浏览器会按「主文本 + 上方/右侧小字号注音」的固定布局渲染。它不支持自定义位置（比如把文字放在左侧或下方）、不接受块级内容、也不能嵌套 div 或 p —— 所以直接用 ruby 展示「角色名：台词」这类戏剧结构，会导致语义错误、样式失控、屏幕阅读器误读。
旁白需要语义明确 + 布局可控，推荐用 dl + dt + dd
戏剧台词本质是「角色（术语）→ 台词（定义）」关系，dl 是最贴合的语义容器：
<dl class="script"> <dt class="character">哈姆雷特</dt> <dd class="line">生存还是毁灭，这是一个值得思考的问题。</dd> <dt class="character">奥菲莉娅</dt> <dd class="line">殿下，您最近好像心事重重？</dd> </dl>
-
dt表示说话人，天然具有“术语”语义，适合被 CSS 独立样式化（如加粗、右对齐、不同颜色） -
dd表示对应台词，可设置缩进、行高、字体大小等，且保持与dt的逻辑绑定 - 无障碍支持好：屏幕阅读器能正确识别「谁说了什么」，无需额外
aria标注 - 打印、响应式适配都更稳定——不像
ruby那样在移动端可能错位或折叠
如果硬要用 ruby，只能 hack 出近似效果（不推荐）
有人尝试把角色名塞进 rb、台词塞进 rt，再用 CSS 反转位置：
<ruby> <rb>哈姆雷特</rb> <rt>生存还是毁灭……</rt> </ruby>
然后加样式：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
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加语义类：<span class="stage-direction">（停顿，望向远方）</span> - 避免用
em或i——它们只表示语气或外文，不是舞台动作 - 如果需强调某句台词中的词，再用
strong或em套在dd内部，层级清晰
语义混乱的成本远高于多写几个标签：后期加语音合成、导出为剧本 PDF、或接入字幕系统时，错用 ruby 会导致解析失败或格式坍塌。
