2026-06-03 · Redakce Baduno · 6 blog.readMin · Blog a znalosti
RTL design: Co se mění, když se změní směr čtení
Arabština a hebrejština se čtou zprava doleva – a tím převracejí tiché designové předpoklady. Praktická zpráva z našeho designového systému.
Více než zrcadlení
Naivní přístup – ‚prostě vše zrcadlit' – rychle selhává: Čísla a latinské názvy značek zůstávají zleva doprava, symboly přehrávače médií si zachovávají svůj směr, telefonní čísla se lámou. RTL design znamená pro každý prvek rozhodnout, zda je logický (následující směr čtení) nebo fyzický (směrově pevný).
CSS: logické vlastnosti
Moderní logika CSS dělá RTL zvládnutelným: margin-inline-start místo margin-left, inset-inline-end místo right, text-align:start místo left. Kdo od začátku píše logicky, dostane druhý směr čtení téměř zadarmo – kdo dodatečně upravuje, bojuje se stovkami výjimek. Tento web používá souvisle logické vlastnosti; každá RTL verze vzniká ze stejného stylopisu jako německá.
Typografie a hustota
Arabské písmo nemá velká písmena, má jiné horní/dolní délky a při stejné velikosti písma působí menší a hustší. Dobrá typografie pro RTL vyžaduje vlastní specializované fonty, často o jeden až dva body větší stupeň a štědřejší řádkování. Efekty prokládání znaků, oblíbené v latince, u spojitého písma nefungují.
Testování s rodilými mluvčími
Žádný automatismus nenahradí pohled člověka, který v písmu žije: zalomení řádků ve složeninách, čísla v souvislém textu, smíšené směry ve formulářích – chybové třídy jsou subtilní. Náš kontrolní proces proto vždy zahrnuje vizuální RTL revizi, ne jen opravu textu.
Navigace: Kde logika selhává
V prostředí RTL je třeba přehodnotit navigační struktury. Horizontální panel nabídek začíná vpravo, první položka nabídky je úplně vlevo – pořadí zůstává logické zprava doleva. Rozbalovací nabídky se standardně otevírají vlevo dole místo vpravo dole, protože kotvící bod je na pravé straně. Postranní panely, které jsou v rozložení LTR umístěny vlevo, se v případě RTL přesouvají doprava. Zvláštní opatrnost je třeba věnovat hamburger menu: samotná ikona (tři vodorovné čáry) je směrově neutrální, ale její umístění (nahoře vlevo vs. nahoře vpravo) musí být prohozeno. Častou chybou jsou podnabídky, které stále ukazují směr LTR, protože nejsou řízeny logickými vlastnostmi CSS. V našem designovém systému proto definujeme navigační komponenty kompletně s inset-inline-start/end, takže automaticky přepínají mezi LTR a RTL. Praktický příklad: Drobečková navigace v režimu RTL zobrazuje aktuální stránku vlevo a domovskou stránku vpravo – oddělovací šipky musí také změnit svůj směr. Zde používáme CSS-content s vloženými šipkami, které podle hodnoty dir používají jinou entitu.
Smíšené směry: Číslice a znaky
Čísla, telefonní čísla, e-mailové adresy a latinské názvy značek si zachovávají své LTR zarovnání, i když je okolní text RTL. To vede k takzvaným bidirekčním úsekům, kde směr čtení uprostřed věty přepíná. Unicode bidirekční algoritmus (Bidi) tyto smíšené texty zpracovává standardně, ale musíte zajistit, aby byl přepínač směru správný. Použijte atribut dir na úrovni smíšeného prvku nebo použijte znaky jako LRM (Left-to-Right Mark) a RLM (Right-to-Left Mark). Příklad: V hebrejské větě „Telefon: 01234 56789“ musí být číselná řada čtena zleva doprava. Bez správného označení by prohlížeč mohl řetězec zlomit nebo zobrazit nesprávně. Ve formulářích je nezbytné, aby popisky byly vpravo a vstupní pole vlevo, protože uživatel začíná číst vpravo. Náš postup: Pro každý textový prvek s vloženým latinským materiálem vkládáme v RTL šabloně obal <span dir="ltr"> s koncovým LRM, aby se následující RTL znak správně přesunul na konec.
Arabština a hebrejština se čtou zprava doleva – a tím převracejí tiché designové předpoklady. Praktická zpráva z našeho designového systému.
Symboly: Pevného směru, nebo logické?
Ikony a piktogramy často nesou implicitní směry: Šipky vpřed ukazují doprava, šipky zpět doleva. Ty musí být v RTL rozhraních zrcadleny, jinak bude navigace působit kontraintuitivně. Ne všechny symboly jsou však směrově závislé: Trojúhelník pro přehrávání zůstává vždy stejný (protože představuje fyzickou akci), stejně jako ikona e-mailu nebo telefonu. Základní pravidlo: Logický směr (časový průběh, směr čtení, směr navigace) musí být zrcadlen; fyzický nebo symbolický význam nikoli. Při vývoji používáme CSS transformace pro ikony: scaleX(-1) pro všechny směrově logické SVG, řízené třídou [dir=rtl] .icon--directional. Tím se vyhneme duplicitním assetům. Pozor: Šipky karuselu, které ukazují doprava, musí v režimu RTL ukazovat doleva, protože „další“ stránka je nyní vlevo. Totéž platí pro indikátory průběhu: průběh by se měl zvyšovat zprava doleva. V našem designovém systému jsou takové komponenty implementovány s logickými vlastnostmi (inline-size místo width), takže úroveň naplnění se automaticky váže na začátek indikátoru průběhu.
Obrázky: Co zrcadlit, co překreslit?
Grafiky a ilustrace často obsahují kulturní nebo směrově závislé symboly: hodiny, které jdou po směru hodinových ručiček (v RTL kontextu působí zrcadleně normálně), podání rukou, časové osy. Ne každý obrázek musí být zcela zrcadlen – zrcadlený pohyb hodinových ručiček by mohl být vnímán jako chybný, protože fyzická realita zůstává zachována. Ale časová osa zleva doprava by měla v RTL kontextu probíhat zprava doleva. Loga a značkové obrázky většinou zůstávají nedotčeny, protože podléhají pevnému vzhledu. Výzvou je automaticky doručovat správné obrázky. Pro každou grafiku ukládáme RTL ekvivalent jako samostatné aktivum nebo pro jednoduché případy používáme CSS transformace. V komplexních scénářích (např. infografiky s textem) je nutný manuální redesign. Náš workflow: Grafik označí každý obrázek jako „směrově nezávislý“, „zrcadlitelný“ nebo „individuální“ v CMS. Doručení probíhá pomocí podmínky, která čte atribut dir nadřazeného prvku. Příklad: Obrázek knihovny s knihami v latinském písmu by musel být zrcadlen, aby hřbety knih působily vpravo – to může na první pohled překvapit, ale je to konzistentní.
SEO a hreflang: označení specifické pro RTL
Pro vyhledávače je správné označení jazyka a směru čtení zásadní. Kromě atributu lang musí být na každé stránce nastaven atribut dir, aby prohlížeč a vyhledávač správně interpretovaly směr čtení. U vícejazyčných RTL stránek je označení hreflang obzvláště kritické: Arabská stránka (ar) musí správně odkazovat na své německé nebo anglické protějšky. Chybné položky hreflang vedou k nesprávnému indexování, protože Google neodvozuje směr čtení automaticky. Kromě toho byste měli zvážit samostatné mapy stránek pro verze LTR a RTL, aby se zesílily signály. Častou chybou je použití generických tagů bez ohledu na směr psaní. My se spoléháme na dynamické generování hreflang, které z jazykové databáze odvozuje jak jazykové, tak regionální kódy. U arabských dialektů je regionální rozlišení nezbytné, protože spotřebitelé i algoritmy mají různá očekávání. Navíc používáme canonical tag, abychom předešli nekonzistencím mezi zrcadleným a nezrcadleným obsahem. Náš pracovní postup automaticky kontroluje, zda je atribut dir v HTML hlavičce konzistentní s údaji hreflang. Arabský text bez dir="rtl" může být prohlížeči zobrazen nesprávně, což zvyšuje míru okamžitého opuštění. Výkon SEO je tedy ovlivněn nejen texty, ale také správným označením směru čtení.
Přístupnost: Výzvy RTL pro asistenční technologie
Potřeby čteček obrazovky a dalších asistenčních technologií se mění se směrem čtení. Čtečky obrazovky jako JAWS nebo VoiceOver očekávají atribut dir, aby určily správné pořadí čtení. Pokud tento údaj chybí, mohou vícejazyčný obsah číst v nesprávném pořadí. ARIA landmarks sice zůstávají stejné, ale pozice v DOM by měla ideálně následovat směr čtení: Hlavní menu by mělo být ve zdrojovém kódu před hlavním obsahem – u RTL to znamená pravou stranu jako první. Dalším bodem je pořadí fokusu: Tab indexy musí na RTL stránkách logicky probíhat zprava doleva. Používejte nativní HTML prvky, které automaticky přizpůsobují navigaci klávesnicí. Alternativní texty obrázků by měly být jazykově specifické a odrážet perspektivu cílové kultury. Příklad: Grafika zobrazující podání ruky by měla být v arabštině popsána jako „dvě ruce, které se kříží“, protože kulturní konotace je jiná. Doporučujeme provádět audity přístupnosti jak v zobrazení LTR, tak RTL. Patří sem kontrola kontrastů, které mohou být u RTL typografie odlišné. Náš tým využívá automatizované nástroje v kombinaci s manuálními testy rodilými mluvčími, aby zajistil inkluzivní uživatelský zážitek.
blog.faqT
Musím při vytváření verze RTL zrcadlit všechny obrázky?
Ne. Zrcadlit by se měly pouze obrázky s jasným směrem čtení, jako jsou časové osy, šipky nebo souvislé diagramy. Loga, portréty, grafiky s fyzickými objekty (hodiny, glóbus) zůstávají nezměněny, jinak by došlo ke zkreslení významu. Rozhodujte případ od případu.
Jak nejefektivněji otestovat RTL při vývoji?
Použijte nástroje pro vývojáře v prohlížeči k nastavení atributu dir na prvku html na „rtl“ a zkontrolujte každou komponentu na správné uspořádání. Rozšiřte svůj proces code review o specializovanou kontrolu RTL s rodilými mluvčími, která pokryje vizuální rušení a nesprávné obousměrné toky textu.
