Grundläggande dir-attribut
Dir-attributet med värdet 'rtl' är grunden för all RTL-webbdesign. Det sätts oftast på <html>- eller <body>-taggen och påverkar textjusteringen, standardordningen för tabellceller och riktningen för CSS-egenskaper som 'text-align'. Utan detta attribut förblir innehållet vänsterjusterat, vilket känns onaturligt för RTL-språk. Du bör även åsidosätta 'dir' på containernivå när blandade riktningar förekommer. Ett saknat eller felaktigt dir-attribut leder till svårlästa layouter och bör därför prioriteras.
Speglad layout och logiska CSS-egenskaper
Istället för fysiska egenskaper som 'left' och 'right' använder du logiska CSS-egenskaper som 'margin-inline-start' och 'padding-inline-end'. Dessa anpassar sig automatiskt till skrivriktningen och undviker manuella överskrivningar. En speglad layout innebär att navigeringsfältet är till höger och innehållet börjar till vänster. Med logiska värden som 'float: inline-start' eller 'text-align: start' uppnår du detta utan media queries. Moderna CSS Grid- och Flexbox-egenskaper som 'justify-content: flex-start' fungerar korrekt beroende på dir-attributet. Testa alltid med verkligt innehåll, eftersom logiska egenskaper inte tolkas likadant av alla webbläsare.
Siffror och inbäddad latinsk text
I RTL-texter förblir siffror och inbäddade latinska bokstäver vänster-till-höger-orienterade. Detta innebär utmaningar eftersom de kan störa läsriktningen. Använd attributet 'unicode-bidi' eller 'direction: ltr' för sådana element för att säkerställa en konsekvent visning. För datum- eller sifferformat är det lämpligt att anpassa ordningen till RTL-kulturen. Var också uppmärksam på layouten av formulär, där inmatningsfält för siffror bör förbli vänsterjusterade. Noggrann hantering av denna blandriktning förhindrar visuella brott och förbättrar läsbarheten.
Typsnitt och typografi
Valet av typsnitt är avgörande: Arabiska, persiska och hebreiska kräver typsnitt med lämpligt glyfstöd. Populära alternativ är 'Noto Naskh Arabic', 'Vazir' för persiska och 'Noto Sans Hebrew'. Definiera reservtypsnitt, t.ex. 'font-family: 'Noto Naskh Arabic', 'Tahoma', sans-serif;'. Se till att teckenstorlekar och radavstånd är tillräckliga, eftersom RTL-typsnitt ofta är smalare eller mer komplexa. Undvik kursiv stil eftersom det inte finns i många arabiska typsnitt. Testa visningen på olika enheter för att säkerställa att typsnitten laddas korrekt och är läsbara.
Ikoner och spegling
Ikoner som visar en riktning (t.ex. pilar, framåt-/bakåt-symboler) måste speglas i RTL-layouter. Detta uppnår du med CSS-transformationer som 'transform: scaleX(-1)' eller genom att använda ikonuppsättningar som automatiskt stöder RTL (t.ex. Font Awesome med 'dir'-attribut). Symboler utan riktningsreferens (t.ex. hus, inställningar) förblir oförändrade. Se till att speglingen inte förvränger semantiken. Testa alla ikoner i RTL-vyn eftersom oavsiktlig spegling kan försämra användbarheten.
