根元素必须设 dir="rtl" 才能启用完整 RTL 行为链，仅 body 或 div 设 dir 无效；混合文本需用 <bdi> 隔离，表单控件须显式设 dir 属性。
根元素必须设 dir 才能真正启用 RTL 逻辑
只给 <body> 或某个 <div> 加 dir="rtl"，表单光标、Tab 焦点流、Flex 主轴起点、滚动条位置都不会翻转——浏览器只在 <html> 上看到 dir 时才激活整套 RTL 行为链。
常见错误包括：
- SSR 渲染时漏掉
<html lang="ar" dir="rtl">，导致 hydration 后方向不一致 - 客户端切换语言时只改
document.body.dir，document.documentElement.dir没同步，输入框光标仍从左入 - 第三方 UI 库（如 MUI、Ant Design）依赖
<html>的继承方向生成类名（如ms-2→me-2），根方向错，样式直接失效
dir="auto" 在生产环境几乎不可靠
dir="auto" 依赖首字符的 Unicode 类别判断方向，但真实内容常让它误判：
- 首字符是数字（
"123 أهلا"）、ASCII 字母（"Hello عالم"）、空格或中文，一律 fallback 到ltr - 动态插入内容（如
el.innerHTML = apiText）后不会重新触发方向检测 - Safari 对带变音符号的阿拉伯字符支持不稳定，Chrome/Firefox 行为也不完全一致
线上项目应明确指定 dir="ltr" 或 dir="rtl"；仅在低风险用户评论预览等场景谨慎使用 dir="auto"，且需前端校验首非标点字符。
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
混合文本必须用 <bdi> 隔离，不是靠 dir 覆盖
当一段内容来自 API（如用户名、搜索词），方向不确定且可能混排（"أحمد123"），直接写 <span>{{username}}</span> 会污染父级 Bidi 上下文，导致整段文字顺序错乱。
正确做法是：
- 用
<bdi>包裹：<bdi>{{username}}</bdi>，它自动创建独立双向隔离上下文 - 避免用
<bdo dir="rtl">—— 它强制重排，会把"123"显示成"321"，仅用于调试 - 不要只写
style="direction: rtl"，它不触发 Bidi 算法，复制到记事本仍乱序
表单控件必须显式设 dir，CSS direction 无效
<input> 和 <textarea> 的光标起始位置、退格行为、选区方向、placeholder 渲染逻辑，都由 dir 属性决定，direction: rtl 完全不起作用。
实操要点：
- RTL 页面中，每个
<input type="text">和<textarea>都要加dir="rtl" - 含英文 URL 或人名的阿拉伯语段落，应在内联元素上单独设
dir="ltr"（如<span dir="ltr">https://example.com</span>） -
<select>下拉项、<button>文本方向也受dir影响，不能仅靠 CSS 对齐
真正难的不是加 dir，而是判断哪一层该继承、哪一层该隔离、哪一层该用 <bdi>——多数 bug 都出在“以为设了 dir="rtl" 就结束了”。
