用语义化的 <dl> 结构实现双语对照，分设中英字体与行高确保对齐，CSS :focus-within 实现点击高亮，break-inside/before 防止 PDF 分页断裂。
直接用 HTML + CSS 就能做出清晰、可读性强的双语对照翻译页面，不需要框架或后端——关键在于结构语义化、样式可控、文本对齐精准。下面说清楚怎么落地。
用 <dl> 而不是 <div> 组织对照行
很多人习惯用一堆 <div class="row"> 套两段文字，结果语义弱、缩放错位、屏幕阅读器难识别。双语对照本质是“术语/句段 ↔ 翻译”的定义关系，<dl>（definition list）天然匹配：
<dl class="bilingual"> <dt>The quick brown fox jumps over the lazy dog.</dt> <dd>那只敏捷的棕色狐狸跳过了懒狗。</dd> <dt>She has been studying Chinese for three years.</dt> <dd>她已经学了三年中文。</dd> </dl>
-
<dt>放原文（source），<dd>放译文（target），语义明确，SEO 和无障碍支持好 - 避免用
<table>：表格语义错误，响应式难处理，打印时易断行错位 - 不要给每组加独立 class（如
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 可实现）
用户常需要快速定位某句的翻译，不用 JS 也能做到：利用 :focus-within 和 tabindex 配合。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
<dl class="bilingual"> <dt tabindex="0">Hello, world!</dt> <dd>你好，世界！</dd> </dl>
dl.bilingual dt:focus-within {
background-color: #fff8e1;
}
dl.bilingual dt:focus-within + dd {
background-color: #fff3cd;
outline: 1px solid #ffc107;
}- 只给
<dt>加tabindex="0"，保证键盘可聚焦，不破坏语义 - 不要用
:hover替代：触屏设备无 hover，且鼠标悬停易误触发 - 高亮色选浅黄系而非亮蓝/红：降低视觉干扰，保留原文可读性
导出为 PDF 时页眉/分页断裂问题怎么防
用户常要打印或存档双语页，但浏览器默认 PDF 导出会让 <dt>/<dd> 被硬生生切到两页。加这两条 CSS 规则即可：
dl.bilingual dt {
break-inside: avoid;
}
dl.bilingual dd {
break-before: avoid;
break-after: avoid;
}-
break-inside: avoid防止<dt>自己被截断（比如长句跨页） -
break-before: avoid确保译文一定紧跟原文，不会被推到下一页开头 - 测试时用 Chrome “打印 → 更多设置 → 背景图形” 打开，否则高亮色不显示
真正麻烦的是中英文标点混用导致的断行异常（比如英文引号内嵌中文顿号），这得靠 lang 属性和 unicode-bidi 微调，不是加个 class 就能解决的——得逐句看渲染结果。
