用语义化的 结构实现双语对照，分设中英字体与行高确保对齐，css :focus-within 实现点击高亮，break-inside/before 防止 pdf 分页断裂。
直接用 HTML + CSS 就能做出清晰、可读性强的双语对照翻译页面，不需要框架或后端——关键在于结构语义化、样式可控、文本对齐精准。下面说清楚怎么落地。
用 <dl></dl> 而不是 <div> 组织对照行<p>很多人习惯用一堆 <code><div class="row"> 套两段文字，结果语义弱、缩放错位、屏幕阅读器难识别。双语对照本质是“术语/句段 ↔ 翻译”的定义关系，<code><dl></dl>（definition list）天然匹配：
- The quick brown fox jumps over the lazy dog.
- 那只敏捷的棕色狐狸跳过了懒狗。
- She has been studying Chinese for three years.
- 她已经学了三年中文。
-
<dt></dt> 放原文（source），<dd></dd> 放译文（target），语义明确，SEO 和无障碍支持好
- 避免用
<table>：表格语义错误，响应式难处理，打印时易断行错位<li>不要给每组加独立 class（如 <code>row-1）：用 CSS 选择器 dl.bilingual dt + dd 控制间距更可靠
中英混排时 line-height 和 font-family 必须分设
中英文默认字体高度、字距、基线位置差异大，强行共用 line-height: 1.5 会导致译文“上浮”或“下沉”，视觉不对齐。必须拆开控制：
dl.bilingual dt {
font-family: "SF Pro Text", "Segoe UI", system-ui;
line-height: 1.4;
}
dl.bilingual dd {
font-family: "PingFang SC", "Hiragino Sans GB", sans-serif;
line-height: 1.6;
margin-top: 0.2em; /* 微调对齐，非固定值，按实际字体渲染测 */
}
- 英文优先用无衬线系统字体（避免 Times New Roman 这类衬线体干扰节奏）
- 中文必须指定支持简体的字体栈，
"Microsoft YaHei" 在 Windows 上有模糊问题，优先用 "PingFang SC" 或 "Hiragino Sans GB"
-
line-height 数值不是越大越好：中文设到 1.6–1.7 已足够，再大会割裂上下文呼吸感
点击原文高亮对应译文（纯 CSS 可实现）
<dt></dt> 放原文（source），<dd></dd> 放译文（target），语义明确，SEO 和无障碍支持好<table>：表格语义错误，响应式难处理，打印时易断行错位<li>不要给每组加独立 class（如 <code>row-1）：用 CSS 选择器 dl.bilingual dt + dd 控制间距更可靠中英混排时 line-height 和 font-family 必须分设
中英文默认字体高度、字距、基线位置差异大，强行共用 line-height: 1.5 会导致译文“上浮”或“下沉”，视觉不对齐。必须拆开控制：
"Microsoft YaHei" 在 Windows 上有模糊问题，优先用 "PingFang SC" 或 "Hiragino Sans GB"
line-height 数值不是越大越好：中文设到 1.6–1.7 已足够，再大会割裂上下文呼吸感用户常需要快速定位某句的翻译，不用 JS 也能做到：利用 :focus-within 和 tabindex 配合。
- Hello, world!
- 你好，世界！
dl.bilingual dt:focus-within {
background-color: #fff8e1;
}
dl.bilingual dt:focus-within + dd {
background-color: #fff3cd;
outline: 1px solid #ffc107;
}
- 只给
<dt></dt>加tabindex="0"，保证键盘可聚焦，不破坏语义 - 不要用
:hover替代：触屏设备无 hover，且鼠标悬停易误触发 - 高亮色选浅黄系而非亮蓝/红：降低视觉干扰，保留原文可读性
导出为 PDF 时页眉/分页断裂问题怎么防
用户常要打印或存档双语页，但浏览器默认 PDF 导出会让 <dt>/</dt>
<dd></dd> 被硬生生切到两页。加这两条 CSS 规则即可：
dl.bilingual dt {
break-inside: avoid;
}
dl.bilingual dd {
break-before: avoid;
break-after: avoid;
}
-
break-inside: avoid防止<dt></dt>自己被截断（比如长句跨页） -
break-before: avoid确保译文一定紧跟原文，不会被推到下一页开头 - 测试时用 Chrome “打印 → 更多设置 → 背景图形” 打开，否则高亮色不显示
真正麻烦的是中英文标点混用导致的断行异常（比如英文引号内嵌中文顿号），这得靠 lang 属性和 unicode-bidi 微调，不是加个 class 就能解决的——得逐句看渲染结果。
