RTL-Unterstützung
1) Grundsätze
1. Bei RTL geht es nicht darum, einen Text zu übersetzen, sondern das Denken zu spiegeln. Achsen, Leserichtung, Fokusreihenfolge, Gesten und Navigation ändern sich.
2. Logische CSS-Eigenschaften statt links/rechts. Wechseln Sie zu 'margin-inline-start', 'inset-inline-end', 'border-start-start-radius' usw.
3. Global schalten wir die Richtung ein, lokal isolieren wir die LTR-Fragmente. Zahlen, URLs, Codes, E-Mails und IBANs werden immer von links nach rechts gelesen.
4. Spiegeln Sie das, was von der Richtung abhängt, nicht von der Bedeutung. „Play“, „↗“, „↙“ und Uhren/Prozess-Symbole können nicht gespiegelt werden.
5. Testen Sie Pseudo-RTL. Schalte' dir = 'rtl '/' Richtung: rtl' und Pseudo-Übersetzungen ein, bevor du herauskommst.
2) Richtung: 'dir' und logische Eigenschaften
Global auf Dokument/Wurzel: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 und gemischte Textisolierung
Das Mischen von Arabisch/Hebräisch mit Latein/Zahlen bricht die Reihenfolge der Zeichen. Verwenden Sie BiDi-Isolierung:- Tags:''(isoliert die Richtung),'' (erzwingt die Überschreibung).
- „\u2066 “LRI/„\u2067“ RLI - Beginn der LTR/RTL-Isolation, „\u2069 “PDI - Ende,
- '\u200E 'LRM/'\u200F' RLM sind Single-Byte-Token für kurze Einsätze.
html
<span dir="rtl">
سحب <bdi dir="ltr">IBAN AE070331234567890123456</bdi> بمبلغ
<bdi dir="ltr">2,000. 00 UAH</bdi>
</span>4) Navigation, Hierarchie und Layouts
Breadcrumbs: die Ordnung spiegel-: "الصفحة الرئيسية‹ الرهان "التأكيد".
Panels/Menüs: Haupt-Navbar - rechts; „zurück“ zeigt nach links (zum Anfang der RTL-Zeile).
Karten/Listen: Titel nach Inline-Start ausrichten; Statussymbole - zum Inline-Ende.
Karussells und Streiche: Scrollen in Richtung Inline-Start (bei RTL nach rechts). Die Seitenindikatoren sind ebenfalls gespiegelt.
Pagination: Der Pfeil „next“ geht an inline-start, „previous“ an inline-end.
5) Icons und Bilder
Spiegeln Sie die gerichteten Piktogramme: Pfeile, „vorwärts/rückwärts“, Spielkopf, „entfalten/zusammenrollen“.
Spiegeln Sie nicht: Symbole für Text, Grafiken, Uhren (wenn es einen echten Zeitpfeil gibt), Markenlogos.
css
.rtl-mirror { transform: scaleX(-1); transform-origin: center; }
html:dir(rtl). icon--arrow { transform: scaleX(-1); }Für SVG: Verwenden Sie' transform-box: view-box; 'damit es nicht „schwebt“.
Vermeiden Sie Text in Bildern → lokalisieren Sie einzelne Ebenen.
6) Formulare und Eingabe
Inhaltliche Ausrichtung: Textfelder nach 'text-align: start;', numerisch/Summen/URL/E-Mail - LTR.
Attribute: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">Platzhalter/Label sind lokalisiert, aber das Caret in Zahlen/Codes muss von links nach rechts gehen.
Masken: Caret nicht hart „abfangen“; Unterstützung für Einfügen und Auswählen.
Liste/Radio/Checkbox: Signaturen rechts von den Kontrollen, Klickzonen ≥ 44 × 44 px.
Slider min→max: in RTL mindestens am rechten Rand, maximal - auf der linken Seite (oder zeigen Sie die Skala ohne Inversion und LTR-Zahlen).
7) Zahlen, Daten, Währungen
Arabische Locales verwenden standardmäßig Arabisch-Indocifre (٠١٢٣٤٥٦٧٨٩). Lösung - Geschäftspolitik:- In der Finanz-UI werden aus Gründen der Interoperabilität häufiger lateinische Zahlen (0-9) angezeigt, aber das Format (Leerzeichen/Zeichen) ist lokal.
js new Intl. NumberFormat('ar', { style:'currency', currency:'AED' }). format(2000);
new Intl. DateTimeFormat('he-IL', { dateStyle:'medium', timeStyle:'short' }). format(new Date());Relative Zeit ('Intl. RelativeTimeFormat'), Richtungstrennzeichen und lokale Abkürzungen von Tagen/Monaten.
8) Typografie und Lesbarkeit
Schriften mit gutem arabisch/jüdischem Graphem und Ligaturen (Arabic shaping).
Zeilenabstand 1. 4–1. 6; Vermeiden Sie enge Trekking.
Für Arabisch ist kashida (Verlängerung der Striche) zulässig, wenn sie in der Breite ausgerichtet ist - schalten Sie vorsichtig ein ('text-justify: inter-word; '/engine support).
Verbieten Sie die Kursivschrift des lateinischen Alphabets innerhalb der arabischen Zeile (verdirbt den vertikalen Rhythmus).
9) Diagramme, Skalen und Tabellen
Die X-Achsen verlaufen von rechts nach links; Die Legende wird am Inline-Ende ausgerichtet.
Tabellenspalten: „primäre“ Spalte (Name/Spiel) - rechts; Zahlen/Beträge können LTR bleiben und am Inline-Ende ausgerichtet werden.
html
<bdi dir="ltr">+12. 5%</bdi>10) A11y und Screenrider
Stellen Sie sicher, dass' lang = 'ar' '/' lang = 'he' 'angezeigt wird: Die TTS-Engine wählt die richtige Stimme.
Stimmen Sie dynamische Richtungsänderungen sorgfältig ab - schalten Sie' dir 'nicht unnötig auf Fragmente.
Live-Updates ('aria-live = „polite“) - Text ohne Richtungsmischung.
Symbole vermitteln keine Bedeutung ohne Textbeschriftungen; „aria-label“ verwenden.
11) Besonderheiten von iGaming
11. 1 Wettschein (betslip)
Reihenfolge der Felder: Betrag → Verhältnis → mögliche Gewinne; Beschriftungen rechts, LTR Zahlen/Koeffizienten.
Koeffizientenaktualisierungen sanft hervorheben; die Pfeile „oben/unten“ müssen nicht gespiegelt werden (die Bedeutung der Preisrichtung ist universell).
11. 2 Spiele/Märkte
Richten Sie die Liste der Ligen/Veranstaltungen nach Inline-Start aus (bei RTL rechts).
Timer und Zählung sind LTR 'dir =' ltr''mit tabellarischen Ziffern (' font-variant-numeric: tabular-nums;').
11. 3 Zahlungen/CUS
Die Felder IBAN/BIC/Telefon sind immer LTR.
Banknamen/Adresse ist RTL.
Fehler/Validatoren zeigen Marker auf der rechten Seite.
11. 4 Turniere/Leaderboards
Spalten: Position, Spitzname, Brille - Position rechts; Ausrichten der Brille auf Inline-End (LTR-Ziffern).
12) Produktion und Prüfung
Pseudo-RTL in der Jungfrau:css html. debug-rtl { direction: rtl; }css html:dir(rtl). icon-dir { transform: scaleX(-1); }- Layout-Schnappschüsse bei 'dir = rtl'.
- Überprüfen Sie, ob „links/rechts“ in CSS (Lint) fehlt.
- E2E: Tabulatorreihenfolge, Karussellwischen, Schieberegler-Verhalten.
- Visuelle Tests mit arabischem Text + LTR-Einfügungen (E-Mail, Betrag).
13) Design-System-Token (Beispiel)
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
Richtungswechsel in der Anwendung (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) Antipatterns
Das harte „Links/Rechts“ in den Stilen bricht RTL →.
Eingabe von Zahlen/IBAN/URL ohne' dir = 'ltr' '→' gebrochen 'Caret und Reihenfolge.
Spiegelung von Logos/Grafiken/Uhren.
Das gleiche Icon-Set wird immer gespiegelt - ohne Ausnahmen in der Bedeutung.
Karussells, Blätter und Paginationen werden nicht umgedreht.
Gemischte Zeichenketten ohne BiDi-Isolation → „tanzende“ Zeichen.
16) Metriken
RTL-Berichterstattung: Anteil der Bildschirme, die die RTL-Revue bestanden haben.
BiDi-Fehler/Freigabe: Anzahl der gemischten Textfehler.
Zeit für Schlüsselaufgaben (LTR vs RTL): darf nicht> 5-10% abweichen.
Eingabefehler in Zahlenformularen: Anteil der Ereignisse mit falschem Caret/Maske.
CLS/perf: keine Layoutsprünge beim 'dir' -umschalten.
17) QS-Checkliste
Richtung und Layout
- ' 'für RTL-locals;': dir (rtl) '-Stile gelten.
- Logische Eigenschaften statt „links/rechts“.
- ist Nawigazija/bredkramby/karusseli/paginazija serkaljatsja korrekt.
Text und BiDi
- Zahlen/Währungen/URL/E-Mail - „dir =“ ltr „“ oder „“.
- Keine „umgekehrten“ Zeichen in gemischten Zeilen.
- Daten/Währungen über 'Intl.' lokalisiert.
Formulare
- Unterschriften rechts; Klickzone ≥ 44 × 44 px
- Telefon/IBAN/Betrag - LTR-Caret, korrekte Masken.
- Slider/Minima/Maxima verhalten sich erwartungsgemäß.
Symbole/Bilder
- Gespiegelt werden nur gerichtete; Ausnahmen eingehalten werden.
- Kein Text in Bildern ohne lokale Versionen.
A11u/Performance
- „lang“ wird ausgestellt; SR liest korrekt.
- Keine unnötigen Überzeichnungen beim Wechsel von 'dir'.
- Kontrast/Fokusringe entsprechen AA.
18) Dokumentation im Konstruktionssystem
Direction & BiDi Abschnitt: Spiegelungsrichtlinie, Ausschlussliste für Symbole.
RTL Token Set und Style Linter (Verbot 'links/rechts').
Do/Don't Gallery: Karussells, Bredkrambas, Zahlenformen, Slider, Grafiken.
Pseudo-RTL-Skripte und Revue-Checklisten.
Kurze Zusammenfassung
Die richtige RTL-Unterstützung sind logische CSS-Eigenschaften, bewusste Spiegelung und strenge BiDi-Isolation. Isolieren Sie Zahlen/URLs in LTR, spiegeln Sie Navigation und direktionale Symbole, halten Sie Formulare vorhersehbar und Grafiken lesbar. So wird die Schnittstelle für Arabisch, Hebräisch, Farsi oder Urdu natürlich und schnell sein - von Wettgutscheinen und Zahlungsformularen bis hin zu Turniertabellen und Live-Matches.