仅加 dir="rtl" 不足以实现可用的 rtl 镜像布局——它只是触发点，不是终点；必须设在 上并同步 lang="ar"，否则表单光标、选中顺序、滚动条、语音规则等均异常，且需替换物理 css 属性为逻辑属性、用 处理混合内容、按语义重构图标与交互。
仅加 dir="rtl" 不足以实现可用的 RTL 镜像布局——它只是触发点，不是终点。
必须设在 lang
浏览器只在根元素带 dir 时才完整启用 RTL 行为：表单光标移动、文本选中顺序、滚动条位置、复制粘贴逻辑。局部设置（如 或包裹 <div>）会导致 Safari 光标跳错、双击选词反向、屏幕阅读器无法调用阿拉伯语音规则。
<p>正确写法是：</p>
<pre class="brush:php;toolbar:false;"></pre>
<p>动态切换时必须成对执行：</p>
<ul>
<li><code>document.documentElement.setAttribute("dir", "rtl")
document.documentElement.setAttribute("lang", "ar")漏掉 lang，字体连字不生效、数字显示为西方格式（123 而非 ١٢٣）、语音朗读错误。
margin-left / float: left 等物理属性不会自动翻转
这些 CSS 属性完全无视 dir="rtl"，硬写就会错位。比如 margin-left: 16px 在 RTL 下仍往左推，视觉上变成“右侧留白”。
应全部替换为逻辑属性：
-
margin-left→margin-inline-start -
padding-right→padding-inline-end -
float: left→float: inline-start -
left: 0→inset-inline-start: 0（或兼容写法：[dir="rtl"] .el { right: 0; }） -
text-align: right→text-align: end（推荐始终用start/end，而非left/right）
Safari 15.4+ 才完整支持 inset-inline-start 等新属性；旧版需搭配 [dir="rtl"] 选择器降级。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
混合内容里数字和英文会乱序，<bdi></bdi> 是关键
纯 dir="rtl" 不足以让嵌入的拉丁片段（如 v2.4.1、URL、品牌名）正确重排。现象是复制出来变成 1.4.2 v API，括号方向也翻转。
根本原因是 Unicode 双向算法（UBA）未被触发——而 UBA 的开关是 HTML 的 dir 属性，不是 CSS 的 direction。
解决方法只有两个有效选项：
- 对 LTR 片段显式包裹
<bdi>v2.4.1</bdi> - 或使用
<span dir="ltr">v2.4.1</span>
别用 direction: ltr 替代——它不参与 UBA，复制结果仍是乱序。
图标、动画、交互方向不能靠 transform: scaleX(-1) 硬翻
全局镜像 SVG 或按钮会导致路径语义丢失（比如「返回」箭头 ← 被翻成 →，但用户需要的是「指向左」，不是「左右翻转」）；动画方向错位（加载条从左往右动，在 RTL 下违反直觉）；手势逻辑混乱（左滑返回在 RTL 应改为右滑）。
正确做法是按语义重写：
- 返回箭头用独立 SVG：
<svg viewbox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6-6z"></path></svg>（专为 RTL 设计的左向路径） - 滑动菜单从右边缘唤出，而非「把 LTR 版本 scaleX(-1)」
- Tab 切换、时间线、跑马灯等序列类交互，主轴方向需主动设为
flex-direction: row-reverse，但要确认没和dir="rtl"叠加双重反转
最易忽略的一点：RTL 不是视觉翻转，而是**方向语义重构**——按钮顺序、点击热区、手势映射、甚至无障碍焦点流，都得重新校准。
