layui不原生支持rtl，直接加dir="rtl"会导致按钮顺序、图标方向、表单控件等错乱；需通过class="rtl"分层覆盖css（如用inline-start替代left）、patch js逻辑、提供rtl图标及阿拉伯字体，并避免unicode-bidi: bidi-override。
layui 本身不提供 RTL 布局原生支持，直接加 dir="rtl" 或 direction: rtl 会导致部分组件错位、图标反向、表单控件顺序混乱——这不是 CSS 层面加个属性就能解决的。
layui 的 dir="rtl" 为什么不能直接用
layui 的 DOM 结构和样式强依赖 LTR 假设：比如 .layui-btn-group 用 float: left 排列按钮，.layui-form-item 的标签与输入框默认左对齐，.layui-tab-title 的 tab 切换箭头方向硬编码为 ←/→。一旦全局加 dir="rtl"：
- 按钮组会挤到右边界，但内部顺序仍是“确认→取消”，而阿拉伯语用户期望“取消→确认”
- 日期选择器、下拉框的弹出方向仍朝右，遮挡输入框
- 所有带箭头的 icon（如
layui-icon-down）视觉朝向不变，但语义已反转 -
text-align自动变 right 是对的，但padding-left/margin-right等逻辑间距不会自动镜像
真正可行的 RTL 适配策略：CSS + JS 双层控制
必须放弃“一键 RTL”幻想，改为按需、分层处理。核心是：用 :lang(ar) 或自定义 class 触发 RTL 模式，再针对性覆盖关键样式 + 调整 JS 行为。
- 在
上动态加class="rtl"（而非仅靠dir），便于精准控制 - 重写所有涉及左右方向的 CSS：把
left/right替换为inline-start/inline-end，或用margin-inline-start替代margin-left - 对 layui 内部 JS 逻辑做 patch：比如
laydate的弹出位置计算、laypage的上一页/下一页按钮绑定，需根据document.documentElement.classList.contains('rtl')动态翻转逻辑 - 图标资源单独准备 RTL 版本：把
layui-icon-left的 SVG path 水平翻转，或用transform: scaleX(-1)局部修正
关键组件的手动 RTL 修复示例
以表单和分页为例，给出最小可落地改动：
/* 表单标签与输入框顺序翻转 */
.rtl .layui-form-item {
display: flex;
flex-direction: row-reverse;
}
.rtl .layui-form-label {
padding-right: 15px;
padding-left: 0;
}
.rtl .layui-input, .rtl .layui-textarea {
direction: rtl;
text-align: right;
}
<p>/<em> 分页按钮顺序 & 箭头语义修正 </em>/
.rtl .layui-laypage .layui-laypage-prev,
.rtl .layui-laypage .layui-laypage-next {
transform: scaleX(-1);
}
.rtl .layui-laypage .layui-laypage-prev { order: 2; }
.rtl .layui-laypage .layui-laypage-next { order: 1; }
</p>
注意：order 必须配合 display: flex 才生效；transform: scaleX(-1) 仅翻转图标，不改变事件绑定逻辑，所以 JS 层仍要判断 RTL 状态来交换「上一页」和「下一页」的实际行为。
容易被忽略的细节：字体、连字与数字
阿拉伯语不是简单“右对齐”，它有字符连写（ligature）、上下文形变（contextual shaping）、数字保持 LTR 等特性：
- 必须指定支持阿拉伯语的字体，如
Tajawal、Cairo或系统级"Segoe UI", "Noto Sans Arabic"，否则显示方块或断开连字 - 避免在阿拉伯语文本中混用英文数字：阿拉伯语用户习惯用
٠١٢٣٤٥٦٧٨٩（Unicode U+0660–U+0669），而非0123456789；后端返回数字前需做 Unicode 映射 -
unicode-bidi: bidi-override绝对禁用——它会强制字符逆序，破坏阿拉伯语连写规则 - 若使用
laytpl渲染模板，确保传入的阿拉伯语文本未经 HTML 实体转义（如إ→إ），否则浏览器无法触发 Unicode 双向算法
RTL 不是布局开关，而是语言渲染链的末端环节；从字体加载、文本预处理、CSS 流向到 JS 交互语义，每一环都可能断裂。最稳妥的做法是：只对明确标注 :lang(ar) 的节点启用 RTL 样式，其他一律保持 LTR，避免全局污染。
