direction: rtl仅改变文本流方向而不翻转布局，需配合逻辑属性、unicode-bidi隔离、HTML的dir属性及flex/grid反转等实现真正RTL支持。
direction: rtl 只改文本流，不翻转整个布局
设置 direction: rtl 的本质是告诉浏览器：这个块内行内内容的默认书写起点是右侧，字符顺序、标点位置、数字对齐、光标移动方向都按 RTL 语义重新计算。它**不会**让 margin-left 变成右边距，也不会把 float: left 渲染到右边——盒模型和传统物理方向属性照常工作，只是“left”“right”在 RTL 上下文中被解释为逻辑起点/终点（即视觉右/左）。
常见错误现象：div { direction: rtl; } 后发现文字右对齐了，但内部 span 顺序没变、按钮图标还在左边、padding-left: 20px 看起来像加在了右边——这恰恰说明它生效了，只是你还在用物理属性思维写样式。
- 真正需要镜像 UI（比如整页 RTL 化），应配合使用逻辑属性：
margin-inline-start替代margin-left，text-align: start替代text-align: right - 纯中文或英文段落强行加
direction: rtl会导致句号跑前面、括号反向、数字分组错乱，这不是排版优化，是破坏语义 - 表单控件（
input、textarea）默认不继承父级direction，必须显式设置direction: rtl或 HTML 的dir="rtl"属性才能让输入光标和文字顺序正确
混排阿拉伯语/希伯来语时，unicode-bidi 不是可选项
当一段 RTL 容器里嵌入英文 URL、数字编号或中文短语时，仅靠 direction: rtl 无法阻止 Unicode 双向算法（Bidi Algorithm）自动重排。典型表现：URL 中的斜杠 / 出现在域名左侧、"123.45" 被拆成 "54.321"、中文引文首字跑到末尾。
此时必须用 unicode-bidi 隔离上下文：
立即学习“前端免费学习笔记（深入）”；
- 对外部不可控数据（如用户昵称、搜索词），优先用
<bdi>标签包裹，它等价于unicode-bidi: isolate，最安全 - 对已知 LTR 内容块（比如英文标题），加
unicode-bidi: embed或直接设dir="ltr"属性 - 避免使用
unicode-bidi: bidi-override—— 它强制覆盖所有双向逻辑，容易让数字、标点彻底失序，仅限极少数调试场景
RTL 布局中，text-align 和 writing-mode 的分工必须理清
text-align 控制的是行内内容在行盒内的对齐位置，而 writing-mode 控制的是整块内容的排列方向（横排/竖排 + 行堆叠顺序）。两者常被误用。
例如：writing-mode: vertical-rl 让文字竖排，但默认仍按 LTR 逻辑从左往右堆叠行；若要实现传统日文/维吾尔文竖排且行从右往左排，需同时写：writing-mode: vertical-rl; direction: rtl;。反过来，只写 direction: rtl 而不改 writing-mode，永远得不到竖排效果。
-
direction: rtl+text-align: start→ 文本右对齐（符合 RTL 习惯） -
direction: rtl+text-align: end→ 文本左对齐（少见，可能用于某类标签对齐） - 表格（
table）上直接设direction: rtl会打乱<colgroup>和<th>的视觉顺序，应改用 HTML 属性<table dir="rtl">
根元素设 dir="rtl" 比 CSS 更可靠
给 <html> 或 <body> 加 CSS 的 direction: rtl，浏览器不一定据此调整 placeholder 文字方向、滚动条位置、details/summary 箭头朝向、甚至屏幕阅读器播报顺序。这些行为由 HTML 的 dir 属性驱动，CSS 的 direction 仅作用于渲染层。
所以，真正要做全站 RTL 支持，第一件事是：<html lang="ar" dir="rtl">。之后再用 CSS 微调，比如：
- 用
margin-inline-start统一控制侧边距，避免在 RTL 下margin-left意外出现在右侧 - 图标按钮需镜像时，别靠
transform: scaleX(-1)，那会翻转文字；应换用 RTL 专用图标字体或 SVGviewBox调整 - Flex/Grid 项目顺序反转，请用
flex-direction: row-reverse或grid-auto-flow: column-reverse，而不是指望direction生效
最易被忽略的一点：RTL 页面中，键盘 Tab 顺序、焦点环移动路径、以及 order 属性的行为，都依赖于 dir 属性而非 CSS direction —— 这直接影响可访问性，不能只靠样式补救。
