国际化 RTL 镜像测试
当切换到 RTL 模式时，阿拉伯文排版会让文本右对齐，头像和返回箭头亦将随之换位镜像。
25. 🌐 国际化 RTL Inversion ★★★★☆
🌏 Web 网页规范
- 镜像机制: CSS 逻辑属性 (`margin-inline`)、`dir="rtl"` 属性
- 布局排版: 网页宽度拉伸后两端对齐逻辑完全颠倒
- 图标方向: 仅需在 RTL 下为指向性图标（如箭头）配置翻转
- 多国语言: 多字体加载，CSS 书写模式支持从右往左流
📱 App 移动端规范
- 镜像机制: Auto-layout 约束左起/右起自动反转
- 布局排版: 移动端单列排版宽度有限，文本需要精准右对齐
- 图标方向: 资源文件夹自动加载镜像图标、水平翻转属性
- 多国语言: 国际化多语言字符串本地配置映射，自动排布适配
Web 端利用 CSS 属性 direction: rtl 自动调整文字阅读顺序，配合网格系统的镜像翻转与 LTR/RTL 切换按钮实现镜像。
国际化（Internationalization），常缩写为 i18n（因为首字母 i 和末字母 n 之间有 18 个字母），是指让产品无需修改代码即可适配不同语言、地区和文化的设计与工程实践。它不仅是"翻译文字"——还涉及 RTL（从右到左）排版翻转（如阿拉伯文、希伯来文）、日期/数字/货币格式差异（如 1,000.50 vs 1.000,50）、文化色彩语义（红色在中国代表喜庆，在西方代表危险）、以及字体与排版适配（德语单词极长，日语需支持竖排）。国际化的对立面是本地化（Localization / L10n）——国际化是"做好架构准备"，本地化是"针对具体地区填充内容"。
💡 通俗理解国际化 (i18n)
命名由来：Internationalization 首字母 I、尾字母 n，中间有 18 个字母，因此简称 i18n。
什么是国际化：开发产品时预留适配全球不同地区的能力，不用修改核心代码就能切换语言、日期、货币、排版方向。
🎯 核心作用与意义
- 拓展海外市场，自适应适配各国用户阅读习惯
- 满足不同地区法规、文化视觉禁忌与隐私规范
- 解耦国际化（底层适配框架开发）与本地化（纯文案翻译）
📋 常见场景对比示例
📅 日期格式：中文 2026-07-01 / 美式 07/01/2026 / 欧式 01.07.2026
✍️ 排版方向：中文/英文从左到右 (LTR) / 阿拉伯语/希伯来语从右到左 (RTL)
App 端集成在原生开发框架中，使用 Auto Layout 自动镜像对称布局，确保返回箭头图标、头像、进度条方向在 RTL 语言环境下自动翻转。
LIVE PLAYGROUND: LTR -> RTL 布局水平轴镜像一键转换
点击切换按钮，观察卡片排版、按钮、头像甚至返回图标镜像翻转
https://web.meta-ui.edu/rtl-mirroring
← 返回
U
📋 大模型统一 Prompt (LLM Prompt)