必须在 <html> 标签动态设置 dir="rtl" 和 lang="ar"，并配合 <bdi> 包裹混合内容、使用 CSS 逻辑属性及业务逻辑适配，才能完整支持 RTL。
直接在 Laravel 响应中设置 dir="rtl" 和 lang="ar" 是必须的起点，但仅靠这个远远不够——页面会文字右对齐，但表单光标错位、数字顺序颠倒、Flex 排序反向、图标镜像异常等问题会立刻暴露。
如何在 Laravel 响应中动态注入 RTL 属性
Laravel 不提供开箱即用的 RTL 检测，必须手动根据当前 locale 决定是否启用 RTL。核心是控制 HTML 根元素的 dir 和 lang 属性。
- 在 Blade 布局模板（如
resources/views/layouts/app.blade.php）的<html>标签上使用条件判断：<html lang="{{ app()->getLocale() }}" dir="{{ in_array(app()->getLocale(), ['ar', 'he', 'fa', 'ur']) ? 'rtl' : 'ltr' }}"> - 避免只在
<body>上加dir="rtl"：旧版 Safari 对<input>的光标定位和选中文本行为不一致，必须设在<html> - 如果使用 Laravel 的
App::setLocale()中间件（如SetLocale），确保它在响应生成前已执行，否则app()->getLocale()可能仍为默认值
为什么不能只靠 CSS 的 direction: rtl
direction: rtl 仅影响文本流与对齐，它不会触发浏览器对表单控件、滚动条、按钮图标、<select> 下拉箭头等 UI 元素的 RTL 感知。真正起作用的是 HTML 的 dir 属性。
-
<input type="text">在<html dir="rtl">下，光标从右侧进入、选中方向从右向左；仅用direction: rtl时，光标仍从左侧进入，体验断裂 -
<button>← 继续</button>中的箭头符号，在纯 CSS 方向切换下不会自动翻转位置，需额外处理 - 某些组件库（如 Ant Design Vue）依赖
dir属性做内部逻辑分支，忽略它会导致下拉菜单弹出方向错误、分页器按钮顺序错乱
Blade 中混合内容怎么防数字/英文被镜像
阿拉伯语文本里夹杂的电话号、版本号、URL 等 LTR 内容，会被 Unicode 双向算法（Bidi Algorithm）强制“粘连”到右侧并反转顺序，例如 +965 2222 3333 显示成 3333 2222 569+。
- 对所有可能含数字或拉丁字符的动态内容，统一用
<bdi>包裹：<bdi>{{ $user->phone }}</bdi> - 对已知固定格式的字符串（如
"iOS 18"、"v2.4.1"），显式加dir="ltr"：<span dir="ltr">iOS 18</span>
- 绝对不要用
unicode-bidi: plaintext强制关闭 Bidi 算法：它会让阿拉伯字母本身无法连字，显示为孤立字符，破坏可读性
CSS 适配必须改用逻辑属性而非物理属性
写死 margin-left、float: left、text-align: left 在 RTL 下会语义反转：前者变成“右边距”，后者变成“右对齐”。手动维护两套 class（如 ml-2 / mr-2）极易遗漏且不可持续。
- 全部替换为逻辑属性：
margin-inline-start替代margin-left，padding-block-end替代padding-bottom - 禁用
float：改用 Flex 或 Grid，配合justify-content: flex-start（自动映射为 RTL 下的“右对齐”） - 图标与文字顺序用
order控制，而不是flex-direction: row-reverse或transform: scaleX(-1)—— 后者会破坏 SVG 路径渲染和点击热区
最易被忽略的是：RTL 不只是样式问题，它牵动整个交互链路——确认按钮要放左侧、分页器第一页在最右、轮播图“向左箭头”代表“下一张”，这些都得在业务逻辑层同步调整，不能只靠 CSS 翻转。
