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