2026-06-03 · Uredništvo Baduno · 6 blog.readMin · Blog & Znanje
RTL-oblikovanje: Kaj se spremeni, ko se smer branja obrne
Arabščina in hebrejščina se bereta od desne proti levi – in s tem postavljata na glavo tihe oblikovne predpostavke. Poročilo iz prakse iz našega oblikovnega sistema.
Več kot zrcaljeno
Naiven pristop – 'preprosto vse zrcaliti' – hitro propade: številke in latinske blagovne znamke ostanejo levo proti desni, simboli predvajalnikov medijev ohranijo svojo smer, telefonske številke se zlomijo. RTL-oblikovanje pomeni, da se za vsak element odločimo, ali je logičen (sledi smeri branja) ali fizičen (fiksne smeri).
CSS: logične lastnosti
Sodobna logika CSS naredi RTL obvladljiv: margin-inline-start namesto margin-left, inset-inline-end namesto right, text-align:start namesto left. Kdor od začetka piše logično, dobi drugo smer branja skoraj zastonj – kdor naknadno dodaja, se bori s stotinami izjem. Ta spletna stran dosledno uporablja logične lastnosti; vsaka RTL različica nastane iz iste slogovne predloge kot nemška.
Tipografija in gostota
Arabska pisava nima velikih črk, drugačne nad- in podaljške ter je pri enaki velikosti pisave videti manjša in gostejša. Dobra RTL tipografija potrebuje lastne, specializirane pisave, pogosto za eno do dve točki večjo stopnjo in bolj radodarno višino vrstice. Tudi učinki črkovnega razmika, priljubljeni v latinici, pri povezani pisavi ne delujejo.
Testiranje z naravnimi govorci
Noben avtomatizem ne nadomesti pogleda osebe, ki živi v pisavi: prelomi vrstic v sestavljenkah, številke v tekočem besedilu, mešane smeri v obrazcih – vrste napak so subtilne. Naš postopek preverjanja zato vedno vključuje vizualni RTL-pregled, ne le popravka besedila.
Navigacija: Kjer se logika prevrne
V okoljih RTL je treba navigacijske strukture na novo premisliti. Vodoravna menijska vrstica se začne na desni, prva menijska točka je skrajno leva – vrstni red ostaja logičen od desne proti levi. Spustni meniji se privzeto odprejo navzdol proti levi namesto navzdol proti desni, ker je sidrišče na desni strani. Stranske vrstice, ki so v postavitvi LTR na levi, se v primeru RTL premaknejo na desno. Posebna previdnost velja za hamburger menije: ikona sama (tri vodoravne črte) je smerno nevtralna, vendar je treba njeno postavitev (zgoraj levo proti zgoraj desno) zamenjati. Pogosta napaka so podmeniji, ki še vedno kažejo smer LTR, ker niso upravljani z logičnimi CSS-lastnostmi. Zato v našem oblikovalskem sistemu navigacijske komponente v celoti definiramo z inset-inline-start/end, tako da samodejno preklapljajo med LTR in RTL. Praktični primer: Navigacija z drobtinami v načinu RTL prikazuje trenutno stran na levi in začetno stran na desni – ločilne puščice morajo prav tako spremeniti smer. Tu uporabljamo CSS-content z vdelanimi puščicami, ki glede na vrednost dir uporabljajo drugo entiteto.
Mešane smeri: številke in znaki
Številke, telefonske številke, e-poštni naslovi in latinska imena blagovnih znamk ohranijo svojo usmerjenost LTR, tudi če je okoliško besedilo RTL. To vodi do tako imenovanih dvosmernih odsekov, kjer se smer branja sredi stavka spremeni. Privzeto Unicode dvosmerni algoritem (Bidi) obravnava takšna mešana besedila, vendar morate zagotoviti, da je preklop smeri pravilen. Uporabite atribut dir na ravni mešanega elementa ali uporabite znake, kot so LRM (levo-proti-desni znak) in RLM (desno-proti-levi znak). Primer: V hebrejskem stavku „Telefon: 01234 56789“ je treba zaporedje številk brati od leve proti desni. Brez pravilne označitve lahko brskalnik zaporedje znakov prelomi ali napačno prikaže. V obrazcih je bistveno, da so oznake na desni in vnosna polja na levi, saj uporabnik začne brati na desni. Naš pristop: Za vsak besedilni element z vdelanim latinskim materialom v predlogi RTL dodamo ovoj <span dir="ltr"> z zaključnim LRM, da se naslednji znak RTL pravilno premakne na konec.
Arabščina in hebrejščina se bereta od desne proti levi – in s tem postavljata na glavo tihe oblikovne predpostavke. Poročilo iz prakse iz našega oblikovnega sistema.
Simboli: smerno fiksni ali logični?
Ikone in piktogrami pogosto nosijo implicitne smeri: puščice naprej kažejo na desno, puščice nazaj na levo. Te je treba na površinah RTL zrcaliti, sicer navigacija deluje kontraintuitivno. Vendar niso vsi simboli odvisni od smeri: trikotnik za predvajanje ostane vedno enak (ker predstavlja fizično dejanje), prav tako ikona e-pošte ali telefona. Pravilo palca: Logično smer (časovni potek, smer branja, smer navigacije) je treba zrcaliti; fizičnega ali simbolnega pomena ne. Pri razvoju uporabljamo CSS-transformacije za ikone: scaleX(-1) za vse smerno logične SVG-je, krmiljene z razredom [dir=rtl] .icon--directional. Tako se izognemo dvojnim sredstvom. Pozor: Puščice vrtiljaka, ki kažejo na desno, morajo v načinu RTL kazati na levo, saj je »naslednja« stran zdaj na levi. Enako velja za napredovalne vrstice: napredek naj narašča od desne proti levi. V našem oblikovalskem sistemu so takšne komponente implementirane z logičnimi lastnostmi (inline-size namesto width), tako da se nivo zapolnitve samodejno veže na začetek napredovalne vrstice.
Slike: kaj zrcaliti, kaj na novo narisati?
Grafike in ilustracije pogosto vsebujejo kulturne ali smerno odvisne simbole: ure, ki tečejo v smeri urinega kazalca (v RTL kontekstu to zrcaljeno deluje normalno), stiske rok, časovne premice. Ni treba vsake slike v celoti zrcaliti – zrcaljeno gibanje urinega kazalca bi lahko bilo zaznano kot napačno, ker fizična realnost ostaja nespremenjena. Toda časovna premica od leve proti desni naj bi v RTL kontekstu potekala od desne proti levi. Logotipi in blagovne znamke večinoma ostanejo nespremenjeni, saj so podvrženi ustaljeni podobi. Izziv je, da prave slike samodejno dostavimo. Za vsako grafiko shranimo RTL ustreznico kot ločeno sredstvo ali uporabimo CSS transformacije za preproste primere. V kompleksnih scenarijih (npr. infografike z besedilom) je potrebno ročno preoblikovanje. Naš potek dela: Oblikovalec označi vsako sliko kot »smerno nevtralno«, »zrcaljivo« ali »individualno« v CMS. Dostava poteka prek pogoja, ki prebere dir-atribut nadrejenega elementa. Primer: Slika knjižne police s knjigami v latinici bi morala biti zrcaljena, da so hrbtenice knjig na desni – to je na prvi pogled morda presenetljivo, a je dosledno.
SEO in hreflang: označevanje, specifično za RTL
Za iskalnike je pravilna oznaka jezika in smeri branja bistvena. Poleg jezikovnega atributa (lang) mora biti na vsaki strani nastavljen atribut dir, da brskalnik in iskalnik pravilno interpretirata smer branja. Pri večjezičnih RTL straneh je oznaka hreflang še posebej kritična: arabska stran (ar) mora pravilno kazati na svoje nemške ali angleške ustreznike. Napačni vnosi hreflang povzročijo napačno indeksiranje, saj Google smeri branja ne izpelje samodejno. Poleg tega razmislite o ločenih zemljevidih spletnega mesta (sitemaps) za različici LTR in RTL, da okrepite signale. Pogosta napaka je uporaba generičnih oznak brez upoštevanja smeri pisanja. Mi uporabljamo dinamično generiranje hreflang, ki iz jezikovne baze podatkov izpelje tako jezikovne kot regijske kode. Za arabska narečja je potrebna regionalna razločitev, saj imajo potrošniki in algoritmi različna pričakovanja. Dodatno uporabljamo oznako canonical, da se izognemo neskladnostim med zrcaljenimi in nezrcaljenimi vsebinami. Naš potek dela samodejno preverja, ali je atribut dir v glavi HTML skladen z navedbami hreflang. Kajti arabsko besedilo brez dir="rtl" lahko brskalniki napačno prikažejo, kar poveča stopnjo odboja. Uspešnost SEO torej ni odvisna le od besedil, ampak tudi od pravilne označitve smeri branja.
Dostopnost: Izzivi RTL za podporne tehnologije
Potrebe bralnikov zaslona in drugih podpornih tehnologij se spreminjajo glede na smer branja. Bralniki zaslona, kot sta JAWS ali VoiceOver, pričakujejo atribut dir, da določijo pravilen vrstni red branja. Če ta podatek manjka, lahko mešanojezične vsebine berejo v napačnem vrstnem redu. Tudi mejniki ARIA ostajajo enaki, vendar bi morala biti lega v DOM idealno skladna s smerjo branja: glavni meni naj bo v izvorni kodi pred glavno vsebino – pri RTL to pomeni desno stran najprej. Druga točka so zaporedja fokusa: indeksi zavihkov morajo na RTL straneh logično potekati od desne proti levi. Uporabite izvorne elemente HTML, ki samodejno prilagodijo navigacijo s tipkovnico. Nadomestna besedila slik naj bodo jezikovno specifična in odražajo perspektivo ciljne kulture. Primer: grafika, ki prikazuje rokovanje, naj bo v arabščini opisana kot »dve roki, ki se križata«, saj je kulturna konotacija drugačna. Priporočamo izvedbo revizij dostopnosti tako v pogledu LTR kot RTL. To vključuje preverjanje kontrastov, ki so lahko pri tipografiji RTL drugačni. Naša ekipa uporablja avtomatizirana orodja v kombinaciji z ročnimi testi domačih govorcev, da zagotovimo vključujočo uporabniško izkušnjo.
blog.faqT
Ali moram zrcaliti vse slike, ko ustvarjam različico RTL?
Ne. Zrcaliti je treba le slike z jasno smerjo branja, kot so časovne premice, puščice ali zaporedni diagrami. Logotipi, portreti, grafike s fizičnimi predmeti (ura, globus) ostanejo nespremenjene, saj bi sicer pomen postal popačen. Odločite se glede na posamezen primer.
Kako najučinkoviteje preizkusim RTL med razvojem?
Uporabite razvojna orodja brskalnika, da nastavite atribut dir na elementu html na "rtl", in preverite vsako komponento za pravilno razporeditev. Razširite svoj postopek pregleda kode z namenskim RTL-pregledom pri maternih govorcih, ki pokriva vizualne motnje in nepravilne dvosmerne besedilne tokove.
