Osnovni dir atribut
dir atribut s vrijednošću 'rtl' temelj je svakog RTL web dizajna. Najčešće se postavlja na <html> ili <body> oznaku te utječe na poravnanje teksta, zadani redoslijed ćelija tablice i smjer CSS svojstava poput 'text-align'. Bez ovog atributa sadržaj ostaje poravnat ulijevo, što za RTL jezike djeluje neprirodno. Također, trebate nadjačati 'dir' na razini spremnika ako se pojave mješoviti smjerovi. Nedostajući ili pogrešan dir atribut dovodi do teško čitljivih izgleda i stoga ga treba prioritetno riješiti.
Zrcaljeni raspored i logička CSS svojstva
Umjesto fizičkih svojstava poput 'left' i 'right', koristite logička CSS svojstva poput 'margin-inline-start' i 'padding-inline-end'. Ona se automatski prilagođavaju smjeru pisanja i izbjegavaju ručna prebrisavanja. Zrcaljeni raspored znači da navigacijska traka počinje s desne strane, a sadržaj s lijeve. Logičkim vrijednostima poput 'float: inline-start' ili 'text-align: start' to postižete bez medijskih upita. Moderne CSS Grid i Flexbox osobine poput 'justify-content: flex-start' ispravno djeluju ovisno o dir atributu. Uvijek testirajte sa stvarnim sadržajem jer logička svojstva nisu jednako interpretirana u svim preglednicima.
Brojevi i ugrađeni latinični tekst
U RTL tekstovima brojevi i ugrađena latinična slova ostaju poravnati s lijeva na desno. To nosi izazove jer mogu poremetiti smjer čitanja. Koristite 'unicode-bidi' atribut ili 'direction: ltr' za takve elemente kako biste osigurali dosljedan prikaz. Kod formata datuma ili brojeva preporučljivo je prilagoditi redoslijed RTL kulturi. Obratite pažnju i na raspored obrazaca, gdje polja za unos brojeva trebaju ostati poravnata lijevo. Pažljivo postupanje s ovim mješovitim smjerom sprječava vizualne prekide i poboljšava čitljivost.
Fontovi i tipografija
Odabir fonta je ključan: arapski, perzijski i hebrejski zahtijevaju fontove s odgovarajućom podrškom za glifove. Popularne opcije su 'Noto Naskh Arabic', 'Vazir' za perzijski i 'Noto Sans Hebrew'. Definirajte fallbackove, npr. 'font-family: 'Noto Naskh Arabic', 'Tahoma', sans-serif;'. Obratite pažnju na dovoljne veličine fontova i prorede jer RTL fontovi često su uži ili složeniji. Izbjegavajte kurziv jer u mnogim arapskim pismima ne postoji. Testirajte prikaz na različitim uređajima kako biste bili sigurni da se fontovi ispravno učitavaju i da su čitljivi.
Ikone i zrcaljenje
Ikone koje pokazuju smjer (npr. strelice, simboli naprijed/natrag) moraju se zrcaliti u RTL rasporedima. To postižete CSS transformacijama poput 'transform: scaleX(-1)' ili korištenjem setova ikona koji automatski podržavaju RTL (npr. Font Awesome s 'dir' atributom). Simboli bez smjernog značenja (npr. kuća, postavke) ostaju nepromijenjeni. Provjerite da zrcaljenje ne iskrivljuje semantiku. Testirajte sve ikone u RTL prikazu jer nenamjerno zrcaljenje može narušiti upotrebljivost.
