必须在 元素上设 dir="rtl"，因为浏览器仅在根元素带 dir 属性时才完整启用 RTL 感知机制；局部设置或仅用 CSS 无效，会导致光标错乱、选词反向、滚动条位置错误、下拉方向不翻转等问题。
必须在 元素上设 dir="rtl"，否则表单光标、选区逻辑、滚动条位置等关键行为不会真正适配 RTL —— 局部设置或只用 CSS 是无效的。
为什么一定要从 开始设 dir="rtl"
浏览器只在根元素带 dir 属性时，才完整启用 RTL 感知机制。旧版 Safari 中， 或 <div dir="rtl"> 会导致：<code><input> 和 <textarea></textarea> 光标跳转错乱、双击选词反向、复制粘贴顺序颠倒；滚动条仍出现在右侧；<select></select> 下拉项方向不翻转。
正确写法是：（lang 必须同步设置，否则字体连字、数字样式、屏幕阅读器语音规则均不生效）。
动态切换时，用 JavaScript 修改必须成对执行：document.documentElement.setAttribute("dir", "rtl");document.documentElement.setAttribute("lang", "ar");
混合文本中英文/数字乱序怎么办
纯 dir="rtl" 不足以让阿拉伯语段落里的 URL、版本号（如 v2.4.1）、品牌名保持可读顺序。现象是：API v2.4.1 显示为 1.4.2 v API，括号方向也反了。
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 根本原因是 Unicode 双向算法（UBA）未被正确触发 —— 它依赖 HTML 的
dir属性，不是 CSS 的direction - 对 LTR 片段显式包裹
<bdi></bdi>：例如<p dir="rtl">النص بالعربية <bdi>https://example.com</bdi></p> - 不要用
direction: ltr替代<bdi></bdi>—— 它不参与 UBA，复制出来仍是乱序 - 避免在
<input>或<textarea></textarea>上漏掉dir="auto"或dir="rtl"，否则用户输入阿拉伯语时退格键行为异常
哪些 CSS 属性不会随 dir="rtl" 自动翻转
dir="rtl" 会翻转文本对齐、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 -
text-align: right→ 改用text-align: end（推荐始终用start/end，而非left/right）
注意：flex-direction: row-reverse 是常见误操作 —— 若容器已设 dir="rtl"，再手动加该声明会造成双重反转。
:dir(rtl) 伪类怎么用才不白写
:dir(rtl) 匹配的是「实际文本流方向」，不是是否写了 dir="rtl"。它能捕获继承方向和浏览器自动推断方向（如系统语言为阿拉伯语时），比 [dir="rtl"] 更健壮。
但要注意几个硬限制：
- Safari 17.4+、Chrome 91+（需开启实验性功能）、Firefox 已支持；不支持时整条规则被忽略（安全降级）
- 它不响应
direction: rtl这类纯 CSS 声明 —— 必须由 HTMLdir属性或浏览器自动推断触发 - 不能嵌套：
div:dir(rtl) span:dir(ltr)无效；子元素若显式设dir="ltr"，它自己匹配:dir(ltr)，父选择器不穿透 - 伪元素内容方向需单独处理：
::before:dir(rtl)不生效，得用[dir="rtl"] .el::before或content: attr(data-rtl-icon)
真正难的从来不是加 dir，而是判断哪一层该加、哪一层该隔离、哪一层该交给 CSS 逻辑属性 —— 多数布局 bug 都出在“以为加了 dir="rtl" 就万事大吉”，结果图标跑到文字右边、滚动条在左边却没配好 overflow-x、或者 <select></select> 箭头消失。
