2026-06-03 · Redakcia Baduno · 6 blog.readMin · Blog a znalosti
RTL dizajn: Čo sa mení, keď sa zmení smer čítania
Arabčina a hebrejčina sa čítajú sprava doľava – a tým prevracajú tiché dizajnové predpoklady. Praktická správa z nášho dizajnového systému.
Viac než zrkadlenie
Naivný prístup – ‚jednoducho všetko zrkadliť' – rýchlo zlyháva: čísla a latinské názvy značiek zostávajú zľava doprava, symboly prehrávača médií si zachovávajú smer, telefónne čísla sa lámu. RTL dizajn znamená pre každý prvok rozhodnúť, či je logický (nasledujúci smer čítania) alebo fyzický (pevný smer).
CSS: logické vlastnosti
Moderná logika CSS robí RTL zvládnuteľným: margin-inline-start namiesto margin-left, inset-inline-end namiesto right, text-align:start namiesto left. Kto od začiatku píše logicky, dostane druhý smer čítania takmer zadarmo – kto dodatočne upravuje, bojuje so stovkami výnimiek. Táto webová stránka dôsledne používa logické vlastnosti; každá RTL verzia vzniká z rovnakého štýlopisu ako nemecká.
Typografia a hustota
Arabské písmo nemá veľké písmená, má iné dĺžky nad a pod riadkom a pri rovnakej veľkosti písma pôsobí menšie a hustejšie. Dobrá RTL typografia potrebuje vlastné, špecializované fonty, často o jeden až dva body väčšiu veľkosť a štedrejšiu výšku riadku. Tiež efekty rozstupovania písmen, obľúbené v latinke, pri spojenom písme nefungujú.
Testovanie s rodenými hovorcami
Žiadny automatizmus nenahradí pohľad človeka, ktorý v písme žije: zalomenia riadkov v zloženinách, čísla v súvislom texte, zmiešané smery vo formulároch – chybové kategórie sú nenápadné. Náš kontrolný proces preto vždy zahŕňa vizuálne RTL posúdenie, nielen korektúru textu.
Navigácia: Kde sa logika obracia
V prostredí RTL je potrebné nanovo premýšľať o navigačných štruktúrach. Horizontálny panel ponuky začína vpravo, prvý bod ponuky je úplne vľavo – poradie zostáva logické sprava doľava. Rozbaľovacie ponuky sa štandardne otvárajú vľavo dole namiesto vpravo dole, pretože kotviaci bod je na pravej strane. Bočné panely, ktoré sú v rozložení LTR umiestnené vľavo, sa v prípade RTL presúvajú doprava. Osobitná pozornosť sa venuje hamburger menu: Samotná ikona (tri horizontálne čiary) je smerovo neutrálna, ale jej umiestnenie (hore vľavo vs. hore vpravo) je potrebné vymeniť. Častou chybou sú podponuky, ktoré stále zobrazujú smer LTR, pretože nie sú riadené logickými CSS vlastnosťami. V našom dizajnovom systéme preto definujeme navigačné komponenty výhradne pomocou inset-inline-start/end, takže automaticky prepínajú medzi LTR a RTL. Praktický príklad: Navigácia so strúhankou v režime RTL zobrazuje aktuálnu stránku vľavo a domovskú stránku vpravo – oddeľovacie šípky musia tiež zmeniť smer. Používame CSS-content s vloženými šípkami, ktoré v závislosti od hodnoty dir používajú inú entitu.
Zmiešané smery: Čísla a znaky
Čísla, telefónne čísla, e-mailové adresy a latinské názvy značiek si zachovávajú svoje LTR zarovnanie, aj keď je okolitý text RTL. To vedie k takzvaným obojsmerným sekciám, v ktorých sa smer čítania uprostred vety mení. Štandardne sa o tieto zmiešané texty stará algoritmus Unicode-Bidi, ale musíte sa uistiť, že prepínač smeru je správny. Použite atribút dir na úrovni zmiešaného prvku alebo využite znaky ako LRM (Left-to-Right Mark) a RLM (Right-to-Left Mark). Príklad: V hebrejskej vete „Telefon: 01234 56789“ musí byť postupnosť čísel čítaná zľava doprava. Bez správneho označenia by prehliadač mohol reťazec zlomiť alebo nesprávne zobraziť. Vo formulároch je nevyhnutné, aby bol popis vpravo a vstup vľavo, pretože používateľ začína čítať vpravo. Náš postup: Pre každý textový prvok s vloženým latinským materiálom vložíme v RTL šablóne <span dir="ltr">-obal s koncovým LRM, aby sa nasledujúci RTL znak správne presunul na koniec.
Arabčina a hebrejčina sa čítajú sprava doľava – a tým prevracajú tiché dizajnové predpoklady. Praktická správa z nášho dizajnového systému.
Symboly: Smerovo pevné alebo logické?
Ikony a piktogramy často nesú implicitné smery: šípky dopredu ukazujú doprava, šípky dozadu doľava. Tie je potrebné v RTL rozhraniach zrkadliť, inak pôsobí navigácia kontraintuitívne. Nie všetky symboly sú však smerovo závislé: Prehrávací trojuholník zostáva vždy rovnaký (pretože predstavuje fyzickú akciu), rovnako ako ikona e-mailu alebo telefónu. Pravidlo: Logický smer (časový priebeh, smer čítania, navigačný smer) musí byť zrkadlený; fyzický alebo symbolický význam nie. Vo vývoji používame CSS transformácie pre ikony: scaleX(-1) pre všetky smerovo logické SVG, riadené triedou [dir=rtl] .icon--directional. Tak sa vyhneme duplicitným assetom. Pozor: Šípky karuselu, ktoré ukazujú doprava, musia v režime RTL ukazovať doľava, pretože „ďalšia“ strana je teraz vľavo. To isté platí pre indikátory priebehu: Pokrok by mal narastať sprava doľava. V našom dizajnovom systéme sú tieto komponenty implementované s logickými vlastnosťami (inline-size namiesto width), takže úroveň naplnenia sa automaticky viaže na začiatok indikátora priebehu.
Obrázky: Čo zrkadliť, čo prekresliť?
Grafika a ilustrácie často obsahujú kultúrne alebo smerovo závislé symboly: hodiny, ktoré idú v smere hodinových ručičiek (v kontexte RTL pôsobí zrkadlené normálne), podanie rúk, časové osi. Nie každý obrázok musí byť úplne zrkadlený – zrkadlený pohyb hodinových ručičiek by mohol byť vnímaný ako nesprávny, pretože fyzikálna realita zostáva zachovaná. Ale časová os zľava doprava by mala v kontexte RTL prebiehať sprava doľava. Logá a značkové obrázky zvyčajne zostávajú nezmenené, pretože podliehajú pevnému vzhľadu. Výzvou je automaticky doručovať správne obrázky. Pre každú grafiku ukladáme RTL ekvivalent ako samostatný asset alebo používame CSS transformácie pre jednoduché prípady. V zložitých scenároch (napr. infografiky s textom) je potrebný manuálny redesign. Náš pracovný postup: Grafik v CMS označí každý obrázok ako „bez smerovania“, „zrkadliteľný“ alebo „individuálny“. Doručenie prebieha pomocou podmienky, ktorá číta atribút dir nadradeného elementu. Príklad: Obrázok knižnice s knihami v latinke by sa musel zrkadliť, aby chrbty kníh smerovali doprava – to môže byť na prvý pohľad prekvapivé, ale je to konzistentné.
SEO a hreflang: RTL-špecifické označenie
Pre vyhľadávače je korektné označenie jazyka a smeru písania nevyhnutné. Okrem jazykového atribútu (lang) musí byť na každej stránke nastavený atribút dir, aby prehliadač a vyhľadávač správne interpretovali smer čítania. Pri viacjazyčných RTL stránkach je označenie hreflang obzvlášť kritické: Arabská stránka (ar) musí správne odkazovať na svoje nemecké alebo anglické náprotivky. Chybné položky hreflang vedú k nesprávnej indexácii, pretože Google neodvodzuje smer čítania automaticky. Okrem toho by ste mali zvážiť samostatné mapy stránok pre LTR a RTL verzie, aby ste posilnili signály. Častou chybou je používanie generických tagov bez ohľadu na smer písania. My spoliehame na dynamické generovanie hreflang, ktoré z jazykovej databázy odvodzuje jazykové aj regionálne kódy. Pre arabské dialekty je regionálna diferenciácia nevyhnutná, pretože spotrebitelia a algoritmy majú rozdielne očakávania. Dodatočne používame canonical tag, aby sme predišli nezrovnalostiam medzi zrkadleným a nezrkadleným obsahom. Náš workflow automaticky kontroluje, či je atribút dir v HTML hlavičke konzistentný s hreflang údajmi. Arabský text bez dir="rtl" môže byť prehliadačom nesprávne zobrazený, čo zvyšuje mieru odchodov. SEO výkonnosť je teda ovplyvnená nielen textami, ale aj korektným označením smeru čítania.
Prístupnosť: Výzvy RTL pre asistenčné technológie
Potreby čítačov obrazovky a iných asistenčných technológií sa menia so smerom čítania. Čítače obrazovky ako JAWS alebo VoiceOver očakávajú atribút dir na určenie správneho poradia predčítania. Ak tento údaj chýba, zmiešaný obsah môžu predčítať v nesprávnom poradí. ARIA landmarky síce zostávajú rovnaké, ale pozícia v DOM by mala ideálne nasledovať smer čítania: Hlavné menu by malo byť v zdrojovom kóde pred hlavným obsahom – pre RTL to znamená najskôr pravá strana. Ďalším bodom sú poradia fokusu: Tab indexy musia na RTL stránkach logicky postupovať sprava doľava. Používajte natívne HTML prvky, ktoré automaticky prispôsobia navigáciu klávesnicou. Alternatívne texty obrázkov by mali byť jazykovo špecifické a odrážať perspektívu cieľovej kultúry. Príklad: Grafika zobrazujúca podanie rúk by mala byť v arabčine opísaná ako „dve ruky, ktoré sa krížia“, pretože kultúrna konotácia je odlišná. Odporúčame vykonávať audity prístupnosti v LTR aj RTL zobrazení. Patrí sem kontrola kontrastov, ktoré môžu byť pri RTL typografii odlišné. Náš tím používa automatizované nástroje v kombinácii s manuálnymi testami rodných hovoriacich, aby zabezpečil inkluzívne používateľské skúsenosti.
blog.faqT
Musím pri vytváraní RTL verzie zrkadliť všetky obrázky?
Nie. Zrkadliť by sa mali iba obrázky s jasným smerom čítania, ako sú časové osi, šípky alebo súvislé diagramy. Logá, portréty, grafiky s fyzickými objektmi (hodiny, glóbus) zostávajú nezmenené, inak by sa skreslil ich význam. Rozhodujte podľa konkrétneho prípadu.
Ako najefektívnejšie otestovať RTL počas vývoja?
Použite vývojárske nástroje prehliadača na nastavenie atribútu dir na prvku html na "rtl" a skontrolujte správne usporiadanie každej komponenty. Rozšírte svoj proces kontroly kódu o vyhradenú RTL kontrolu s rodenými hovorcami, ktorá pokrýva vizuálne rušivé prvky a nesprávne toky obojsmerného textu.
