应使用 html 属性 dir="rtl" 而非 css direction: rtl，因前者激活完整 rtl 渲染链（光标、表单、uba 等），后者仅影响文本流；混排内容需用 隔离，表格 rtl 需设于 元素，边距等应改用逻辑属性。
直接用 dir="rtl" 就行，但别只加在 <p></p> 或 <span></span> 上
局部文本 RTL 不是靠 CSS 的 direction: rtl 搞定的——它只改渲染方向，不触发浏览器完整的 RTL 感知机制。比如你在 <span style="direction: rtl"></span> 里写阿拉伯语，光标跳转、双击选词、复制粘贴顺序大概率出错。
真正起效的做法是给该元素加 HTML 属性 dir="rtl"：
<p>正常 LTR 文本 <span dir="rtl">النص العربي هنا</span> 继续 LTR</p>
这样浏览器会按 Unicode 双向算法（UBA）处理嵌套内容，URL、数字、括号都能保持可读顺序。但如果里面混了英文或版本号（如 v2.4.1），还得包一层 <bdi></bdi>：
<span dir="rtl">مرحبا <bdi>v2.4.1</bdi> وشكراً</span>
-
<bdi></bdi>是语义正确的隔离方式，复制出来仍是v2.4.1，不是1.4.2 v - 别用
unicode-bidi: isolate替代<bdi></bdi>——它不参与 UBA，效果不可靠 - 避免对
<input>或<textarea></textarea>只设direction: rtl，必须加dir="rtl"或dir="auto"，否则退格键行为异常
<div dir="rtl"> 和 <code>style="direction: rtl" 的实际差异在哪
两者视觉上可能一样，但底层行为完全不同：
-
dir="rtl"是 HTML 属性，告诉浏览器“这个元素及其子元素属于 RTL 语境”，会激活完整 RTL 渲染链：光标逻辑、表单控件位置、滚动条方向、<select></select>下拉箭头翻转 -
style="direction: rtl"只影响文本流和部分盒模型（如text-align），但<input type="search">的清除按钮还在右边，<textarea></textarea>光标仍从左开始跳 - 旧版 Safari 对
dir属性非常敏感：可以，但<div dir="rtl"> 套 <code><input>仍可能出问题；最稳的是根元素表格里部分单元格 RTL 怎么写才不乱
给单个
<td> 加 <code>dir="rtl"是可行的，但要注意表格结构本身不受影响——列顺序不会反转，只是单元格内文字右对齐。如果想让整张表按 RTL 逻辑排列（比如第1列显示在最右边），必须给
<table> 加 <code>dir="rtl"：الاسم البريد أحمد ahmad@example.com - 仅靠
style="direction: rtl"加在<table> 上无效，列顺序不变，文字还可能挤在左侧 <li><code><th> 和 <code><td> 要显式设 <code>style="text-align: right"，direction: rtl不保证对齐 - 避免用
<col>控制宽度，RTL 下width行为不稳定；改用min-width或直接设在<th>/<code><td> <h3>为什么 <code>dir="rtl"后 margin-left 还往左跑因为
dir="rtl"不会自动把margin-left变成margin-right——它只影响逻辑方向，不重写物理属性。要让边距随方向翻转，必须用逻辑属性：
-
margin-left→margin-inline-start -
padding-right→padding-inline-end -
float: left→float: inline-start -
left: 20px→inset-inline-start: 20px（现代写法）或降级为[dir="rtl"] { right: 20px; } -
background-position: left top→background-position: inline-start top
最容易被忽略的是
text-align: right——它在 RTL 容器里反而会让文字靠左。应该统一用text-align: end（对应 RTL 的“右”）或text-align: start（对应 RTL 的“左”）。 -
- 仅靠
