全局rtl必须设在上，无效；表格单元格需单独设dir="rtl"；混排文本用而非dir="auto"；css direction不触发uba，不能替代dir属性。
别写“完整教程”——dir属性根本不需要从头学，只需要知道在哪加、为什么必须这么加、不这么加会出什么具体问题。
全局 RTL 必须设在
浏览器只认 作为整页方向基线。设在 或某个 <div> 上，会导致：
<ul>
<li>
<code><input> 和 <textarea></textarea> 光标仍从左入，退格方向错乱
flex-direction: row 主轴起点不变，项目仍从左开始排列这些不是“样式没对”，而是 Unicode 双向算法（UBA）压根没被触发。HTML 规范明确要求：只有 的 dir 才初始化文档级 bidi 上下文。
表格单元格方向必须单独设 dir="rtl"，<table> 或 <code><tr> 上设没用
<p>表格容器（<code><table>、<code><tr>）不参与文本排版，方向不继承。即使整页是 RTL，<code><td> 里阿拉伯语仍可能左对齐、光标错位。
<p>正确写法：</p>
<pre class="brush:php;toolbar:false;"></pre>
<table><tr>
<td dir="rtl">مرحبا</td>
<td dir="ltr">Hello</td>
</tr></table>
<p>如果单元格内含 <code><input>，还得再给它单独加 dir="rtl"——否则输入框内部仍按文档默认方向走。
动态插入的混排文本（如用户名、URL）该用 <bdi></bdi>，不是 dir="auto"
<bdi></bdi>，不是 dir="auto"
dir="auto" 只看首字符，且只判断一次。遇到以下情况直接 fallback 到 ltr：
- 开头是数字（
"123 عربي"） - 开头是 ASCII 字母（
"Hello أهلا"） - 开头是中文/日文（中性字符，无方向性）
- JS 动态插入内容后，方向不再重算
API 返回的用户名、搜索词这类不可控内容，必须用：
<bdi>{{username}}</bdi>
<bdi></bdi> 创建独立 bidi 环境，避免污染父容器，也解决标点重排错误。而 <bdo dir="rtl"></bdo> 会强制把 "123" 显示成 "321"，仅适合调试。
别用 direction: rtl 替代 dir="rtl"，它们作用层级完全不同
CSS 的 direction 只控制行内盒对齐和换行方向，不触发 UBA。结果就是：
-
<input style="direction: rtl">输入阿拉伯语时，退格键跳位、双击选词反向 - 复制粘贴英文 URL 后顺序颠倒
- 屏幕阅读器仍按 LTR 顺序朗读
dir 是 HTML 语义属性，决定浏览器如何解析文本逻辑流；direction 是呈现层微调。二者可共存，但 dir 永远优先。
真正难的不是加 dir，而是判断哪一层该继承、哪一层该隔离、哪一层该显式覆盖——多数方向 bug 都出在“以为加了 dir="rtl" 就结束了”，结果阿拉伯语里的英文 URL 被拆成两行还反向换行，或者表单光标还在左边。
