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