Základní atribut dir
Atribut dir s hodnotou 'rtl' je základem každého RTL webdesignu. Obvykle se nastavuje na značce <html> nebo <body> a ovlivňuje zarovnání textu, výchozí pořadí buněk tabulky a směr vlastností CSS, jako je 'text-align'. Bez tohoto atributu zůstává obsah zarovnán vlevo, což působí pro RTL jazyky nepřirozeně. Dále byste měli 'dir' přepsat na úrovni kontejneru, pokud se vyskytují smíšené směry. Chybějící nebo nesprávný atribut dir vede k těžko čitelnému rozvržení, a proto by měl být prioritně řešen.
Zrcadlové rozložení a logické vlastnosti CSS
Místo fyzických vlastností jako 'left' a 'right' používejte logické vlastnosti CSS jako 'margin-inline-start' a 'padding-inline-end'. Ty se automaticky přizpůsobí směru psaní a vyhnete se manuálním úpravám. Zrcadlové rozložení znamená, že navigační panel začíná vpravo a obsah vlevo. Pomocí logických hodnot jako 'float: inline-start' nebo 'text-align: start' toho dosáhnete bez media dotazů. Moderní vlastnosti CSS Grid a Flexbox jako 'justify-content: flex-start' fungují správně podle atributu dir. Vždy testujte s reálným obsahem, protože logické vlastnosti nejsou všemi prohlížeči interpretovány stejně.
Čísla a vložená latinka
V RTL textech zůstávají čísla a vložená latinská písmena zarovnaná zleva doprava. To přináší výzvy, protože mohou narušit směr čtení. Používejte atribut 'unicode-bidi' nebo 'direction: ltr' pro tyto prvky, aby byla zajištěna konzistentní prezentace. U formátů data nebo čísel je vhodné přizpůsobit pořadí RTL kultuře. Dbejte také na rozložení formulářů, kde by vstupní pole pro čísla měla zůstat zarovnaná vlevo. Pečlivé zacházení s tímto smíšeným směrem zabrání vizuálním zlomům a zlepší čitelnost.
Písma a typografie
Výběr písma je klíčový: arabština, perština a hebrejština vyžadují písma s odpovídající podporou glyfů. Oblíbené možnosti jsou 'Noto Naskh Arabic', 'Vazir' pro perštinu a 'Noto Sans Hebrew'. Definujte záložní písma, např. 'font-family: 'Noto Naskh Arabic', 'Tahoma', sans-serif;'. Dbejte na dostatečnou velikost písma a řádkování, protože RTL písma jsou často užší nebo složitější. Vyhněte se kurzívě, protože v mnoha arabských písmech neexistuje. Testujte zobrazení na různých zařízeních, abyste se ujistili, že se písma správně načítají a jsou čitelná.
Ikony a zrcadlení
Ikony, které ukazují směr (např. šipky, symboly vpřed/vzad), musí být v RTL rozložení zrcadleny. Toho dosáhnete pomocí CSS transformací jako 'transform: scaleX(-1)' nebo použitím sad ikon, které automaticky podporují RTL (např. Font Awesome s atributem 'dir'). Symboly bez směrového významu (např. dům, nastavení) zůstávají nezměněny. Ujistěte se, že zrcadlení nezkresluje sémantiku. Otestujte všechny ikony v RTL zobrazení, protože nezamýšlená zrcadlení mohou ovlivnit použitelnost.
