多语言内容如何统一布局
做一份支持中英文切换的使用手册，最怕两边排版对不上。文字长度不同，段落看起来就像错位的拼图。中文简洁，英文常要多出三成字数，表格里一对照，右边直接溢出边界。解决办法是别用固定宽度，换成弹性布局，比如 CSS Grid 或 Flexbox，让容器自动适应内容。
<div class="lang-container">
<div class="zh">请按电源键三秒开机</div>
<div class="en">Press and hold the power button for 3 seconds to turn on.</div>
</div>实际项目中，有人把两种语言并列放在同一行，方便对照阅读。这时候要注意字体大小一致，行高留足空间，避免英文换行打乱节奏。
字体选择影响阅读体验
中文用思源黑体，英文配 Roboto，视觉风格才不会打架。如果全篇只设一个 font-family，浏览器遇到中文会自动 fallback 到系统默认，但效果不可控。最好明确指定组合：
body {
font-family: "Noto Sans", "Source Han Sans", sans-serif;
}这类字体家族同时覆盖多种语言，字符集完整，省去后期补漏的麻烦。
目录与页码同步处理
用户翻到第 15 页想查故障代码，结果英文版对应的是第 20 页，这种体验很糟。建议采用章节编号代替绝对页码，比如“3.2 联网设置”，两边结构保持一致。导出 PDF 时分语言生成独立书签，点击跳转不串台。
有些团队用 Markdown 写初稿，通过脚本提取不同语言块自动生成双语文档。标记方式简单：
<!-- lang: zh -->
## 连接Wi-Fi
打开网络设置，选择目标名称。
<!-- lang: en -->
## Connect to Wi-Fi
Go to network settings and select the network name.后续转换成 HTML 或 Word 都能保留结构。
图标与翻译的配合细节
不是所有提示都靠文字。一个感叹号三角图标加一句“操作失败”，翻译成西班牙语可能需要更长说明。此时图文间距要预留余地，别贴得太紧。更稳妥的做法是将图标单独剥离，用 aria-label 提供多语言描述，兼顾屏幕阅读器用户。
实际测试时发现，阿拉伯语从右向左书写，整个界面流向都要镜像。这时候不能只改文字方向，按钮位置、缩进、甚至图片中的箭头指向都得调整。用 dir="rtl" 控制整体布局，配合 CSS 的逻辑属性 margin-inline-start 替代 margin-left，适配更顺畅。