Supporto RTL
1) Principi
1. RTL non è una traduzione, ma un mirroring del pensiero. Cambiano assi, ordine di lettura, ordine di attivazione, gesti e navigazione.
2. Proprietà CSS logiche invece di left/right. Vai a margin-inline-start, inset-inline-end, border-start-start-radius, ecc.
3. Attiviamo globalmente la direzione, isoliamo localmente i frammenti LTR. Numeri, URL, codici, e-mail e BAN vengono sempre letti da sinistra a destra.
4. Specchiate ciò che dipende dalla direzione, non dal senso. «Play», «↗», «↙» e le icone dell'orologio/processo potrebbero non mirarsi.
5. Prova pseudonimo-RTL. Accendete dir = «rtl »/« direction: rtl» e pseudoperatori prima di uscire.
2) Direzione: «dir» e proprietà logiche
Globale sul documento/radice: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 e isolamento del testo misto
La miscelazione tra arabo/ebraico e latino/numero rompe l'ordine dei caratteri. Utilizzare l'isolamento BiDi:- Tag: '' (isola la direzione), '' (sovrascrive).
- '\u2066 'LRI/'\u2067' RLI - Inizio dell'isolamento LTR/RTL, '\u2069 'PDI - Fine,
- '\u200' E 'LRM/'\u200F'RLM è un indicatore di inserimento breve.
html
<span dir="rtl">
سحب <bdi dir="ltr">IBAN AE070331234567890123456</bdi> بمبلغ
<bdi dir="ltr">2,000. 00 UAH</bdi>
</span>4) Navigazione, gerarchia e layout
Breadcrumbs: l'ordine è specchio: « ».
Pannelli/menu: navbar principale a destra; «indietro» indica a sinistra (all'inizio della riga RTL).
Schede/elenchi: allinea le intestazioni in inline-start; icone di stato - a inline-end.
Caroselli e swipe: scorrimento verso inline-start (RTL-Destra). Anche gli indicatori di pagina sono mirroring.
Paginazione: la freccia «successiva» viene inviata a inline-start, la freccia «precedente» a inline-end.
5) Icone e immagini
Specchiate le icone dirette: frecce, «avanti/indietro», testa di play, «espandi/taglia».
Non mirroring: icone di testo, grafici, orologi (se c'è una vera freccia temporale), loghi dei marchi.
css
.rtl-mirror { transform: scaleX(-1); transform-origin: center; }
html:dir(rtl). icon--arrow { transform: scaleX(-1); }Per SVG: usate'transfer-box: view-box; 'per non fluttuare'.
Evitare il testo all'interno delle immagini e localizzare i singoli livelli.
6) Moduli e input
Allineamento dei contenuti: campi di testo in «text-align: start;», numeri/importi/URL/e-mail - LTR.
Attributi: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 sono localizzati, ma caret in numeri/codici deve andare da sinistra a destra.
Maschere: non «intercettare» caret in modo rigido; supportare l'inserimento e la selezione.
Lista/radio/checkbox: firme a destra dei controlli, zona click 44 x 44 px.
Slider min→max: in RTL, minimo a destra, massimo a sinistra (o mostra la scala senza inversione e i numeri LTR).
7) Numeri, date, valute
Per impostazione predefinita, le zone arabe utilizzano gli indocifri arabo (٠١٢٣٤٥٦٧٨٩). Soluzione: politica aziendale:- La UI finanziaria mostra più frequentemente i numeri latini (0-9) per interoperabilità, ma il formato (spazi/segni) è locale.
js new Intl. NumberFormat('ar', { style:'currency', currency:'AED' }). format(2000);
new Intl. DateTimeFormat('he-IL', { dateStyle:'medium', timeStyle:'short' }). format(new Date());Ora relativa ('Intl. RelativeTimeFormat '), separatori e riduzioni locali di giorni/mesi.
8) Tipografia e leggibilità
Caratteri con buon grafema arabo/ebraico e legature (Arabic shaping).
Intervallo tra righe 1. 4–1. 6; Evitate i tracking stretti.
Per l'arabo, kashida (allungamento dei tratti) quando si allinea alla larghezza - Accendi con cautela ('text-justify: inter-word; '/supporto motore).
Disattiva il corsivo del latino all'interno della riga araba (rovina il ritmo verticale).
9) Grafici, scala e tabelle
Gli assi X vanno da destra a sinistra; la leggenda si allinea in inline-end.
Colonne di tabella: colonna primaria (nome/gioco) a destra; numeri/importi possono rimanere LTR e allinearsi a inline-end.
html
<bdi dir="ltr">+12. 5%</bdi>10) A11y e schermate
Assicurati che il motore TTS scelga la voce corretta.
Le modifiche dinamiche alla direzione possono essere pronunciate con attenzione - non cambiare dir su frammenti senza necessità.
Gli aggiornamenti Lave ('aria-live = «polite») sono un testo senza miscelare le direzioni.
Le icone non trasmettono il significato senza etichette di testo; usate'aria-label '.
11) Specificità del iGaming
11. 1 Coupon puntata (betslip)
Ordine dei campi: l'importo del fattore di è una vincita potenziale; firme a destra, numeri/cooff LTR.
Evidenziare lievemente gli aggiornamenti dei coefficienti. le frecce «su/giù» non devono essere specchiate (il senso della direzione del prezzo è universale).
11. 2 Partite/mercati
Allineare l'elenco delle leghe/eventi a inline-start (in RTL a destra).
Timer e conto - LTR 'dir = «ltr» con numeri tabellari (' font-variant-numeric: tabula-nums; ').
11. 3 Pagamenti/CUS
I campi BAN/BIC/telefono sono sempre LTR.
I nomi bancari/indirizzi sono RTL.
Gli errori/validi mostrano i marcatori a destra.
11. 4 Tornei/liderboard
Colonne: posizione, nick, punti - posizione destra; allineare gli occhiali a inline-end (cifre LTR).
12) Produzione e test
Pseudonimo-RTL nella vergine:css html. debug-rtl { direction: rtl; }css html:dir(rtl). icon-dir { transform: scaleX(-1); }- Snapshot layout à dir = rtl ".
- Verifica l'assenza dì left/right'nel CSS (lente).
- E2E: ordine di tabulazione, svip della giostra, comportamento delle slider.
- Test visivi con testo arabo + inserzioni LTR (e-mail, importo).
13) Token di progettazione (esempio)
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) Snippet
Cambio direzione in applicazione (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) Antipattern
«Left/right» in stile → si rompe RTL.
Immettere i numeri/BAN/URL senza «dir =» ltr «» «frammentato» caret e ordine.
Mirroring di loghi/grafici/orologi.
Lo stesso set di icone si specchia sempre, senza eccezioni di senso.
Giostre, fogliette e paginazioni non sono rovesciate.
Le righe miste senza isolamento BiDi → i caratteri danzanti.
16) Metriche
RTL coverage è una quota di schermi passati da RTL-Review.
BiDi difetti/rilascio è il numero di bagagli di testo misto.
Tempo di esecuzione delle attività chiave (LTR vs RTL): non deve essere diverso> 5-10%.
Errore di immissione dei numeri nei moduli: percentuale di eventi con caret/maschera non valida.
CLS/perf: nessun salto di layout a dir - connessione.
17) Lista assegni QA
Direzione e layout
- '
- Proprietà logiche anziché «left/right».
- Navigazione/delirante cramba/giostra/paginazione si specchiano correttamente.
Testo e BiDi
- Numeri/valute/URL/e-mail - "dir =" ltr "o" ".
- Nessun carattere «ribaltato» nelle righe miste.
- Localizzato data/valuta tramite «Intl».
Moduli
- Firme a destra; zone click 44 x 44 px.
- Telefono/BAN/importo - LTR caret, maschere corrette.
- Slider/minimi/massimi si comportano in modo prevedibile.
Icone/Immagini
- Si specchiano solo quelli diretti; eccezioni rispettate.
- Nessun testo nelle immagini senza versione locale.
A11u/Performance
- 'lang'; La SR legge correttamente.
- Non ci sono ritocchi superflui quando si cambià dir ".
- Gli anelli di contrasto/fuoco corrispondono a AA.
18) Documentazione in progettazione
La sezione Direction & BiDi è un criterio di mirroring, una lista di eccezioni per le icone.
Set di token RTL e linter (proibizione'left/right').
Galleria Do/Don't: caroselli, crampi, forme di numeri, slider, grafici.
Gli script sono pseudonimi-RTL e gli assegni sono gelosi.
Breve riepilogo
Il giusto supporto RTL sono le proprietà CSS logiche, il mirroring consapevole e l'isolamento BiDi rigoroso. Isolare i numeri/URL in LTR, mirroring e icone dirette, mantenere le forme prevedibili e i grafici leggibili. Così l'interfaccia per arabo, ebraico, farsi o urdu sarà naturale e veloce, dal coupon scommesse e moduli di pagamento alle tabelle di tornei e partite live.