必须在元素上设dir="rtl"，否则光标、选区、滚动条、下拉方向等关键行为无法真正适配rtl；浏览器仅在根元素带dir属性时才完整启用rtl感知机制，局部设置或仅用css无效。
必须在 元素上设 dir="rtl"，否则光标、选区、滚动条、下拉方向等关键行为不会真正适配 RTL —— 局部加 dir 或只靠 CSS 是无效的。
为什么一定要从 dir="rtl"
浏览器只在根元素带 dir 属性时，才完整启用 RTL 感知机制。旧版 Safari 中，仅给 或 <div dir="rtl"> 加属性会导致：
<ul>
<li>
<code><input> 和 <textarea></textarea> 光标跳转错乱、双击选词反向、复制粘贴顺序颠倒
<select></select> 下拉项方向不翻转正确写法是：。lang 必须同步设置，否则字体连字、数字样式、屏幕阅读器语音规则均不生效。
混合文本中英文/URL/数字乱序怎么办
纯 dir="rtl" 不足以让阿拉伯语段落里的 URL、版本号（如 v2.4.1）、品牌名保持可读顺序。现象是：API v2.4.1 显示为 1.4.2 v API，括号方向也反了。
根本原因是 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 含义，但以下物理属性完全不受影响，必须手动处理：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
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"，再加它会导致子项顺序被翻转两次，逻辑混乱。
动态切换方向时容易忽略的关键点
用 JavaScript 修改必须成对执行：
document.documentElement.setAttribute("dir", "rtl");
document.documentElement.setAttribute("lang", "ar");
不能只改 dir 而漏掉 lang，否则屏幕阅读器和字体渲染会出问题；也不能只改 lang 不改 dir，否则双向算法不激活。
真正难的不是加 dir，而是判断哪一层该加、哪一层该隔离、哪一层该用 CSS 替代 —— 多数 bug 都出在“以为加了 dir 就万事大吉”，结果双向文本卡在中间不动，或者滚动条突然出现在左边却没配好 overflow-x。
