选ltr还是rtl取决于文本语言类型：阿拉伯语等右向语言用rtl，中文英文等左向语言用ltr；混排需配合unicode-bidi，且direction不等于writing-mode，表单需显式设置dir属性或direction，rtl下应使用margin-inline-start/end等逻辑属性。
direction属性值选ltr还是rtl？看文本语言类型
direction 控制的是块级元素内行内内容的默认书写方向，不是旋转文字，也不是改变布局流的方向（那得靠 writing-mode）。它直接影响字符顺序、标点位置、数字对齐和双向文本（比如阿拉伯语混中文）的渲染逻辑。
- 阿拉伯语、希伯来语等天然从右往左书写的语言，用
direction: rtl - 中文、英文、日文等默认从左往右，用
direction: ltr（多数情况可省略，因为是浏览器默认值） - 混排场景（如阿拉伯语中嵌入英文URL或数字），仅设
direction不够，必须配合unicode-bidi: embed或isolate才能隔离双向算法影响
常见错误：给中文页面全局设 direction: rtl，结果数字、括号、链接顺序全乱，连表单输入光标都跑偏——这不是“美观翻转”，是破坏文本语义。
direction和writing-mode别混用
direction 只改文字排列起点和顺序，writing-mode 才决定整块内容是横排还是竖排、顶到哪边。两者作用维度不同，但会互相影响：
-
writing-mode: vertical-rl+direction: rtl：竖排，汉字从上到下，行从右往左排（传统日文/中文竖排） -
writing-mode: vertical-rl+direction: ltr：竖排，但行从左往右排（少见，可能用于特殊排版）
容易踩的坑：
立即学习“前端免费学习笔记（深入）”；
- 只改
direction却没调writing-mode，以为能实现竖排效果，实际只是把横排文字“镜像”了 - 在 Flex/Grid 容器里滥用
direction试图反转项目顺序——该用flex-direction: row-reverse或grid-auto-flow: column-reverse
input和textarea里的direction怎么生效？
表单控件默认继承父级 direction，但有例外：
-
input[type="text"]和textarea的内部文本方向由其自身dir属性或 CSSdirection控制，不受父容器 direction 影响 - 如果要让输入框内文字从右往左（比如输入阿拉伯语），必须显式设置：
input, textarea { direction: rtl; } - 更稳妥的做法是直接在 HTML 上加
dir="rtl"属性，比 CSS 更优先，且对光标行为、选区逻辑更可靠
典型问题：
- 用户在
direction: rtl的 div 里输入中文，发现光标总停在字右边、删除键行为反直觉——其实是浏览器按 RTL 规则处理光标，此时应避免对纯 LTR 内容强制设 RTL - 移动端 Safari 对
direction在textarea中的支持不稳定，建议混排时优先用dir属性
RTL布局下margin/padding的逻辑方向怎么理解？
当 direction: rtl 生效时，margin-left 和 margin-right 不随方向翻转，它们始终对应物理左右边。但 margin-inline-start 和 margin-inline-end 会响应 direction：
-
margin-inline-start→ 当前书写方向的“开头侧”，即direction: rtl下等于margin-right -
margin-inline-end→ 当前书写方向的“结尾侧”，即direction: rtl下等于margin-left
所以真正适配 RTL 的写法是：
- 用
margin-inline-start替代margin-left，用margin-inline-end替代margin-right - 避免在 RTL 场景下硬写
margin-right: 10px来“模拟开头距”，否则 LTR 下就错位了 -
text-align: start比text-align: left更安全，它会随direction自动对齐到行首
有些细节得手写测试才信——比如 direction 对 ::placeholder 的影响在各浏览器不一致，Chrome 支持，Safari 有时忽略；还有 contenteditable 元素里的双向文本，光靠 CSS 很难完全可控。
