RTL支持
1）原则
1.RTL不是文本翻译，而是反映思维方式。轴、读取顺序、焦点顺序、手势和导航都会发生变化。
2.逻辑CSS属性而不是left/right。转到"margin-inline-start"、"inset-inline-end"、"border-start-start-radius"等。
3.全局包括方向，局部隔离LTR片段。数字，URL，代码，电子邮件和IBAN始终从左到右读取。
4.镜像取决于方向而不是意义的东西。"Play"，"↗"，"↙"和时钟/过程图标可能无法镜像。
5.测试伪RTL。在退出之前启用'dir='rtl'/'direction： rtl'和伪翻译。
2）方向： "dir"和逻辑属性
全球/基于文档：html
<html lang="ar" dir="rtl"> … </html>css
.card { padding-inline: 16px; margin-inline: 12px; }
.sidebar { inset-inline-start: 0; }
.button { border-start-start-radius: 12px; border-end-end-radius: 12px; }css
:root:dir(rtl). breadcrumb { flex-direction: row-reverse; }
:root:dir(ltr). breadcrumb { flex-direction: row; }html
<p dir="auto">…</p>3） BiDi和溷合文本隔离
将阿拉伯/希伯来语与拉丁语/数字混合会破坏字符顺序。使用BiDi隔离：- 标签：''（隔离方向），''（强制覆盖）。
- '\u2066' LRI /'\u2067' RLI-LTR/RTL绝缘体的开始，'\u2069' PDI-结束，
- '\u200E'LRM /'\u200F'RLM是用于短插入的单字节标记。
html
<span dir="rtl">
سحب <bdi dir="ltr">IBAN AE070331234567890123456</bdi> بمبلغ
<bdi dir="ltr">2,000. 00 UAH</bdi>
</span>4）导航、层次结构和布局
Breadcrumbs：顺序镜像："الصفحة الرئيسية ‹ الرهان ‹ التأكيد"。
面板/菜单：主要Navbar-右；向后指向左侧（在RTL字符串的开头）。
卡/清单：按入线开始对齐标题；状态图标-到inline-end。
旋转木马和刷卡：向直线开始倾斜（在RTL-右）。页面指示灯也是镜像的。
分割："下一个"箭头在inline-start,"前一个"在inline-end。
5）图标和图像
镜像方向图标：箭头，"前进/后退"，季后赛，"展开/折叠"。
不要镜像：文本图标，图形，时钟（如果有真正的时间箭头），品牌徽标。
css
.rtl-mirror { transform: scaleX(-1); transform-origin: center; }
html:dir(rtl). icon--arrow { transform: scaleX(-1); }对于SVG：使用"变形盒：视箱",以免被"鞭打"。
避开图像中的文本→用单独的层进行本地化。
6）表格和输入
内容对齐："text-align： start；"文本框,数字/总和/URL/e-mail-LTR。
属性：html
<input type="email" dir="ltr" inputmode="email" autocomplete="email">
<input type="number" dir="ltr" inputmode="numeric" pattern="[0-9]">
<input type="tel" dir="ltr" inputmode="tel" autocomplete="tel">Placeholder/label是本地化的，但是数字/代码中的caret必须从左到右。
面具：不要强硬"拦截"caret；支持插入和突出显示。
清单/无线电/检查箱：控制器右侧的签名，点击区域≥ 44 × 44 px。
滑动器min→max：在RTL中，最小值在右边缘，最大值在左边缘（或显示无反转量表和LTR数字）。
7）数字、日期、货币
默认情况下，阿拉伯语indocifras（٠١٢٣٤٥٦٧٨٩）适用于阿拉伯语区域。解决方桉-业务政策：- 在财务UI中，出于互操作性的考虑，拉丁数字（0-9）更经常显示，但格式（空格/标志）在各个位置显示。
js new Intl. NumberFormat('ar', { style:'currency', currency:'AED' }). format(2000);
new Intl. DateTimeFormat('he-IL', { dateStyle:'medium', timeStyle:'short' }). format(new Date());相对时间（'Intl。RelativeTimeFormat'），定向分隔符和本地天数/月数缩减。
8）印刷和可读性
具有良好阿拉伯/希伯来语图形和连字的字体（阿拉伯语缩写）。
字符串间距1。4–1.6;避免狭窄的跟踪。
对于阿拉伯语，宽度对齐时允许使用kashida（笔划延伸）-小心翼翼地打开（"文本正义：字对字，"/引擎支持）。
在阿拉伯语行中禁止斜体拉丁语（破坏垂直节奏）。
9）图形、比例表和表格
X轴从右到左行驶；图例与直线端对齐。
表列："主"列（名称/游戏）-右侧；数字/金额可以保留为LTR，并与inline-end对齐。
html
<bdi dir="ltr">+12. 5%</bdi>10）A11y和屏幕阅读器
确保'lang='ar'/'lang='he'展出：TTS引擎将选择正确的配音。
轻轻地表达动态方向变化-不要无需在片段中切换"dir"。
Live更新（'aria-live='polite'）是没有方向混合的文本。
没有文本标签，图标不会传达含义。使用"aria-label"。
11） iGaming的细节
11.1优惠券（betslip）
字段顺序：总和→系数→潜在收益；右边的签名，LTR数字/单位。
更新的系数轻轻地突出显示；"向上/向下"箭头不需要镜像（价格方向的含义是通用的）。
11.2比赛/市场
联赛/事件列表按直线开始（在RTL-右）对齐。
计时器和计数器是LTR 'dir="ltr"，带有表数字（'font-variant-numeric：tabular-nums；'）。
11.3 付款/CUS
IBAN/BIC字段/电话始终为LTR。
银行名称/地址是RTL。
错误/验证器在右侧显示标记。
11.4场比赛/排行榜
专栏：位置，尼克，眼镜-右侧位置；按直线端对齐眼镜（LTR数字）。
12）生产和测试
处女中的伪RTL：css html. debug-rtl { direction: rtl; }css html:dir(rtl). icon-dir { transform: scaleX(-1); }- "dir=rtl"下的布局快照。
- 检查CSS中没有"左/右"（lint）。
- E2E：制表顺序，旋转木马，滑动器的行为。
- 带有阿拉伯文文本+LTR插入的视觉测试（电子邮件，总和）。
13）设计系统令牌（示例）
json
{
"direction": {
"supported": ["ltr", "rtl"],
"rtlLocales": ["ar", "he", "fa", "ur"]
},
"layout": {
"gap": { "sm": 8, "md": 12, "lg": 16 },
"useLogicalProps": true
},
"icons": {
"autoMirror": true,
"exclude": ["logo", "chart", "clock", "play"]
},
"forms": {
"numericDir": "ltr",
"minTap": 44
},
"a11y": { "contrastAA": true, "live": "polite" }
}14）Snippets
在应用程序中切换方向（React）：tsx import { useEffect } from "react";
export function useDirection(locale: string) {
useEffect(() => {
const lang = locale. split("-")[0];
const isRTL = ["ar", "he", "fa", "ur"].includes(lang);
const html = document. documentElement;
html. setAttribute("dir", isRTL? "rtl": "ltr");
html. setAttribute("lang", locale);
}, [locale]);
}css
.breadcrumb { display:flex; gap:8px; }
html:dir(rtl). breadcrumb { flex-direction: row-reverse; }
.breadcrumb__sep { transform: scaleX(var(--dir,1)); }
html:dir(rtl). breadcrumb__sep { --dir: -1; }html
<span>الربح المحتمل: <bdi dir="ltr">2,000. 00 UAH</bdi></span>css html:dir(rtl) input[type="range"] { direction: rtl; }15）反模式
硬的"左/右"样式→打破了RTL。
输入数字/IBAN/URL而不是'dir='ltr' →"破碎"caret和顺序。
镜像徽标/图形/时钟。
相同的图标集总是镜像-含义上没有例外。
旋转木马，叶子和分期未翻转。
没有BiDi隔离的混合字符串→"跳舞"字符。
16）度量标准
RTL覆盖：通过RTL评论的屏幕比例。
BiDi缺陷/版本：溷合文本错误数。
关键任务执行时间（LTR vs RTL）：不应有所不同>5-10%。
数字表单中的输入错误：具有不正确caret/mask的事件比例。
CLS/perf：在"dir"转换时不跳跃布局。
17） QA支票清单
方向和布局
- "对于RTL区域；'：dir （rtl）"样式适用。
- 逻辑属性而不是"左/右"。
- 导航/妄想/旋转木马/分页镜是正确的。
文本和BiDi
- 数字/货币/URL/e-mail-'dir='ltr'或''。
- 溷合字符串中没有"倒置"字符。
- 日期/货币通过"Intl."本地化。
表格
- 右边的签名；点击区域≥ 44 × 44 px。
- 电话/IBAN/金额-LTR caret,正确的口罩。
- 幻灯片/低点/高点表现得令人期待。
图标/图像
- 只有定向镜像；例外情况得到遵守。
- 图片中没有本地版本的文本。
A11u/表演
- "lang"展出；SR正确阅读。
- 在更换"dir"时没有额外的重绘。
- 对比/焦环对应于AA。
18）设计系统中的文档
Direction＆BiDi部分：镜像策略，图标异常列表。
RTL 令牌套装和linter样式（禁止"左/右"）。
Do/Do n't Gallery：旋转木马、杂物、数字形状、滑块、图形。
伪RTL脚本和评论支票单。
简短摘要
正确的RTL支持是逻辑CSS属性，有意识的镜像和严格的BiDi隔离。在LTR 、镜像导航和定向图标中隔离数字/URL，保持形状可预测，图形可读。因此，阿拉伯语，希伯来语，波斯语或乌尔都语的界面将是自然而快速的-从投注券和支付表格到锦标赛桌和现场比赛。