必须在元素上设置dir="rtl"，否则表单光标、tab焦点流、flex主轴等关键行为不会真正翻转；仅设或无效，因浏览器仅在根元素带dir属性时才启用完整rtl感知机制。
必须在 元素上设置 dir="rtl"，否则表单光标、Tab 焦点流、Flex 主轴、滚动条位置等关键行为不会真正翻转 —— 局部加 dir 或只靠 CSS 是无效的。
为什么只给 <div> 加 <code>dir="rtl" 不行
浏览器只在根元素（）带 dir 属性时，才完整启用 RTL 感知机制。这不是兼容性问题，而是底层行为依赖：
-
<input>和<textarea></textarea>光标仍从左入，退格方向错乱，双击选词反向 - Tab 键焦点流保持 LTR 顺序，不按视觉阅读方向跳转
-
flex-direction: row主轴起点不变，justify-content: flex-start仍指向左边 - 滚动条卡在右侧，而非 RTL 系统应有的左侧
-
<select></select>下拉项不翻转，<option></option>文字顺序混乱
lang 属性
lang 决定字体连字、数字样式（如阿拉伯数字 vs. 东阿拉伯数字）、屏幕阅读器语音规则。缺一不可：
- 正确写法：
或 - 动态切换时，JS 必须成对修改：
document.documentElement.setAttribute("dir", "rtl")和document.documentElement.setAttribute("lang", "ar") - 仅改
dir不改lang，会导致阿拉伯语数字显示为 ASCII 形式（如 123 而非 ١٢٣），连字断开，语音朗读错误
混合文本中 URL、版本号乱序怎么办
纯 dir="rtl" 下，阿拉伯语段落里的 https://example.com 或 v2.4.1 会被 Unicode 双向算法（UBA）错误拆解，显示为 1.4.2 v API 或 moc.elpmaxe//:sptth。根本原因是 UBA 需要 HTML 的 dir 触发，而 CSS 的 direction 不参与该算法。
- 唯一可靠解法：用
<bdi></bdi>包裹不可控文本，例如<p dir="rtl">النص بالعربية <bdi>https://example.com</bdi></p> - 避免用
<bdo dir="rtl"></bdo>—— 它强制字符级翻转，会把v2.4.1显示成1.4.2v，破坏可读性 - 不要用
unicode-bidi: plaintext或direction: ltr替代<bdi></bdi>，它们不触发 UBA，复制粘贴出来仍是乱序
CSS 中哪些属性不会随 dir="rtl" 自动翻转
dir="rtl" 会改变 text-align: start、Flex 主轴起点、Grid 的 justify-content 含义，但以下物理属性完全不受影响，必须手动处理：
-
margin-left/padding-right→ 改用margin-inline-start/padding-inline-end -
float: left→ 改用float: inline-start，或降级写法：dir(rtl) { float: right; } -
left: 10px（绝对定位）→ 改用inset-inline-start: 10px，或兼容写法：dir(rtl) { right: 10px; } -
background-position: left top→ 改用background-position: inline-start top
特别注意：flex-direction: row-reverse 是常见误操作 —— 若容器已设 dir="rtl"，再加 row-reverse 会造成双重翻转，逻辑错乱。
