HTML排版国际化核心是每个元素的lang属性驱动字体回退、标点挤压等行为，仅改document.documentElement.lang无效；必须显式更新所有DOM节点lang值并严格遵循BCP 47标准。
HTML 排版国际化不是改文字就够了，核心是让 lang 属性真正驱动排版行为——字体回退、标点挤压、断行规则、RTL 布局切换，这些全靠每个元素自己的 lang 值，不是靠根节点一设了事。
为什么只改 document.documentElement.lang 页面排版没反应
浏览器和屏幕阅读器按每个 DOM 元素自身的 lang 属性决定渲染逻辑。根节点改了，<p>、<h2>、<button> 这些已有节点的 lang 仍保持旧值，字体 fallback 不会更新，中文标点不会压缩，阿拉伯语也不会自动 RTL。
- 必须显式遍历所有带
lang属性的元素（包括<pre lang="bash">、<p lang="ja">），逐个重设其lang值 - 局部混排内容（如英文术语、日文引文、代码块）不能跟着主语言一起切，得保留原
lang；但明确属于主语言区域的子元素（如<span class="highlight">）必须同步更新 -
lang值必须严格符合 BCP 47：用zh-Hans，不用zh_CN或chinese；iOS VoiceOver 对ja支持弱，得写ja-JP
data-i18n 怎么同时驱动文本 + 排版
单纯用 data-i18n 替换文字，不联动 lang，会导致文案换了但字体/标点/断行还是旧语言的规则。正确做法是：每次翻译后，立即把当前元素的 lang 设为当前语言码。
- 对普通文本节点：
el.textContent = translations[key]; el.lang = currentLang; - 对需保留 HTML 结构的文案（如含
<strong>的提示语），用el.innerHTML替换，但必须确保语言包里对应值是可信纯 HTML 片段，否则有 XSS 风险 - 表单控件的
placeholder、title、alt不受textContent影响，必须用data-i18n-placeholder等后缀属性单独处理，并同步设置对应属性的lang（如el.placeholder = ...; el.setAttribute('lang', currentLang)）
动态插入内容怎么保证排版一致
AJAX 加载的弹窗、分页表格行、搜索建议列表，如果插入后不立刻打 lang 和翻译，就会沿用父容器旧语言的排版规则，出现中英混排字体错乱、标点间距异常等问题。
立即学习“前端免费学习笔记（深入）”；
- 所有动态插入的 DOM 节点，在
appendChild()或innerHTML后，必须立即调用翻译函数，且该函数内部要设置el.lang = currentLang - 不要依赖 MutationObserver 自动扫描——它无法区分哪些是用户生成内容、哪些是框架注入，容易误设或漏设
- 第三方组件（如日期选择器）若支持
locale配置，必须重建实例；原生Intl.DateTimeFormat实例不可复用，得用新语言码重新构造
JSON 语言包结构怎么影响排版稳定性
语言包键名不一致、嵌套过深、缺失占位符，会导致部分节点查不到翻译而留空，lang 却已设，结果文字消失但排版规则强行生效，页面布局塌陷。
- 语言包必须扁平：
{"home.title": "首页", "form.email": "邮箱"}，不要{"home": {"title": "首页"}} - 所有语言文件键名严格一致；某语言暂未翻译，也要保留键并设为空字符串
"home.title": ""，避免 JS 查不到 key 就跳过 - 加载失败时 fallback 必须完整：先试
zh-HK→ 再试zh→ 最后退到en；路径拼接用./locales/${lang}.json，别硬编码
最易被忽略的是：排版规则生效的前提，是每个可见文本节点都拥有准确的 lang 值，而不是“看起来文字对了就行”。字体 fallback、标点压缩、RTL 切换，全靠这个属性驱动，漏一个就可能在特定设备上出问题。
