必须在<html>元素上设dir="rtl"才能触发完整RTL感知机制，否则光标、选区、Tab流、Flex主轴起点等关键行为不会真正翻转；局部设置或仅用CSS无效。
dir 属性不是“让文本看起来从右往左”，而是告诉浏览器“这段内容的逻辑书写方向是 RTL”，从而触发 Unicode 双向算法（UBA）、调整光标行为、表单控件位置、Flex 主轴起点等底层机制。只加 direction: rtl CSS 是无效的——它不参与 UBA，复制粘贴会乱序，<input> 光标仍从左开始跳。
必须在 <html> 上设 dir="rtl" 才能真正启用 RTL 上下文
局部设置（比如只给 <body> 或某个 <div> 加 dir="rtl"）会导致按钮顺序不变、Tab 焦点流仍是 LTR、<input type="search"> 的清除图标还在右边、<select> 下拉箭头不翻转。浏览器只在 <html> 根元素看到 dir 时，才完整启用 RTL 感知。
- 正确写法：
<html dir="rtl" lang="ar">——lang必须同步设，否则阿拉伯数字连字、屏幕阅读器语音规则不生效 - 动态切换时，必须成对修改：
document.documentElement.setAttribute("dir", "rtl")+document.documentElement.setAttribute("lang", "ar") - 旧版 Safari 对
dir非常敏感，<body dir="rtl">套<input>仍可能出问题，根元素才是唯一可靠入口
<input> 和 <textarea> 必须单独加 dir="rtl" 或 dir="auto"
即使整页已设 <html dir="rtl">，<input> 和 <textarea> 也不会自动继承输入方向——光标起始位置、退格键行为、双击选词范围全按 LTR 处理。
- 显式声明：
<input dir="rtl">或<textarea dir="auto">（auto会根据首个强字符自动判定方向） - 别用
style="direction: rtl"替代——它不改变光标逻辑，用户输入阿拉伯语时按 Backspace 会删错位置 -
<input type="number">不支持dir，RTL 场景下应避免用于阿拉伯语输入
混排英文/数字时用 <bdi> 隔离，而不是靠父级 dir
阿拉伯语段落里嵌入 v2.4.1 或 https://example.com，仅靠 <p dir="rtl"> 无法阻止 UBA 错误重排，结果是 “1.4.2 v” 或 “moc.elpmaxe//:sptth”。根本原因是 UBA 需要显式边界。
立即学习“前端免费学习笔记（深入）”；
- 正确包裹：
<p dir="rtl">تحديث إلى <bdi>v2.4.1</bdi></p> -
<bdi>是语义化、可复制正确的方案；unicode-bidi: isolate不参与 UBA，效果不可靠 -
<input type="submit">无法套<bdi>，此时只能服务端预渲染或 JS 动态插入已排序字符串
CSS 物理属性不会自动翻转，必须改用逻辑属性或 :dir(rtl)
dir="rtl" 会让 text-align、flex-direction: row 主轴起点、justify-content: flex-start 含义自动翻转，但以下属性完全不受影响：
-
margin-left→ 改用margin-inline-start（LTR 下为 left，RTL 下为 right） -
float: left→ 改用float: inline-start，或降级写法：:dir(rtl) { float: right; } -
left: 4px（绝对定位）→ 改用inset-inline-start: 4px，或兼容写法：:dir(rtl) { right: 4px; } - 慎用
flex-direction: row-reverse：它会强制翻转所有子项顺序，破坏原生 Tab 流和语义顺序
最易被忽略的是：表格列顺序、background-position: left top、text-align: right 这些物理值，在 RTL 下全部失效，且不会报错——它们只是默默继续往左加空隙、往右对齐，导致布局偏移肉眼难察觉。
