不能用做双语对照，因其语义错误、打印易断页、缩放错位且无法实现中英基线对齐；应使用结构，分设中英字体与行高，配合:focus-within交互和隔离动态双向文本。
直接用 <table> 做双语对照是错的——它语义错误、打印易断行、缩放错位，且无法支持中英混排时的基线对齐。真正可靠的做法是用 <code><dl></dl> 结构 + 分设字体与行高 + :focus-within 交互，纯 HTML/CSS 即可落地。
为什么不能用 <table> 做双语对照
<p>表格本质表达「行列维度对比」，比如「功能 A vs 功能 B」或「iOS vs Android」；而双语对照是「源文本 ↔ 目标文本」的定义关系，<code><dl></dl>（definition list）才是语义匹配的原生标签。
<table> 在 PDF 打印时极易在 <code><dt></dt>/<dd></dd> 中间断页，break-inside: avoid 对 <tr> 无效，但对 <code><dl></dl> 内的 <dt></dt>+<dd></dd> 组合有效
- 中英文混排时，
<table> 强制所有单元格共用同一 <code>line-height，导致译文视觉上“飘”或“沉”，而 <dl></dl> 允许分别设置 dt 和 dd 的 line-height
- 屏幕阅读器会把
<table> 当作数据表朗读（“第1行第1列…第1行第2列…”），而 <code><dl></dl> 会被识别为术语定义对，更符合翻译场景
<dl></dl> 结构必须这样写
常见错误是给每组加独立 class 或漏掉 tabindex，导致无法点击高亮。正确结构只需三要素：语义标签、可聚焦性、无冗余 class。
- 原文必须用
<dt></dt>，译文必须用 <dd></dd>，不要反过来，也不要套 <div>
<li>每个 <code><dt></dt> 必须带 tabindex="0"，否则 :focus-within 不触发
- 整个列表用一个 class（如
class="bilingual"），靠 dl.bilingual dt + dd 控制间距，避免逐行写 class="row-1" 这类不可维护写法
- The quick brown fox jumps over the lazy dog.
- 那只敏捷的棕色狐狸跳过了懒狗。
- She has been studying Chinese for three years.
- 她已经学了三年中文。
中英混排必须分设 font-family 和 line-height
中英文默认字体基线、字距、x-height 差异极大，强行统一 line-height 必然导致视觉错位。关键不是数值大小，而是分设后微调对齐感。
anything-to-html
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
下载
- 英文优先用系统无衬线字体：
"SF Pro Text", "Segoe UI", system-ui；避免 Times New Roman 等衬线体干扰节奏
- 中文必须指定简体支持字体栈：
"PingFang SC", "Hiragino Sans GB", sans-serif；Microsoft YaHei 在 Windows 上有模糊问题，慎用
-
line-height 不是越大越好：英文设 1.4，中文设 1.6～1.7 已足够；再大会割裂段落呼吸感
- 用
margin-top: 0.2em 微调 <dd></dd> 位置，这个值需按实际渲染测试，不是固定套路
动态内容里的方向污染必须用 <bdi></bdi> 隔离
当双语对照页面要显示用户输入、API 返回的用户名或路径（如 user@مثال.com 或 مجلد/file.txt），这些子串方向不可预知，dir="auto" 会误判，必须用 <bdi></bdi> 包裹。
- 只包裹方向不确定的独立子串，例如：
<bdi>أحمد</bdi>、<bdi>user@مثال.com</bdi>、<bdi>(ahmed123)</bdi>
- 禁止包裹整句混排内容，如
<bdi>Ali: مرحبا</bdi>——会让两个方向相反的词相互干扰
- 禁止包裹纯中文，如
<bdi>张三</bdi>——中文无强方向字符，<bdi></bdi> 完全冗余
-
<bdi></bdi> 不影响字体、盒模型或光标逻辑，它只是 Unicode 双向算法的隔离边界，别指望它“修复样式”
最易被忽略的是：双语对照页面一旦嵌入 RTL 主站（如阿拉伯语官网），必须确保根元素 <dl></dl> 内的英文会因继承出错；而 <bdi></bdi> 正是为这种嵌套污染兜底的最后防线——它不解决全局方向，只保每个翻译单元自身不被拖偏。
<table> 在 PDF 打印时极易在 <code><dt></dt>/<dd></dd> 中间断页，break-inside: avoid 对 <tr> 无效，但对 <code><dl></dl> 内的 <dt></dt>+<dd></dd> 组合有效
<table> 强制所有单元格共用同一 <code>line-height，导致译文视觉上“飘”或“沉”，而 <dl></dl> 允许分别设置 dt 和 dd 的 line-height
<table> 当作数据表朗读（“第1行第1列…第1行第2列…”），而 <code><dl></dl> 会被识别为术语定义对，更符合翻译场景
<dl></dl> 结构必须这样写
常见错误是给每组加独立 class 或漏掉 tabindex，导致无法点击高亮。正确结构只需三要素：语义标签、可聚焦性、无冗余 class。
- 原文必须用
<dt></dt>，译文必须用<dd></dd>，不要反过来，也不要套<div> <li>每个 <code><dt></dt>必须带tabindex="0"，否则:focus-within不触发 - 整个列表用一个 class（如
class="bilingual"），靠dl.bilingual dt + dd控制间距，避免逐行写class="row-1"这类不可维护写法
- The quick brown fox jumps over the lazy dog.
- 那只敏捷的棕色狐狸跳过了懒狗。
- She has been studying Chinese for three years.
- 她已经学了三年中文。
中英混排必须分设 font-family 和 line-height
中英文默认字体基线、字距、x-height 差异极大，强行统一 line-height 必然导致视觉错位。关键不是数值大小，而是分设后微调对齐感。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 英文优先用系统无衬线字体：
"SF Pro Text", "Segoe UI", system-ui；避免Times New Roman等衬线体干扰节奏 - 中文必须指定简体支持字体栈：
"PingFang SC", "Hiragino Sans GB", sans-serif；Microsoft YaHei在 Windows 上有模糊问题，慎用 -
line-height不是越大越好：英文设1.4，中文设1.6～1.7已足够；再大会割裂段落呼吸感 - 用
margin-top: 0.2em微调<dd></dd>位置，这个值需按实际渲染测试，不是固定套路
动态内容里的方向污染必须用 <bdi></bdi> 隔离
当双语对照页面要显示用户输入、API 返回的用户名或路径（如 user@مثال.com 或 مجلد/file.txt），这些子串方向不可预知，dir="auto" 会误判，必须用 <bdi></bdi> 包裹。
- 只包裹方向不确定的独立子串，例如：
<bdi>أحمد</bdi>、<bdi>user@مثال.com</bdi>、<bdi>(ahmed123)</bdi> - 禁止包裹整句混排内容，如
<bdi>Ali: مرحبا</bdi>——会让两个方向相反的词相互干扰 - 禁止包裹纯中文，如
<bdi>张三</bdi>——中文无强方向字符，<bdi></bdi>完全冗余 -
<bdi></bdi>不影响字体、盒模型或光标逻辑，它只是 Unicode 双向算法的隔离边界，别指望它“修复样式”
最易被忽略的是：双语对照页面一旦嵌入 RTL 主站（如阿拉伯语官网），必须确保根元素 已声明，否则 <dl></dl> 内的英文会因继承出错；而 <bdi></bdi> 正是为这种嵌套污染兜底的最后防线——它不解决全局方向，只保每个翻译单元自身不被拖偏。
