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，保持形狀可預測，圖形可讀。因此，阿拉伯語，希伯來語，波斯語或烏爾都語的界面將是自然而快速的-從投註券和支付表格到錦標賽桌和現場比賽。