必须在元素上设dir="rtl"才能触发完整rtl感知机制，否则光标、选区、tab流、flex主轴起点等关键行为不会真正翻转；局部设置或仅用css无效。
dir 属性不是“让文本看起来从右往左”，而是告诉浏览器“这段内容的逻辑书写方向是 RTL”，从而触发 Unicode 双向算法（UBA）、调整光标行为、表单控件位置、Flex 主轴起点等底层机制。只加 direction: rtl CSS 是无效的——它不参与 UBA，复制粘贴会乱序，<input> 光标仍从左开始跳。
必须在 dir="rtl" 才能真正启用 RTL 上下文
局部设置（比如只给 或某个 <div> 加 <code>dir="rtl"）会导致按钮顺序不变、Tab 焦点流仍是 LTR、<input type="search"> 的清除图标还在右边、<select></select> 下拉箭头不翻转。浏览器只在 根元素看到 dir 时，才完整启用 RTL 感知。
- 正确写法：
——lang必须同步设，否则阿拉伯数字连字、屏幕阅读器语音规则不生效 - 动态切换时，必须成对修改：
document.documentElement.setAttribute("dir", "rtl")+document.documentElement.setAttribute("lang", "ar") - 旧版 Safari 对
dir非常敏感，套<input>仍可能出问题，根元素才是唯一可靠入口
<input> 和 <textarea></textarea> 必须单独加 dir="rtl" 或 dir="auto"
即使整页已设 ，<input> 和 <textarea></textarea> 也不会自动继承输入方向——光标起始位置、退格键行为、双击选词范围全按 LTR 处理。
- 显式声明：
<input dir="rtl">或<textarea dir="auto"></textarea>（auto会根据首个强字符自动判定方向） - 别用
style="direction: rtl"替代——它不改变光标逻辑，用户输入阿拉伯语时按 Backspace 会删错位置 -
<input type="number">不支持dir，RTL 场景下应避免用于阿拉伯语输入
混排英文/数字时用 <bdi></bdi> 隔离，而不是靠父级 dir
阿拉伯语段落里嵌入 v2.4.1 或 https://example.com，仅靠 <p dir="rtl"></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img
src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a>
<p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p>
</div>
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 无法阻止 UBA 错误重排，结果是 “1.4.2 v” 或 “moc.elpmaxe//:sptth”。根本原因是 UBA 需要显式边界。
- 正确包裹：
<p dir="rtl">تحديث إلى <bdi>v2.4.1</bdi></p> -
<bdi></bdi>是语义化、可复制正确的方案；unicode-bidi: isolate不参与 UBA，效果不可靠 -
<input type="submit">无法套<bdi></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 下全部失效，且不会报错——它们只是默默继续往左加空隙、往右对齐，导致布局偏移肉眼难察觉。
