2026-06-03 · Uredništvo Baduno · 6 blog.readMin · Blog & Znanje
RTL dizajn: Što se mijenja kad se smjer čitanja preokrene
Arapski i hebrejski čitaju se zdesna nalijevo – i time preokreću podrazumijevane dizajnerske pretpostavke. Praktični izvještaj iz našeg dizajnerskog sustava.
Više od zrcaljenja
Naivni pristup – 'jednostavno sve zrcaliti' – brzo propada: brojevi i latinični nazivi brendova ostaju s lijeva na desno, simboli medijskog playera zadržavaju svoj smjer, telefonski brojevi se lome. RTL dizajn znači odlučivati za svaki element je li logičan (prati smjer čitanja) ili fizički (fiksan smjer).
CSS: logička svojstva
Moderna CSS logika čini RTL upravljivim: margin-inline-start umjesto margin-left, inset-inline-end umjesto right, text-align:start umjesto left. Tko od početka piše logično, drugi smjer čitanja dobiva gotovo besplatno – tko nadograđuje, bori se sa stotinama izuzetaka. Ova web stranica dosljedno koristi logička svojstva; svaka RTL verzija nastaje iz istog stylesheet-a kao i njemačka.
Tipografija i gustoća
Arapsko pismo nema velika slova, drugačije su gornje/donje duljine i pri istoj veličini fonta djeluje manje i gušće. Dobra RTL tipografija zahtijeva vlastite, specijalizirane fontove, često jedan do dva boda veće stupnjeve i velikodušniju visinu retka. Efekti razmaka slova, popularni u latinici, ne funkcioniraju s povezanim pismom.
Testiranje s izvornim govornicima
Nikakav automatizam ne zamjenjuje pogled osobe koja živi u pismu: prijelomi redaka u složenicama, brojevi u tekućem tekstu, miješani smjerovi u obrascima – klase pogrešaka su suptilne. Naš proces provjere stoga uvijek uključuje vizualni RTL pregled, a ne samo ispravak teksta.
Navigacija: Gdje logika posrće
U RTL okruženjima, navigacijske strukture moraju se ponovno osmisliti. Horizontalna traka izbornika počinje s desne strane, prva stavka izbornika je krajnja lijeva – redoslijed ostaje logičan s desna na lijevo. Padajući izbornici otvaraju se prema dolje lijevo umjesto dolje desno, jer se sidrište nalazi s desne strane. Bočne trake koje su u LTR rasporedu postavljene lijevo, u RTL slučaju pomiču se udesno. Poseban oprez potreban je kod hamburger izbornika: Sama ikona (tri vodoravne crte) je neutralna prema smjeru, ali njezin položaj (gore lijevo naspram gore desno) mora se zamijeniti. Česta pogreška su podizbornici koji još uvijek pokazuju LTR smjer jer nisu kontrolirani logičkim CSS svojstvima. U našem sustavu dizajna, navigacijske komponente stoga u potpunosti definiramo pomoću inset-inline-start/end, tako da automatski prelaze između LTR i RTL. Praktičan primjer: Breadcrumb navigacija u RTL načinu prikazuje trenutnu stranicu lijevo, a početnu stranicu desno – razdjelne strelice također moraju promijeniti smjer. Ovdje se oslanjamo na CSS-content s ugrađenim strelicama koje koriste različiti entitet ovisno o dir vrijednosti.
Mješoviti smjerovi: Brojevi i znakovi
Brojevi, telefonski brojevi, adrese e-pošte i latinični nazivi brendova zadržavaju svoju LTR orijentaciju, čak i ako je okolni tekst RTL. To dovodi do takozvanih dvosmjernih odjeljaka u kojima se smjer čitanja mijenja usred rečenice. Standardno, Unicode bidirekcioni algoritam (Bidi) obrađuje takve miješane tekstove, ali morate osigurati da je preklopnik smjera ispravan. Koristite dir atribut na razini miješanog elementa ili upotrijebite znakove poput LRM (Left-to-Right Mark) i RLM (Right-to-Left Mark). Primjer: U hebrejskoj rečenici „Telefon: 01234 56789“ niz brojeva mora se čitati s lijeva na desno. Bez ispravne oznake, preglednik bi mogao prelomiti niz znakova ili ga pogrešno prikazati. U obrascima je bitno da oznaka bude desno, a unos lijevo, jer korisnik počinje čitati s desne strane. Naš pristup: Za svaki tekstualni element s ugrađenim latiničnim materijalom, u RTL predlošku postavljamo <span dir="ltr"> omotač sa završnim LRM, kako bi sljedeći RTL znak ispravno došao na kraj.
Arapski i hebrejski čitaju se zdesna nalijevo – i time preokreću podrazumijevane dizajnerske pretpostavke. Praktični izvještaj iz našeg dizajnerskog sustava.
Simboli: Fiksni ili logični?
Ikone i piktogrami često nose implicitne smjerove: Strelice naprijed pokazuju udesno, strelice natrag ulijevo. One se moraju zrcaliti na RTL sučeljima, inače navigacija djeluje kontraintuitivno. Međutim, nisu svi simboli ovisni o smjeru: Trokut za reprodukciju uvijek ostaje isti (jer predstavlja fizičku radnju), isto vrijedi i za ikonu e-pošte ili telefona. Osnovno pravilo: Logički smjer (vremenski slijed, smjer čitanja, smjer navigacije) mora se zrcaliti; fizičko ili simboličko značenje ne. U razvoju koristimo CSS transformacije za ikone: scaleX(-1) za sve logički usmjerene SVG-ove, kontrolirane klasom [dir=rtl] .icon--directional. Tako izbjegavamo dupliciranje resursa. Pažnja: Strelice vrtuljka koje pokazuju udesno moraju u RTL načinu pokazivati ulijevo, jer se „sljedeća“ stranica sada nalazi lijevo. Isto vrijedi za trake napretka: Napredak bi trebao rasti s desna na lijevo. U našem sustavu dizajna, takve komponente implementirane su s logičkim svojstvima (inline-size umjesto width), tako da se razina popunjenosti automatski veže za početak trake napretka.
Slike: Što zrcaliti, što ponovno nacrtati?
Grafike i ilustracije često sadrže kulturne ili smjerne simbole: satove koji idu u smjeru kazaljke na satu (u RTL kontekstu zrcaljeno izgleda normalno), rukovanja, vremenske trake. Ne mora se svaka slika u potpunosti zrcaliti – zrcaljeno kretanje kazaljke moglo bi se smatrati netočnim jer fizička stvarnost ostaje ista. Ali vremenska traka slijeva nadesno trebala bi u RTL kontekstu ići zdesna nalijevo. Logotipi i brend slike obično ostaju nepromijenjeni jer podliježu fiksnom izgledu. Izazov je automatski isporučiti prave slike. Za svaku grafiku pohranjujemo RTL ekvivalent kao zasebnu datoteku ili koristimo CSS transformacije za jednostavne slučajeve. U složenim scenarijima (npr. infografike s tekstom) potrebno je ručno redizajniranje. Naš tijek rada: grafički dizajner označava svaku sliku kao 'bez smjera', 'zrcaljivo' ili 'individualno' u CMS-u. Isporuka se vrši putem uvjeta koji očitava dir-atribut nadređenog elementa. Primjer: prikaz police s knjigama na latinskom pismu morao bi se zrcaliti kako bi hrptovi knjiga bili s desne strane – to može izgledati iznenađujuće na prvi pogled, ali je dosljedno.
SEO i hreflang: RTL-specifično označavanje
Za tražilice je ispravno označavanje jezika i smjera čitanja ključno. Osim atributa jezika (lang), na svakoj stranici mora biti postavljen atribut dir kako bi preglednik i tražilica ispravno interpretirali smjer čitanja. Kod višejezičnih RTL stranica, hreflang označavanje je posebno kritično: arapska stranica (ar) mora ispravno upućivati na svoje njemačke ili engleske inačice. Pogrešni hreflang unosi dovode do netočne indeksacije jer Google ne izvodi automatski smjer čitanja. Osim toga, trebali biste razmotriti zasebne karte web-mjesta za LTR i RTL verzije kako biste pojačali signale. Česta pogreška je korištenje generičkih oznaka bez uzimanja u obzir smjera pisma. Mi se oslanjamo na dinamičko generiranje hreflang-a koje iz jezične baze podataka izvodi i jezične i regionalne kodove. Za arapske dijalekte potrebna je regionalna diferencijacija jer potrošači i algoritmi imaju različita očekivanja. Dodatno, koristimo canonical oznaku kako bismo izbjegli nedosljednosti između zrcaljenog i nezrcaljenog sadržaja. Naš tijek rada automatski provjerava je li atribut dir u HTML zaglavlju dosljedan s hreflang podacima. Naime, arapski tekst bez dir="rtl" može se netočno prikazati u preglednicima, što povećava stopu odlaska. SEO izvedba dakle nije pod utjecajem samo tekstova, već i ispravnog označavanja smjera čitanja.
Pristupačnost: RTL izazovi za asistivne tehnologije
Potrebe čitača zaslona i drugih asistivnih tehnologija mijenjaju se s smjerom čitanja. Čitači zaslona poput JAWS ili VoiceOver očekuju dir atribut kako bi odredili ispravan redoslijed čitanja. Ako taj podatak nedostaje, mješovitojezični sadržaj mogu čitati u pogrešnom redoslijedu. Iako ARIA orijentiri ostaju isti, položaj u DOM-u trebao bi idealno slijediti smjer čitanja: glavni izbornik trebao bi u izvornom kodu biti ispred glavnog sadržaja – kod RTL-a to znači desna strana prvo. Još jedna točka su redoslijedi fokusa: tab indeksi moraju na RTL stranicama logično ići s desna na lijevo. Koristite izvorne HTML elemente koji automatski prilagođavaju navigaciju tipkovnicom. Alt tekstovi slika trebali bi biti specifični za jezik i odražavati perspektivu ciljne kulture. Primjer: grafika koja prikazuje rukovanje trebala bi se na arapskom opisati kao "dvije ruke koje se križaju" jer je kulturološka konotacija drugačija. Preporučujemo provođenje revizija pristupačnosti u LTR i RTL prikazu. To uključuje provjeru kontrasta, koji pod RTL tipografijom mogu biti drugačiji. Naš tim koristi automatizirane alate u kombinaciji s ručnim testiranjem od strane izvornih govornika kako bi osigurao da korisničko iskustvo bude uključivo.
blog.faqT
Moram li preslikati sve slike kada izrađujem RTL verziju?
Ne. Samo slike s jasnim smjerom čitanja poput vremenskih linija, strelica ili kontinuiranih dijagrama treba preslikati. Logotipi, portreti, grafike s fizičkim objektima (sat, globus) ostaju nepromijenjeni jer bi se inače izgubilo značenje. Odlučite ovisno o slučaju.
Kako najučinkovitije testirati RTL tijekom razvoja?
Koristite alate za razvojne programere u pregledniku kako biste postavili dir atribut na html element na "rtl" i provjerite svaku komponentu za ispravan raspored. Proširite svoj proces pregleda koda namjenskom RTL provjerom s izvornim govornicima koja pokriva vizualne smetnje i netočne bidirekcionalne tokove teksta.
