必须用 dir 而非 direction: rtl 的情况是支持阿拉伯语、希伯来语等天然 RTL 语言时，因 dir 触发 Unicode 双向算法，影响数字/英文嵌入顺序、括号方向、光标移动及文本选择，而 direction 仅控制盒模型排版，不改变 Unicode 层面方向性。
HTML 中让文本从右向左显示，最直接有效的方式是使用 dir 属性，而不是靠 CSS 的 direction 或 text-align 模拟。
什么时候必须用 dir 而不是 direction: rtl
当页面要支持阿拉伯语、希伯来语等天然 RTL 语言时，dir 不只是“让文字靠右”，它会触发浏览器对 Unicode 双向算法（Bidi Algorithm）的完整处理——比如数字和英文嵌在阿拉伯文中时的顺序、括号方向、光标移动逻辑。只设 direction: rtl 的 CSS 无法影响这些底层行为。
-
dir="rtl"会改变元素内所有文本的基线方向（base direction），影响textarea光标、表单输入顺序、甚至getSelection()的起止位置 -
direction: rtl仅控制盒模型内的块级排版和部分内联流，不改变 Unicode 层面的方向性 - 若同时设置
dir="rtl"和direction: ltr，dir属性优先级更高
dir 属性该加在哪个层级最稳妥
加在 标签上，是最省事也最可靠的做法；局部切换则加在具体容器或内联元素上。
- 全局 RTL 页面：
—— 所有子元素默认继承，包括动态插入的节点 - 局部 RTL 区域：
<div dir="rtl">مرحبا</div>—— 注意：它不会自动让子元素里的阿拉伯数字“翻转”，但会正确包裹混合文本 - 避免只给
<p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill9972" title="Wechat Article Html"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="Wechat Article Html" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill9972" title="Wechat Article Html">Wechat Article Html</a> <p>将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。</p> </div> <a href="/xiazai/skill9972" title="Wechat Article Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>或<span></span>加dir却漏掉<input>或<textarea></textarea>，否则用户输入时方向会突变
常见错误：嵌套中文/英文时文字顺序乱了
典型现象是：<div dir="rtl">Hello 123 你好</div> 渲染出 “你好 123 olleH” 或括号反向，这是因为浏览器按 Unicode 类别分段处理，而中文字符属于“弱方向性”，容易被周围强 RTL 文本带偏。
立即学习“前端免费学习笔记（深入）”；
- 解决方案一：用 Unicode 方向标记符，如在中文前插入
（RLM，Right-to-Left Mark） - 解决方案二：给中文片段单独加
dir="ltr"，例如<span dir="ltr">你好</span> - 不要依赖
unicode-bidi: embed替代dir，它不被所有旧版 Safari 支持，且语义模糊
React/Vue 等框架里怎么安全写 dir
框架会把 dir 当作普通 HTML 属性处理，但要注意动态值绑定和 SSR 一致性。
- React 中写
dir={isRTL ? "rtl" : "ltr"}完全可行，无需额外 escape - Vue 模板中直接写
:dir="langDir"，但服务端渲染（SSR）时需确保初始langDir与客户端一致，否则触发 hydration mismatch - 避免在组件内部用
document.body.setAttribute('dir', ...)全局切换，这会绕过框架响应式，且可能被后续 CSS 或 JS 覆盖
真正难的不是加 dir，而是判断哪些文本片段需要独立方向控制——比如一个阿拉伯语界面里嵌入的 ISO 时间字符串、电话号码、代码片段，它们本质上仍是 LTR 内容，硬套父级 dir="rtl" 反而破坏可读性。
