dir属性仅支持ltr、rtl、auto三个值，其中ltr和rtl可信赖，auto因依赖首字符判断且易fallback至ltr，线上项目不推荐使用。
dir属性只接受三个值：ltr、rtl、auto
HTML的dir属性是全局属性，但合法取值仅有ltr、rtl和auto。其中只有ltr和rtl是生产环境可信赖的——auto依赖首字符方向性判断，现实中极易失效：开头是数字（"123 عربي"）、ASCII字母（"Hello أهلا"）、中文/日文/空格或换行符，都会强制 fallback 到ltr，根本不会识别为 RTL。
全局 RTL 必须设在 元素上
只给<body dir="rtl">或某个<div dir="rtl">加属性，无法真正启用浏览器的 RTL 感知机制。后果包括：<input>光标仍从左起始、Tab 焦点流不翻转、<select>下拉项顺序不变、滚动条卡在右侧、Flex 主轴起点不右移。
- 正确写法：
<html dir="rtl" lang="ar">（lang必须同步设置，否则字体连字、数字样式、屏幕阅读器语音规则均异常） - SPA 动态切换语言时，必须执行：
document.documentElement.dir = "rtl"，不能只改子元素 - 不要指望 CSS
direction: rtl能替代它——它不触发 Unicode 双向算法（UBA），对光标、选区、焦点流、复制粘贴顺序完全无影响
局部混排用 ，别用 dir="auto"
用户输入、API 返回的用户名、搜索词等不可控内容，方向不确定，且可能以中性字符（如中文）或数字开头。此时dir="auto"必然失效，而直接套<div dir="rtl">又会污染上下文。
- 应使用
<bdi>隔离：<bdi>{{username}}</bdi>，它创建独立双向上下文，不继承也不影响父级方向 -
<bdo dir="rtl">不是替代方案——它强制逐字符反转（"123"变"321"），仅适合调试或动效，会破坏复制、可访问性和输入逻辑 - 表单内嵌内容（如
<td dir="rtl"><input></td>）需单独为<input>设dir="rtl"，否则输入框内部方向仍按文档默认走
dir 和 CSS direction 不可互换，但要协同使用
dir是语义层开关，决定文本逻辑方向并触发 UBA；direction是渲染层控制，只影响行内对齐与换行。二者共存时，dir永远优先。
立即学习“前端免费学习笔记（深入）”；
- 混合文本（如阿拉伯语段落含英文 URL）需显式包裹：
<p dir="rtl">النص بالعربية <bdi>https://example.com</bdi></p> - CSS 中方位相关属性（
margin-left、padding-right、float: left、text-align: right）不会随dir自动翻转，必须改用逻辑属性（margin-inline-start）或配合:dir(rtl)伪类重置 - 避免
flex-direction: row-reverse与dir="rtl"叠加——会导致子项顺序被翻转两次，逻辑混乱
dir="rtl"，而是判断该在哪一层加、哪一层该用<bdi>隔离、哪一层该用 CSS 逻辑属性兜底。多数线上 bug 都出在“加了就以为完了”，结果阿拉伯语里的 URL 被拆断、括号方向反向、用户复制出来是一串乱序字符。 
