Základný atribút dir
Atribút dir s hodnotou 'rtl' je základom každého RTL webdizajnu. Zvyčajne sa nastavuje na značke <html> alebo <body> a ovplyvňuje zarovnanie textu, predvolené poradie buniek tabuľky a smer CSS vlastností ako 'text-align'. Bez tohto atribútu zostáva obsah zarovnaný doľava, čo pôsobí pre RTL jazyky neprirodzene. Okrem toho by ste mali prepísať 'dir' na úrovni kontajnera, ak sa vyskytujú zmiešané smery. Chýbajúci alebo nesprávny atribút dir vedie k ťažko čitateľným rozloženiam, a preto by mal byť prioritne ošetrený.
Zrkadlové rozloženie a logické CSS vlastnosti
Namiesto fyzických vlastností ako 'left' a 'right' používajte logické CSS vlastnosti ako 'margin-inline-start' a 'padding-inline-end'. Tie sa automaticky prispôsobia smeru písania a eliminujú potrebu manuálnych prepisov. Zrkadlové rozloženie znamená, že navigačný panel je vpravo a obsah začína vľavo. S logickými hodnotami ako 'float: inline-start' alebo 'text-align: start' to dosiahnete bez media queries. Moderné CSS Grid a Flexbox vlastnosti ako 'justify-content: flex-start' fungujú správne podľa atribútu dir. Vždy testujte so skutočným obsahom, pretože logické vlastnosti nie sú všetkými prehliadačmi interpretované rovnako.
Čísla a vložená latinčina
V RTL textoch zostávajú čísla a vložené latinské písmená zarovnané zľava doprava. To prináša výzvy, pretože môžu narušiť smer čítania. Používajte atribút 'unicode-bidi' alebo 'direction: ltr' pre takéto prvky, aby ste zaistili konzistentné zobrazenie. Pri formátoch dátumov alebo čísel je vhodné prispôsobiť poradie RTL kultúre. Dávajte pozor aj na rozloženie formulárov, kde by vstupné polia pre čísla mali zostať zarovnané vľavo. Starostlivé zaobchádzanie s týmto zmiešaným smerom zabráni vizuálnym zlomom a zlepší čitateľnosť.
Písma a typografia
Výber písma je kľúčový: arabčina, perzština a hebrejčina vyžadujú písma s príslušnou podporou glyfov. Obľúbené možnosti sú 'Noto Naskh Arabic', 'Vazir' pre perzštinu a 'Noto Sans Hebrew'. Definujte záložné písma, napr. 'font-family: 'Noto Naskh Arabic', 'Tahoma', sans-serif;'. Dbajte na dostatočnú veľkosť písma a riadkovanie, pretože RTL písma sú často užšie alebo zložitejšie. Vyhnite sa kurzíve, pretože v mnohých arabských písmach neexistuje. Otestujte zobrazenie na rôznych zariadeniach, aby ste sa uistili, že písma sú správne načítané a čitateľné.
Ikony a zrkadlenie
Ikony, ktoré označujú smer (napr. šípky, symboly dopredu/dozadu), musia byť v RTL rozloženiach zrkadlené. To dosiahnete pomocou CSS transformácií ako 'transform: scaleX(-1)' alebo použitím sád ikon, ktoré RTL podporujú automaticky (napr. Font Awesome s atribútom 'dir'). Symboly bez smerového významu (napr. dom, nastavenia) zostávajú nezmenené. Uistite sa, že zrkadlenie neskresľuje sémantiku. Otestujte všetky ikony v RTL zobrazení, pretože neúmyselné zrkadlenia môžu ovplyvniť použiteľnosť.
