Suport RTL
1) Principii
1. RTL nu este o traducere a textului, ci o oglindire a gândirii. Axe, ordinea de citire, ordinea de focalizare, gesturi și schimbare de navigare.
2. Proprietăți CSS logice în loc de stânga/dreapta. Du-te la "marja-inline-start", "inset-inline-end'," border-start-start-raza ", etc.
3. La nivel global porniți direcția, izolați local fragmentele LTR. Numerele, URL-urile, codurile, e-mailul și IBAN-ul sunt întotdeauna citite de la stânga la dreapta.
4. Oglindă ceea ce depinde de direcție, nu înseamnă. „Joaca”, „↗”, „↙” și icoane ceas/proces nu pot oglindi.
5. Testează pseudo-RTL. Includeți 'dir =' rtl' '/' direcție: rtl' și pseudo traduceri înainte de a ieși.
2) Direcție: „dir” și proprietăți booleene
La nivel global pe document/rădăcină: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 și izolarea textului mixt
Amestecarea arabă/ebraică cu latină/numere rupe ordinea caracterelor. Utilizați izolarea BiDi:- Etichete: '' (izolează direcția), 'Jetoane Unicode:
- '\u2066 'LRI/' u2067' RLI - începutul izolării LTR/RTL, '\u2069 'PDI - end,
- '\u200E 'LRM/'\u200F' RLM - jetoane single-byte pentru inserții scurte.
html <span dir="rtl"> سحب <bdi dir="ltr">IBAN AE070331234567890123456</bdi> بمبلغ <bdi dir="ltr">2,000. 00 UAH</bdi> </span>4) Navigare, ierarhie și machete
Pesmet: ordine în oglindă: " " "
Panouri/meniuri: bara navala principala - pe partea dreapta; „înapoi” indică spre stânga (la începutul liniei RTL).
Carduri/liste: aliniați anteturile la inline-start; pictogramele de stare - la inline-end.
Carusele și glisele: defilare spre inline-start (în RTL - la dreapta). Indicatorii de pagină sunt, de asemenea, oglindite.
Paginare: săgeata „următor” merge la inline-start, „anterior” - la inline-end.5) Icoane și imagini
Oglindă icoane direcționale: săgeți, „înainte/înapoi”, playhead', extinde/colaps'.
Punct de vedere tehnic:
Nu oglindiți: pictograme de text, grafice, ore (dacă există o săgeată în timp real), logo-uri de brand.css .rtl-mirror { transform: scaleX(-1); transform-origin: center; } html:dir(rtl). icon--arrow { transform: scaleX(-1); }Pentru SVG: utilizaţi 'transforme-box: view-box;' pentru a evita „plutirea”.
Evitaţi textul din interiorul imaginilor → localizaţi în straturi separate.6) Formulare și intrare
Alinierea conținutului: aliniere text: pornire; 'câmpuri text, numeric/sume/URL/e-mail - LTR.
Atribute: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">Înlocuitorul/eticheta sunt localizate, dar caret în numere/coduri trebuie să meargă de la stânga la dreapta.
Măști: nu „interceptați” careta aspru; suport de inserare și selecție.
Listă/radio/casetă de selectare: semnături în dreapta comenzilor, faceți clic pe zone ≥ 44 × 44 px.
glisoarele min→max: în RTL, cel puțin pe marginea dreaptă, cel mult pe stânga (sau arată o scală fără inversiune și numere LTR).7) Numere, date, valute
În mod implicit, localitățile arabe folosesc sfere arabe-indo (٠١٢٣٤٥٦٧٨٩). Soluție - Politica de afaceri:- În interfața financiară, numerele latine (0-9) sunt mai des afișate de dragul interoperabilității, dar formatul (spații/semne) este local.
js new Intl. NumberFormat('ar', { style:'currency', currency:'AED' }). format(2000); new Intl. DateTimeFormat('he-IL', { dateStyle:'medium', timeStyle:'short' }). format(new Date());Timpul relativ ('Intl. RelativeTimeFormat '), delimitatoare direcționale și abrevieri locale zi/lună.
8) Tipografie și lizibilitate
Fonturi cu grafeme și ligaturi arabe/ebraice bune (modelare arabă).
Distanța de linie 1. 4–1. 6; evitați urmărirea îngustă.
Pentru limba arabă, kashida (prelungirea accidentelor vasculare cerebrale) este permisă atunci când se aliniază în lățime - porniți cu atenție ("text-justifica: inter-cuvânt; "/suportul motorului).
Interziceți italicele latine în interiorul liniei arabe (strică ritmul vertical).9) Grafice, cântare și tabele
Axele X merg de la dreapta la stânga; legenda este aliniată cu inline-end.
„+/ −” semne și procente - înainte de numărul, cifrele LTR sunt izolate:
Coloane de tabel: coloana „primară” (nume/joc) - dreapta; numerele/sumele pot rămâne LTR și pot fi aliniate la inline-end.html <bdi dir="ltr">+12. 5%</bdi>10) A11y și cititoare de ecran
Asigurați-vă că „lang =” ar „”/„ lang =” el „” este expus: motorul TTS va alege acționarea vocală corectă.
Modificări dinamice sonore în direcție cu atenție - nu comutați „dir” pe fragmente inutil.
Actualizări live ('aria-live =' politicos '') - text fără a amesteca direcțiile.
Pictogramele nu transmit sensul fără etichete text; utilizați „aria-etichetă”.11) Specificul iGaming
11. 1 Cupon pariu (betslip)
Ordinea câmpului: cantitatea → raportul → câștigul potențial; semnături corecte, numere/factori LTR.
Actualizați coeficienții ușor; săgețile în sus/în jos nu trebuie oglindite (sensul direcției prețului este universal).11. 2 Meciuri/Piețe
Aliniați lista de ligi/evenimente cu inline-start (în RTL - în dreapta).
Cronometre și numărătoare - LTR 'dir = „ltr” cu cifre de tabel (' font-variant-numeric: tabular-nums; ').11. 3 Plăți/ACC
Câmpurile IBAN/BIC/telefon sunt întotdeauna LTR.
Nume/adresă bancară - RTL.
Erori/validatoare arată markeri pe dreapta.11. 4 turnee/clasamente
Coloane: poziție, poreclă, ochelari - poziția în dreapta; aliniați ochelarii la inline-end (cifre LTR).
12) Fabricarea și testarea
Pseudo-RTL în fecioară:
Pictogramele oglindă automată în RTL (numai direcțional):css html. debug-rtl { direction: rtl; }
Autoteste (exemplu de idei):css html:dir(rtl). icon-dir { transform: scaleX(-1); }- Instantanee de aspect la 'dir = rtl'.
- Verifică dacă „stânga/dreapta” lipsește în CSS (scame).
- E2E: ordine tabbing, glisante carusel, comportament cursor.
- Teste vizuale cu text arab + inserții LTR (e-mail, sumă).
13) Proiectarea tokenurilor sistemului (exemplu)
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) Fragmente
Pentru a comuta direcția în aplicație (React):
Lista/armonizare pesmet: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]); }
Numere și sume ca fragmente LTR: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; }
glisor min→max pentru RTL:html <span>الربح المحتمل: <bdi dir="ltr">2,000. 00 UAH</bdi></span>css html:dir(rtl) input[type="range"] { direction: rtl; }15) Antipattern
Hard „stânga/dreapta” în → stiluri rupe RTL.
Introducerea numerelor/IBAN/URL fără "dir =" ltr "" → "rupt' caret și ordine.
Oglindirea logo-uri/diagrame/ore.
Același set de pictograme oglindește întotdeauna - fără excepție în sens.
Caruselele, pliantele și paginările nu sunt cu susul în jos.
Șiruri mixte fără izolare BiDi → personaje „dansatoare”.16) Măsurători
Acoperire RTL: proporția de ecrane care au fost supuse unei revizuiri RTL.
BiDi defecte/eliberare: numărul de bug-uri de text mixte.
Timp de plumb (LTR vs RTL): nu trebuie să difere> 5-10%.
Eroare de intrare în formele de număr - procent de evenimente cu caretă/mască incorectă.
CLS/perf: nici un aspect sare atunci când „dir” comutatoare.17) Lista de verificare QA
Direcție și aspect
- 'Proprietăți booleene în loc de 'stânga/dreapta'.
- Navigare/bredkramby/carusele/paginare zerkalitsya corect.
Text și BiDi
- Numere/valute/URL/e-mail - 'dir = „ltr” sau' '.
Nu există caractere „inversate” în șiruri mixte.
- Date/valute localizate via 'Intl. '.
Formulare
- Etichete corecte; faceți clic pe zonele ≥ 44 × 44 px.
- Telefon/IBAN/suma - LTR caret, măști corecte.
- Cursoarele/minimele/maximele se comportă conform așteptărilor.
Icoane/Imagini
- Numai direcțional sunt oglindite; excepțiile sunt îndeplinite.
- Nici un text în imagini fără versiuni locale.
А11у/Performance
- „lang” expus; SR citeşte corect.
- Nu redesenează inutil atunci când se schimbă „dir”.
Inelele de contrast/focalizare corespund AA.
18) Documentația în sistemul de proiectare
Direcția și secțiunea BiDi: politica de oglindire, lista de excepții pentru pictograme.
Un set de jetoane RTL și un linter de stil (interdicție „stânga/dreapta”).
Do/Don' t Gallery: carusele, bredcrambs, formulare numere, glisoare, grafice.
Pseudo-RTL script-uri și liste de verificare de revizuire.Scurt rezumat
Suportul RTL adecvat este proprietățile logice CSS, oglindirea conștientă și izolarea strictă a BiDi. Izolați numerele/URL-urile în LTR, navigarea în oglindă și pictogramele direcționale, păstrați formele previzibile și graficele ușor de citit. Deci interfața pentru arabă, ebraică, farsi sau urdu va fi naturală și rapidă - de la un cupon de pariuri și formulare de plată la mesele de turneu și meciuri live.