必须在<html>上设dir="rtl"才能触发浏览器RTL底层机制，否则光标、Tab流、Flex起点、滚动条、屏幕阅读器全错；局部混排用<bdi>隔离，表单控件须单独加dir。
整页 RTL 必须从 <html> 开始设 dir="rtl"，否则光标、Tab 流、Flex 起点、滚动条位置全错——这不是样式问题，是浏览器底层双向算法未被触发。
为什么必须在 <html> 上设置 dir
浏览器只在根元素带 dir 属性时，才完整启用 RTL 感知机制。只给 <body> 或某个 <div> 加 dir="rtl"，会导致：
-
<input>和<textarea>光标仍从左入，退格行为异常 - Tab 键焦点流不翻转，用户按 Tab 仍从左到右跳
-
flex-direction: row主轴起点不变，项目不会自动右对齐 - 滚动条卡在右侧（即使系统支持 RTL，也不会移到左侧）
- 屏幕阅读器朗读顺序错误，阿拉伯语句子被颠倒解析
局部混排内容该用 <bdi>，不是 dir="auto"
dir="auto" 仅靠首字符判断方向，且只判断一次，不重算。真实数据中它几乎必然失效：
- API 返回的用户名是
"أحمد123"→ 首字符是阿拉伯字母，OK；但如果是"123أحمد"或" أحمد"（开头空格），直接 fallback 到ltr - 中文页面嵌一段阿拉伯引文：
"你好，مرحبا"→ 中文无方向性，dir="auto"强制当ltr处理 - Vue/React 中
v-html或innerHTML动态插入后，方向锁定不再更新 - Safari 对带变音符号的阿拉伯字母（如
مُرَحِّبًا）识别不稳定
正确做法是用 <bdi> 显式隔离：
立即学习“前端免费学习笔记（深入）”；
<p dir="rtl">النص بالعربية <bdi>https://example.com</bdi></p>
<bdi> 创建独立 Bidi 上下文，不影响父容器方向，也不翻转数字顺序，所有现代浏览器原生支持。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<input> 和 <textarea> 必须单独加 dir
即使父容器已设 dir="rtl"，<input> 内部光标和文本流向仍按文档默认走。不加 dir 就等于没适配：
- 用户输入阿拉伯语时，光标停在左边，退格键删的是最右字符（逻辑错位）
- 双击选词会反向，复制粘贴后 URL 或数字顺序颠倒
- placeholder 渲染时若为空，
dir="auto"直接 fallback 到ltr，光标默认左停
所以务必显式声明：
<input type="text" dir="rtl"><br><textarea dir="rtl"></textarea>
动态插入的表单控件也需同步设置，不能依赖继承。
别混淆 dir、direction 和 text-align
三者作用层级完全不同，混用会埋坑：
-
dir是 HTML 语义属性，触发 Unicode 双向算法（UBA），影响光标、选区、Tab 流、剪贴板粘贴顺序 -
direction: rtl是 CSS 渲染指令，只控制盒内文本流和换行方向，不触发 UBA ——<input style="direction: rtl">无法修复光标错位 -
text-align: right纯视觉对齐，括号、冒号方向全错，复制到记事本就是乱序
真正难的不是加 dir，而是判断哪一层该继承、哪一层该隔离、哪一层该用 <bdi> —— 多数方向 bug 都出在“以为加了 dir="rtl" 就结束了”，结果阿拉伯语里的英文 URL 被拆成两行还反向换行，或者表单光标还在左边。
