Wsparcie RTL
1) Zasady
1. RTL nie jest tłumaczeniem tekstu, ale odzwierciedleniem myślenia. Osie, kolejność czytania, kolejność skupienia, gesty i zmiana nawigacji.
2. Logiczne właściwości CSS zamiast lewej/prawej. Przejdź do 'margines-inline-start', 'inset-inline-end', 'border-start-start-radius' itp.
3. Globalnie włączyć kierunek, lokalnie odizolować fragmenty LTR. Numery, adresy URL, kody, e-mail i IBAN są zawsze odczytywane od lewej do prawej.
4. Lustro, co zależy od kierunku, a nie znaczenia. Ikony „Play”, „↙” i „zegar/proces” nie mogą być lustrzane.
5. Test pseudo-RTL. Dodaj 'dir =' rtl' '/' kierunek: rtl' i pseudo tłumaczenia przed wyjściem.
2) Kierunek: właściwości „dir” i boolean
Globalnie na dokumencie/korzeniu: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 mieszana izolacja tekstowa
Mieszanie arabsko-hebrajskiego z łaciną/numerami łamie kolejność znaków. Użyj izolacji BiDi:- Tagi: '' (kierunek izolatów), 'Żetony jednokodowe:
- '\u2066 'LRI/'\u2067' RLI - początek izolacji LTR/RTL, '\u2069 'ChNP - koniec,
- '\u200E 'LRM/'\u200F' RLM - jednobajtowe tokeny do krótkich wkładek.
html <span dir="rtl"> سحب <bdi dir="ltr">IBAN AE070331234567890123456</bdi> بمبلغ <bdi dir="ltr">2,000. 00 UAH</bdi> </span>4) Nawigacja, hierarchia i układy
Okruchy breadcrumbs: porządek lustrzany: "wg lustrzanego rozkazu: wg słonecznego porządku: "wokół wierzchołka"
Panele/menu: navbar główny - po prawej stronie; „z powrotem” wskazuje na lewo (na początek linii RTL).
Karty/listy: wyrównać nagłówki do inline-start; ikony statusu - do inline-endu.
Karuzele i skręty: przewijanie w kierunku inline-start (w RTL - w prawo). Wskaźniki stron są również lustrzane.
Paginacja: strzałka „next” przechodzi do inline-start, „previous” - do inline-end.5) Ikony i obrazy
Ikony kierunkowe lustra: strzałki, „do przodu/do tyłu”, głowica odtwarzania, „rozwiń/zawal”.
Technicznie:
Nie lusterko: ikony tekstu, wykresy, godziny (jeśli istnieje strzałka czasu rzeczywistego), logo marki.css .rtl-mirror { transform: scaleX(-1); transform-origin: center; } html:dir(rtl). icon--arrow { transform: scaleX(-1); }W przypadku SVG: należy użyć „skrzynki transformacyjnej: widok;” aby uniknąć „unoszenia się”.
Unikaj tekstu wewnątrz obrazów → zlokalizuj w oddzielnych warstwach.6) Formularze i dane wejściowe
Dostosowanie treści: dostosowanie tekstu: start; "pola tekstowe, numeryczne/kwoty/URL/e-mail - LTR.
Atrybuty: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">Znacznik/etykieta są zlokalizowane, ale caret w numerach/kody muszą iść od lewej do prawej.
Maski: nie „przechwytywać” uważnie; wstawianie i wybór wsparcia.
Lista/radio/pole wyboru: podpisy po prawej stronie sterowania, kliknij obszary ≥ 44 × 44 px.
min → maksymalne suwaki: w RTL, przynajmniej po prawej stronie, najwyżej po lewej stronie (lub pokazać skalę bez inwersji i numerów LTR).7) Numery, daty, waluty
Domyślnie lokalizacje arabskie używają kul arabsko-indo (٠١٢٣٤٥٦٧٨٩). Rozwiązanie - Polityka biznesowa:- W UI finansowym liczby łacińskie (0-9) są częściej pokazywane ze względu na interoperacyjność, ale format (przestrzenie/znaki) jest lokalny.
js new Intl. NumberFormat('ar', { style:'currency', currency:'AED' }). format(2000); new Intl. DateTimeFormat('he-IL', { dateStyle:'medium', timeStyle:'short' }). format(new Date());Czas względny ('Intl. Delimitery kierunkowe i lokalne skróty dzienne/miesięczne.
8) Typografia i czytelność
Czcionki z dobrym grafemem arabskim/hebrajskim i ligatami (kształt arabski).
Rozstaw linii 1. 4–1. 6; unikać wąskiego śledzenia.
W przypadku języka arabskiego, kashida (wydłużenie udarów) jest dozwolone podczas wyrównywania szerokości - włączyć ostrożnie ("text-justify: inter-word; "/wsparcie silnika).
Zakaz kursywy łacińskiej wewnątrz linii arabskiej (psuje rytm pionowy).9) Wykresy, wagi i tabele
Osie X idą od prawej do lewej; legenda jest wyrównana z końcówką.
znaki i procentowe „+/−” - przed liczbą cyfry LTR są izolowane:
Kolumny tabeli: kolumna „podstawowa” (nazwa/gra) - prawo; liczby/kwoty mogą pozostać LTR i być dostosowane do wartości inline-end.html <bdi dir="ltr">+12. 5%</bdi>10) czytniki A11y i ekranu
Upewnij się, że 'lang =' ar '/' lang = 'he' jest odsłonięty: silnik TTS wybierze właściwy głos działający.
Dynamiczne zmiany dźwięku w kierunku ostrożnie - nie przełączać 'dir' na fragmenty niepotrzebnie.
Aktualizacje na żywo ('aria-live =' grzeczny ') - tekst bez mieszania kierunków.
Ikony nie przekazują znaczenia bez etykiet tekstowych; używać „etykiety arii”.11) Specyfika iGaming
11. 1 kupon na zakład (betslip)
Pole zamówienia: kwota → stosunek → potencjalny zysk; prawe podpisy, numery/czynniki LTR.
Delikatnie zaktualizuj współczynniki; strzałki w górę/w dół nie muszą być lustrzane (znaczenie kierunku ceny jest uniwersalne).11. 2 mecze/rynki
Wyrównać listę ligi/wydarzeń z inline-start (w RTL - po prawej).
Zegary i liczba - LTR 'dir = „ltr” z cyframi tabeli (' font-variant-numeric: tabular-nums; ').11. 3 Płatności/ACC
Pola IBAN/BIC/telefon są zawsze LTR.
Nazwy/adres banku - RTL.
Błędy/walidatory pokazują znaczniki po prawej stronie.11. 4 turnieje/tablice liderów
Kolumny: pozycja, przydomek, okulary - pozycja po prawej; ustawić okulary do linii końcowej (cyfr LTR).
12) Produkcja i badania
Pseudo-RTL w panieńskim:
Ikony automatycznego lustra w RTL (tylko kierunkowe):css html. debug-rtl { direction: rtl; }
Autotesty (przykład pomysłów):css html:dir(rtl). icon-dir { transform: scaleX(-1); }- Migawki układu w 'dir = rtl'.
- Sprawdzenie, czy w CSS (lint) brakuje „lewej/prawej”.
- E2E: kolejność karuzeli, skręty karuzeli, zachowanie suwaka.
- Testy wizualne z tekstem arabskim + wkładki LTR (e-mail, suma).
13) Żetony systemu projektowania (przykład)
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) Snippety
Aby przełączyć kierunek w aplikacji (React):
Wykaz/harmonizacja okruchów chlebowych: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]); }
Liczby i kwoty jako fragmenty 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; }
min → maksymalny suwak do RTL:html <span>الربح المحتمل: <bdi dir="ltr">2,000. 00 UAH</bdi></span>css html:dir(rtl) input[type="range"] { direction: rtl; }15) Antypattery
Twardy 'lewy/prawy' w → style łamie RTL.
Wpisywanie numerów/IBAN/URL bez 'dir =' ltr '→' broken 'caret and order.
Logo/wykresy/godziny lustrzane.
Ten sam zestaw ikon zawsze lusterka - bez wyjątku w znaczeniu.
Karuzele, ulotki i paginacje nie są do góry nogami.
Mieszane ciągi bez izolacji BiDi → „tańczące” znaki.16) Metryka
Pokrycie RTL: odsetek ekranów, które zostały poddane przeglądowi RTL.
Wady/zwolnienie BiDi: liczba mieszanych błędów tekstowych.
Czas realizacji (LTR vs RTL): nie może różnić się> 5-10%.
Błąd wejściowy w formularzach liczbowych - odsetek zdarzeń o nieprawidłowej caret/masce.
CLS/perf: brak skoków układu podczas przełączania 'dir'.17) Lista kontrolna QA
Kierunek i układ
- 'Właściwości logiczne zamiast 'left/right'.
- Nawigacja/bredkramby/karuzele/pagination zerkalitsya poprawnie.
Tekst i BiDi
- Numery/waluty/URL/e-mail - 'dir =' ltr 'lub' '.
- Brak „odwróconych” znaków w mieszanych ciągach.
- Lokalizowane daty/waluty via 'Intl. '.
Formularze
- Odpowiednie etykiety; kliknij obszary ≥ 44 × 44 px.
- Telefon/IBAN/kwota - LTR caret, prawidłowe maski.
- Suwaki/upadki/góry zachowują się zgodnie z oczekiwaniami.
Ikony/obrazy
- Tylko kierunkowe są lustrzane; spełnione są wyjątki.
- Brak tekstu na zdjęciach bez wersji lokalnych.
А11у/Performance
- „lang” narażony; SR czyta poprawnie.
- Brak zbędnych przeróbek przy zmianie „dir”.
- Pierścienie kontrastu/ostrości odpowiadają AA.
18) Dokumentacja w systemie projektowym
Sekcja Direction & BiDi: polityka lustrzana, lista wyjątków dla ikon.
Zestaw żetonów RTL i linter stylu (zakaz 'lewej/prawej').
Do/Don Gallery: karuzele, bredcrambs, formularze liczbowe, suwaki, wykresy.
Pseudo-RTL skryptów i list kontrolnych.Krótkie podsumowanie
Właściwe wsparcie RTL to logiczne właściwości CSS, świadome lusterko i ścisła izolacja BiDi. Izoluj numery/adresy URL w LTR, nawigacja lustrzana i ikony kierunkowe, utrzymuj przewidywalność kształtów i czytelność wykresów. Tak więc interfejs dla arabskiego, hebrajskiego, Farsi lub Urdu będzie naturalny i szybki - od kuponu i formularzy płatności do stołów turniejowych i meczów na żywo.