必须在上设dir="rtl"，否则按钮顺序、tab焦点流、清除图标位置等交互行为全错；局部设置无效，因浏览器仅在根元素触发完整rtl上下文，影响flex主轴、uba及屏幕阅读器解析。
必须在 dir="rtl"，否则按钮顺序和交互行为全错
只给按钮容器或 加 dir="rtl"，按钮依然从左往右排列、Tab 键焦点还是左→右、点击清除图标位置错乱——浏览器只有在 根元素上看到 dir="rtl"，才会把整个文档当作 RTL 上下文来运行 Unicode 双向算法（UBA），从而影响按钮组的 flex 主轴起点、<button></button> 内部文字流、<input type="search"> 的清除按钮位置等底层行为。
错误写法：<div class="btn-group">
<button>إلغاء</button><button>تأكيد</button>
</div>
正确写法：（lang 必须同步设，否则阿拉伯数字连字、屏幕阅读器语音规则不生效）
dir="rtl" 会自动翻转按钮组顺序，但物理 CSS 属性不会跟着变
加了 后，display: flex; flex-direction: row 的按钮组默认从右往左排列，justify-content: flex-start 也自动对齐到右侧——这是浏览器原生支持的。但如果你写了 margin-left: 8px 给按钮，它仍会往左加间距，在 RTL 下反而导致按钮之间空隙出现在错误一侧。
- 必须把所有含
left/right的盒模型属性换成逻辑属性：margin-inline-start替代margin-left，padding-inline-end替代padding-right - 浮动类按钮（如旧式导航栏）不能用
float: left，得改用float: inline-start或降级写法：dir(rtl) { float: right; } - 绝对定位的按钮图标（如带箭头的提交按钮）别写
left: 4px，改用inset-inline-start: 4px，或兼容写法：dir(rtl) { right: 4px; }
按钮内嵌 LTR 内容（如 URL、版本号）要用 <bdi></bdi> 隔离
阿拉伯语按钮文字里如果混着英文或数字，比如 <button dir="rtl">تحديث إلى v2.4.1</button>，不处理就会显示成 “1.4.2 v تحديث إلى”，因为 UBA 没被触发。单纯靠父级 dir="rtl" 不够，必须显式包裹 LTR 片段。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 用
<bdi></bdi>：<button dir="rtl">تحديث إلى <bdi>v2.4.1</bdi></button> - 别用
direction: ltr替代 —— 它不参与 UBA，复制出来还是乱序 - 表单类按钮（如
<input type="submit">）无法套<bdi></bdi>，此时只能靠 JS 动态插入或服务端预渲染正确顺序的字符串
第三方按钮组件库几乎都不适配 dir="rtl"，别硬套
像 Bootstrap、Ant Design、MUI 这些库，默认所有边距、图标位置、清除按钮都按 LTR 假设写死。你强行在根元素加 dir="rtl"，结果往往是：图标跑到文字右边、悬停阴影方向反了、禁用态颜色错位、甚至 <button></button> 的 ::after 伪元素内容方向没翻转。
- 最稳妥做法：只在真正需要 RTL 的区域（比如多语言切换后的主内容区）启用
dir="rtl"，按钮组件保持独立封装 - 若必须全局启用，得配套重写所有方位相关样式，例如：
button .icon { margin-inline-start: 8px; }，而不是依赖库自带的margin-left - 注意 Safari ≤16.6 对
:dir(rtl)支持不全，别指望用它兜底旧版；优先用逻辑属性，:dir()只用于 transform 翻转图标这类必须条件判断的场景
真正麻烦的不是按钮排在哪，而是光标怎么跳、Tab 怎么走、复制粘贴后文本是否可读——这些全取决于 是否存在，以及有没有漏掉 <bdi></bdi> 和逻辑属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
