dir属性是HTML原生方向开关，必须显式设于根元素或容器，不可被CSS的direction替代，因其触发Unicode双向算法，影响光标、表单、焦点流及屏幕阅读器解析。
必须在根元素或具体容器上显式设置 dir="ltr" 或 dir="rtl"，dir="auto" 在多数生产场景下不可靠，不能替代明确声明。
为什么不能只靠 CSS 的 direction 属性
direction 只控制行内盒（inline formatting context）的对齐和换行方向，不触发 Unicode 双向算法（UBA），因此无法影响：
• input 和 textarea 中光标起始位置与退格行为
• 表单控件（如 select 下拉项、button 文本顺序）的内部渲染逻辑
• getSelection() 返回的文本起止偏移量
• 屏幕阅读器对文本逻辑顺序的解析
• Tab 键焦点流顺序（LTR 页面中按左→右跳，RTL 页面中按右→左跳）
当 dir 与 direction 同时存在时，dir 永远优先——这是 HTML 规范强制要求。
该在哪一层加 dir 才真正生效
层级错误是 RTL 页面最常见 bug 的根源：
• 全局 RTL 站点：必须在 上设置，否则 input 光标仍停左边、flex-direction: row 不会自动起点右移、滚动条不会出现在左侧
• 局部混排区域：对 <p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9263" title="Html2md"><img
src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="overflowclass">Html2md</a>
<p class="overflowclass">使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p>
</div>
<a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>、<blockquote></blockquote> 或 <span></span> 单独设 dir="rtl"，避免污染父级上下文
• 动态插入文本（如 API 返回用户名）：用 <bdi></bdi> 包裹，例如 <bdi>{{username}}</bdi>；不要用 <span dir="auto"></span>，它在 Safari 旧版和 Android WebView 中常失效
• 第三方组件内：若组件未适配 RTL（如 Bootstrap 表单、React UI 库），强行在父容器加 dir="rtl" 可能导致图标错位、间距反转，此时应配合 RTL 专用样式表重置 margin-left → margin-right 等逻辑属性
dir="auto" 哪些情况一定会失效
dir="auto" 依赖首个“强方向字符”（strong directional character）判断，但现实数据极少满足条件：
• 开头是数字（"123 عربي"）、ASCII 字母（"Hello عالم"）、空格或换行符 → 强制 fallback 到 ltr
• 开头是中文/日文/韩文（无方向性字符）→ 同样 fallback 到 ltr，不会识别为 RTL
• Vue/React 中初始 v-html 或 innerHTML 内容为空或含占位符，方向被锁定后不再重算
• 服务端渲染（SSR）时首字符尚未到达，HTML 已发出并被浏览器解析完毕
• textarea 设了 dir="auto"，但 placeholder 渲染时内容为空，光标默认停在左侧
混合文本（如阿拉伯语+英文 URL+数字）怎么不出错
纯靠继承方向容易让数字倒序（"123" 显示成 "321"）或括号反向，关键在隔离：
• 对整段混排内容，优先用 <p dir="rtl">النص بالعربية https://example.com ١٢٣</p> —— URL 和阿拉伯数字会自动保持正确顺序
• 若发现英文被强制 RTL 换行，给英文片段加 <span dir="ltr">https://example.com</span>
• 避免滥用 <bdo dir="rtl"></bdo>：它会强制翻转所有字符顺序，导致 "123" 变 "321"，仅用于调试或极特殊覆盖
• 不要用 unicode-bidi: bidi-override 替代 dir，它绕过 UBA，破坏可访问性和剪贴板行为
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
