<html lang="ar-SA" dir="rtl"> 是最低要求，因 lang 决定语音、拼写、分词，dir 触发 Unicode 双向算法影响光标、Tab 流、输入框渲染等，二者不可互推且必须同设于根节点。
lang 和 dir 必须同时设在 <html> 上，缺一不可；只设一个，多语言页面的语义、渲染、可访问性都会出问题。
为什么 <html lang="ar-SA" dir="rtl"> 是最低要求
浏览器和辅助技术把 <html> 当作整页语义起点。lang 决定语音引擎、拼写检查词典、搜索引擎分词逻辑；dir 触发 Unicode 双向算法（UBA），影响光标位置、Tab 焦点流、<input> placeholder 渲染顺序、flex 主轴方向等底层行为。二者不互推：设了 dir="rtl" 不代表浏览器就知道该用阿拉伯语引擎朗读；设了 lang="ar-SA" 也不代表输入框光标会自动跳到右侧。
常见错误包括：
- 只加
dir="rtl"但lang仍是"zh-CN"→ 屏幕阅读器用普通话引擎读阿拉伯文字，发音完全错乱 - 只加
lang="ar-SA"但dir缺失或写在<body>→<input type="text">光标默认停左侧，用户输入第一个字符就视觉错位 - SPA 切换语言时只更新 React state 或 Vue data，没执行
document.documentElement.lang = "he-IL"和document.documentElement.dir = "rtl"→ 已挂载的表单控件仍按旧方向响应用户操作
lang 和 dir 的作用边界必须分清
它们不是样式开关，也不是“同一件事的两种写法”。lang 影响的是语言相关能力（语音合成、拼写检查、断字规则、字体 fallback）；dir 影响的是文本流解析与交互行为（光标、标点包裹、数字顺序、Tab 流、text-align: start/end 解析）。两者可以共存，但不能互相替代。
立即学习“前端免费学习笔记（深入）”；
典型场景：
- 中文页面嵌一段希伯来语：
<p dir="rtl" lang="he">שלום עולם</p>——dir确保标点不被 LTR 容器拖偏，lang让屏幕阅读器切换希伯来语发音引擎 - 阿拉伯语站点中显示英文产品名：
<span dir="ltr" lang="en">iPhone 15</span>——dir="ltr"防止 “iPhone” 被 RTL 环境强制倒序，“15” 数字顺序错乱 - 动态插入用户昵称（可能含混排文字）：
<bdi>{{username}}</bdi>——<bdi>自动隔离 Bidi 环境，比手动判断dir更安全；它不替代lang，所以若昵称含阿拉伯语，仍建议额外加lang="ar"
动态切换时最容易漏掉的两步
前端路由或语言切换按钮触发后，仅改 DOM 文本或组件状态远远不够。必须同步更新根节点的两个原生属性，否则已挂载的原生控件不会重置内部方向状态。
正确做法是：
- 用
document.documentElement.lang = "fa-IR"更新语言代码，注意必须符合 BCP 47 标准（小写+连字符），"FA_ir"或"fa_IR"会被浏览器忽略 - 用
document.documentElement.dir = "rtl"更新方向，不能只靠 CSSdirection: rtl，后者不触发 UBA 重计算 - 避免只改
<body>或某个容器的dir——<html>才是继承源，改它才能让所有子元素（包括未挂载的新<input>）获得一致初始方向 - 验证是否生效：在 DevTools 控制台执行
getComputedStyle(document.documentElement).direction应返回"rtl"；同时检查document.documentElement.lang值是否准确
最常被忽略的点是：表单控件（尤其是 <input> 和 <textarea>）的方向状态不会随父级 dir 动态重置 —— 它们在创建时就根据当时的 document.documentElement.dir 初始化了光标逻辑。所以语言切换后，已存在的输入框仍可能光标错位，必须重新 focus 或强制重建。
