Comparație între layout-urile RTL și LTR cu alinierea textului

Ghid practic

Bazele designului web RTL pentru arabă, persană și ebraică

Suportul pentru scrieri de la dreapta la stânga (RTL), cum ar fi araba, persana și ebraica, necesită tehnici speciale de design web. Acest ghid explică elementele de bază esențiale: atributul dir, layout-uri oglindite, proprietăți CSS logice, gestionarea numerelor și a textului latin încorporat, precum și alegerea corectă a fonturilor și oglindirea pictogramelor. Scopul este de a crea o experiență coerentă și ușor de utilizat pentru limbile RTL.

ar: Scriere RTL arabă
fa: Layout RTL persan
he: Text RTL ebraic

Atributul dir de bază

Atributul dir cu valoarea 'rtl' este baza oricărui design web RTL. De obicei, este setat pe tag-ul <html> sau <body> și influențează alinierea textului, ordinea implicită a celulelor de tabel și direcția proprietăților CSS precum 'text-align'. Fără acest atribut, conținutul rămâne aliniat la stânga, ceea ce este nefiresc pentru limbile RTL. De asemenea, ar trebui să suprascrieți 'dir' la nivel de container atunci când apar direcții mixte. Un atribut dir lipsă sau incorect duce la layout-uri greu de citit și, prin urmare, ar trebui să fie prioritar.

Aspect oglindit și proprietăți CSS logice

În loc de proprietăți fizice precum 'left' și 'right', utilizați proprietăți CSS logice precum 'margin-inline-start' și 'padding-inline-end'. Acestea se adaptează automat direcției de scriere și evită suprascrieri manuale. Un aspect oglindit înseamnă că bara de navigare începe în dreapta, iar conținutul în stânga. Cu valori logice precum 'float: inline-start' sau 'text-align: start' realizați acest lucru fără interogări media. Proprietățile moderne CSS Grid și Flexbox precum 'justify-content: flex-start' funcționează corect în funcție de atributul dir. Testați întotdeauna cu conținut real, deoarece proprietățile logice nu sunt interpretate la fel de toate browserele.

Exemplu de proprietăți logice CSS cu inline-start și end

Numere și caractere latine încorporate

În textele RTL, numerele și literele latine încorporate rămân aliniate de la stânga la dreapta. Acest lucru prezintă provocări, deoarece pot perturba direcția de citire. Utilizați atributul 'unicode-bidi' sau 'direction: ltr' pentru astfel de elemente pentru a asigura o reprezentare consecventă. În cazul formatelor de dată sau numere, este recomandabil să adaptați ordinea la cultura RTL. Acordați atenție și aspectului formularelor, unde câmpurile de introducere pentru numere ar trebui să rămână aliniate la stânga. O gestionare atentă a acestei direcții mixte previne rupturile vizuale și îmbunătățește lizibilitatea.

Fonturi și tipografie

Alegerea fontului este crucială: araba, persana și ebraica au nevoie de fonturi cu suport adecvat pentru glife. Opțiuni populare sunt 'Noto Naskh Arabic', 'Vazir' pentru persană și 'Noto Sans Hebrew'. Definiți fallback-uri, de exemplu 'font-family: 'Noto Naskh Arabic', 'Tahoma', sans-serif;'. Asigurați-vă că dimensiunile fonturilor și spațierea liniilor sunt suficiente, deoarece fonturile RTL sunt adesea mai înguste sau mai complexe. Evitați scrierea cursivă, deoarece aceasta nu există în multe scrieri arabe. Testați afișarea pe diferite dispozitive pentru a vă asigura că fonturile sunt încărcate corect și sunt lizibile.

Icoane și oglindire

Icoanele care indică o direcție (de exemplu, săgeți, simboluri înainte/înapoi) trebuie oglindite în aspectele RTL. Acest lucru se realizează cu transformări CSS precum 'transform: scaleX(-1)' sau prin utilizarea unor seturi de icoane care suportă automat RTL (de exemplu, Font Awesome cu atributul 'dir'). Simbolurile fără referință de direcție (de exemplu, casă, setări) rămân neschimbate. Asigurați-vă că oglindirea nu denaturează semantica. Testați toate icoanele în vizualizarea RTL, deoarece oglindirile neintenționate pot afecta experiența utilizatorului.

Listă de verificare pentru intrarea pe piață

Setați dir='rtl' pe elementul html.
Utilizați proprietăți CSS logice în loc de cele fizice.
Tratați numerele și direcțiile mixte cu 'direction'.
Alegeți fonturi cu suport cuprinzător de glife.
Oglindiți pictogramele legate de direcție folosind scaleX.
Testați aspectul cu conținut real în toate limbile țintă.

Oglindirea pictogramelor în layout-ul RTL cu săgeți

Întrebări frecvente

De ce nu este suficient doar dir='rtl'?

Atributul dir stabilește direcția de bază, dar proprietăți CSS precum 'margin-left' rămân la stânga. Fără proprietăți logice, trebuie să suprascrieți manual multe valori, ceea ce este predispus la erori și înrăutățește mentenabilitatea.

Cum tratez numerele în layout-urile RTL?

Numerele sunt implicit LTR în contexte RTL. Folosiți pe elementul părinte 'unicode-bidi: embed' sau setați 'direction: ltr' pentru intervale de numere, pentru a asigura o aliniere corectă.

Trebuie să fie oglindite toate pictogramele?

Nu, doar pictogramele cu o direcție implicită, cum ar fi săgețile, trebuie oglindite. Simboluri precum o casă sau o roată dințată rămân neschimbate. Oglindiți exclusiv pictogramele care reprezintă o direcție de mișcare sau de citire.

Pregătit pentru această piață?

Ne ocupăm de localizarea site-ului dvs. din punct de vedere lingvistic, tehnic și cultural – cu verificare nativă și preț fix. Solicitați o ofertă fără obligații.

Solicită o ofertă fără obligații