2026-06-03 · Redacția Baduno · 7 blog.readMin · Blog & Cunoștințe
Design RTL: Ce se schimbă când direcția de citire se inversează
Araba și ebraica se citesc de la dreapta la stânga – și răstoarnă astfel presupuneri de design tacite. Un raport practic din sistemul nostru de design.
Mai mult decât oglindit
Abordarea naivă – „oglindiți pur și simplu totul” – eșuează rapid: numerele și numele de mărci latine rămân de la stânga la dreapta, simbolurile playerelor media își păstrează direcția, numerele de telefon se rup. Design RTL înseamnă a decide pentru fiecare element dacă este logic (urmează direcția de citire) sau fizic (fix în direcție).
CSS: proprietăți logice
Logica modernă CSS face RTL gestionabilă: margin-inline-start în loc de margin-left, inset-inline-end în loc de right, text-align:start în loc de left. Cine scrie logic de la început, primește a doua direcție de citire aproape gratuit – cine modernizează, se luptă cu sute de excepții. Acest site folosește în mod constant proprietăți logice; fiecare versiune RTL rezultă din același stylesheet ca și cea germană.
Tipografie și densitate
Scrierea arabă nu are litere mari, are alte ascendențe/descendențe și pare mai mică și mai densă la aceeași dimensiune a fontului. O tipografie RTL bună necesită fonturi specializate proprii, adesea cu unul sau două puncte mai mari și o înălțime a rândurilor mai generoasă. De asemenea, efectele de spațiere între litere, populare în latină, nu funcționează cu scrierea cursivă.
Testarea cu vorbitori nativi
Niciun automatism nu înlocuiește privirea unei persoane care trăiește în scriere: întreruperi de rând în cuvinte compuse, numere în textul fluent, direcții mixte în formulare – clasele de erori sunt subtile. Procesul nostru de verificare include, prin urmare, întotdeauna o revizuire vizuală RTL, nu doar corectarea textului.
Navigare: unde logica se inversează
În medii RTL, structurile de navigare trebuie regândite. O bară de meniu orizontală începe în dreapta, primul element de meniu fiind cel mai din stânga – ordinea rămâne logică de la dreapta la stânga. Meniurile drop-down se deschid în mod implicit în partea stângă-jos, în loc de dreapta-jos, deoarece punctul de ancorare se află în partea dreaptă. Barele laterale, care în layout-ul LTR sunt poziționate în stânga, în cazul RTL se mută în dreapta. O atenție deosebită trebuie acordată meniurilor hamburger: pictograma în sine (trei linii orizontale) este neutră din punct de vedere al direcției, dar plasarea sa (sus-stânga vs. sus-dreapta) trebuie schimbată. O greșeală frecventă sunt submeniurile care încă afișează direcția LTR, deoarece nu sunt controlate prin proprietăți CSS logice. În sistemul nostru de design, definim componentele de navigare complet cu inset-inline-start/end, astfel încât acestea să comute automat între LTR și RTL. Exemplu practic: o navigare breadcrumb în modul RTL afișează pagina curentă în stânga și pagina principală în dreapta – săgețile separator trebuie să își schimba direcția. Aici folosim CSS-content cu săgeți încorporate care utilizează o entitate diferită în funcție de valoarea dir.
Direcții mixte: numere și caractere
Numerele, numerele de telefon, adresele de e-mail și numele de marcă latine își păstrează orientarea LTR, chiar și atunci când textul înconjurător este RTL. Acest lucru duce la așa-numitele secțiuni bidirecționale, în care direcția de citire se schimbă la mijlocul propoziției. În mod implicit, algoritmul Unicode Bidirectional (Bidi) gestionează astfel de texte mixte, dar trebuie să vă asigurați că comutarea direcției este corectă. Utilizați atributul dir la nivelul elementului mixt sau folosiți caractere precum LRM (Left-to-Right Mark) și RLM (Right-to-Left Mark). Exemplu: într-o propoziție ebraică „Telefon: 01234 56789”, șirul numeric trebuie citit de la stânga la dreapta. Fără o marcare corectă, browserul ar putea întrerupe sau afișa greșit șirul. În formulare, este esențial ca etichetele să fie în dreapta, iar câmpurile de intrare în stânga, deoarece utilizatorul începe să citească din dreapta. Abordarea noastră: pentru fiecare element de text care conține material latin, în șablonul RTL adăugăm un <span dir="ltr">-wrapper cu un LRM final, astfel încât următorul caracter RTL să se alinieze corect la sfârșit.
Araba și ebraica se citesc de la dreapta la stânga – și răstoarnă astfel presupuneri de design tacite. Un raport practic din sistemul nostru de design.
Simboluri: cu direcție fixă sau logice?
Icoanele și pictogramele poartă adesea direcții implicite: săgețile înainte arată spre dreapta, săgețile înapoi spre stânga. Acestea trebuie oglindite în interfețele RTL, altfel navigarea devine neintuitivă. Cu toate acestea, nu toate simbolurile depind de direcție: un triunghi Play rămâne întotdeauna același (deoarece reprezintă o acțiune fizică), la fel și un simbol de e-mail sau telefon. Regula generală: direcția logică (succesiune temporală, direcție de citire, direcție de navigare) trebuie oglindită; semnificația fizică sau simbolică, nu. În dezvoltare, folosim transformări CSS pentru icoane: scaleX(-1) pentru toate SVG-urile logice direcționale, controlate printr-o clasă [dir=rtl] .icon--directional. Astfel evităm active duplicate. Atenție: săgețile carusel care arată spre dreapta trebuie să arate spre stânga în modul RTL, deoarece pagina „următoare” se află acum în stânga. Același lucru este valabil și pentru barele de progres: progresul ar trebui să crească de la dreapta la stânga. În sistemul nostru de design, astfel de componente sunt implementate cu proprietăți logice (inline-size în loc de width), astfel încât nivelul de umplere se leagă automat de începutul barei de progres.
Imagini: Ce să oglindim, ce să redesenăm?
Graficele și ilustrațiile conțin adesea simboluri culturale sau dependente de direcție: ceasuri care merg în sensul acelor de ceasornic (în context RTL, versiunea oglindită pare normală), strângeri de mână, linii temporale. Nu orice imagine trebuie oglindită complet – o mișcare oglindită a acelor de ceasornic ar putea fi percepută ca greșită, deoarece realitatea fizică rămâne aceeași. Dar o linie temporală de la stânga la dreapta ar trebui, în context RTL, să meargă de la dreapta la stânga. Logourile și imaginile de marcă rămân de obicei neschimbate, deoarece respectă o identitate vizuală fixă. Provocarea constă în livrarea automată a imaginilor corecte. Stocăm pentru fiecare grafică un echivalent RTL ca activ separat sau folosim transformări CSS pentru cazurile simple. În scenarii complexe (de exemplu, infografice cu text), este necesară o reproiectare manuală. Fluxul nostru de lucru: designerul grafic etichetează fiecare imagine ca „independentă de direcție”, „oglindibilă” sau „individuală” în CMS. Livrarea se face printr-o condiție care citește atributul dir al elementului părinte. Exemplu: O ilustrație a unei biblioteci cu cărți în scriere latină ar trebui oglindită pentru ca spinele cărților să apară în dreapta – acest lucru poate părea surprinzător la prima vedere, dar este consecvent.
SEO și hreflang: Marcare specifică RTL
Pentru motoarele de căutare, marcarea corectă a limbii și a direcției este esențială. Pe lângă atributul de limbă (lang), atributul dir trebuie setat pe fiecare pagină, astfel încât browserul și motorul de căutare să interpreteze corect direcția de citire. În cazul paginilor RTL multilingve, marcarea hreflang este deosebit de critică: o pagină arabă (ar) trebuie să facă referire corectă la omoloagele sale în germană sau engleză. Intrările hreflang eronate duc la indexări greșite, deoarece Google nu deduce automat direcția de citire. De asemenea, ar trebui să luați în considerare sitemap-uri separate pentru versiunile LTR și RTL, pentru a întări semnalele. O greșeală frecventă este utilizarea de tag-uri generice fără a ține cont de direcția de scriere. Noi ne bazăm pe o generare dinamică hreflang, care derivă atât codurile de limbă, cât și pe cele regionale din baza de date lingvistică. Pentru dialectele arabe, diferențierea regională este necesară, deoarece consumatorii și algoritmii au așteptări diferite. În plus, folosim tag-ul canonical pentru a evita inconsistențele între conținutul oglindit și cel neoglindit. Fluxul nostru de lucru verifică automat dacă atributul dir din antetul HTML este consecvent cu indicațiile hreflang. Deoarece un text arab fără dir="rtl" poate fi afișat greșit de browsere, ceea ce crește rata de respingere. Performanța SEO este influențată nu doar de texte, ci și de marcarea corectă a direcției de citire.
Accesibilitate: provocări RTL pentru tehnologiile asistive
Nevoile cititoarelor de ecran și ale altor tehnologii asistive se modifică odată cu direcția de citire. Cititoarele de ecran precum JAWS sau VoiceOver așteaptă atributul dir pentru a determina ordinea corectă de citire. Dacă această informație lipsește, ele pot citi conținutul mixt în ordine greșită. De asemenea, punctele de reper ARIA rămân aceleași, dar poziția în DOM ar trebui, ideal, să urmeze direcția de citire: meniul principal ar trebui să fie în codul sursă înaintea conținutului principal – în cazul RTL, aceasta înseamnă partea dreaptă mai întâi. Un alt aspect sunt ordinele de focalizare: indecșii de tab trebuie să parcurgă logic de la dreapta la stânga pe paginile RTL. Folosiți elemente HTML native care ajustează automat navigarea de la tastatură. Textele alternative ale imaginilor ar trebui să fie specifice limbii și să reflecte perspectiva culturii țintă. De exemplu, o imagine care prezintă o strângere de mână ar trebui descrisă în arabă ca „două mâini care se încrucișează”, deoarece conotația culturală este diferită. Recomandăm efectuarea de audituri de accesibilitate atât în vizualizarea LTR, cât și în cea RTL. Aceasta include verificarea contrastelor, care pot fi diferite în tipografia RTL. Echipa noastră utilizează instrumente automate combinate cu teste manuale efectuate de vorbitori nativi pentru a asigura o experiență de utilizare incluzivă.
blog.faqT
Trebuie să oglindesc toate imaginile când creez o versiune RTL?
Nu. Doar imaginile cu o direcție clară de citire, cum ar fi cronologii, săgeți sau diagrame continue, ar trebui oglindite. Logo-urile, portretele, graficele cu obiecte fizice (ceas, glob) rămân neschimbate, altfel sensul ar fi denaturat. Decideți de la caz la caz.
Cum testez RTL cel mai eficient în timpul dezvoltării?
Utilizați instrumentele de dezvoltare ale browserului pentru a seta atributul dir pe elementul html la "rtl" și verificați fiecare componentă pentru aranjament corect. Extindeți procesul de revizuire a codului cu o verificare RTL dedicată cu vorbitori nativi, care acoperă iritații vizuale și fluxuri de text bidirecțional incorecte.
