Basis dir-attribuut
Het dir-attribuut met de waarde 'rtl' is de basis voor elk RTL-webdesign. Het wordt meestal op de <html>- of <body>-tag gezet en beïnvloedt de tekstuitlijning, de standaardvolgorde van tabelcellen en de richting van CSS-eigenschappen zoals 'text-align'. Zonder dit attribuut blijven de inhoud links uitgelijnd, wat onnatuurlijk overkomt voor RTL-talen. Bovendien moet u 'dir' op containerniveau overschrijven wanneer gemengde richtingen voorkomen. Een ontbrekend of verkeerd dir-attribuut leidt tot slecht leesbare lay-outs en moet daarom prioriteit krijgen.
Gespiegelde lay-out en logische CSS-eigenschappen
In plaats van fysieke eigenschappen zoals 'left' en 'right' gebruikt u logische CSS-eigenschappen zoals 'margin-inline-start' en 'padding-inline-end'. Deze passen zich automatisch aan de schrijfrichting aan en voorkomen handmatige overschrijvingen. Een gespiegelde lay-out betekent dat de navigatiebalk rechts begint en de inhoud links. Met logische waarden zoals 'float: inline-start' of 'text-align: start' bereikt u dit zonder media queries. Moderne CSS-grid- en Flexbox-eigenschappen zoals 'justify-content: flex-start' werken correct afhankelijk van het dir-attribuut. Test altijd met echte inhoud, omdat logische eigenschappen niet door alle browsers gelijk worden geïnterpreteerd.
Cijfers en ingebed Latijn
In RTL-teksten blijven cijfers en ingebedde Latijnse letters van links naar rechts uitgelijnd. Dit brengt uitdagingen met zich mee, omdat ze de leesrichting kunnen verstoren. Gebruik het 'unicode-bidi'-attribuut of 'direction: ltr' voor dergelijke elementen om een consistente weergave te garanderen. Bij datum- of getalnotaties is het raadzaam de volgorde aan te passen aan de RTL-cultuur. Let ook op de lay-out van formulieren, waar invoervelden voor getallen links uitgelijnd moeten blijven. Een zorgvuldige behandeling van deze mengrichting voorkomt visuele breuken en verbetert de leesbaarheid.
Lettertypen en typografie
De keuze van het lettertype is cruciaal: Arabisch, Perzisch en Hebreeuws hebben lettertypen nodig met de juiste glyph-ondersteuning. Populaire opties zijn 'Noto Naskh Arabic', 'Vazir' voor Perzisch en 'Noto Sans Hebrew'. Definieer fallbacks, bijv. 'font-family: 'Noto Naskh Arabic', 'Tahoma', sans-serif;'. Let op voldoende lettergroottes en regelafstanden, omdat RTL-lettertypen vaak smaller of complexer zijn. Vermijd cursief, omdat dit in veel Arabische schriften niet bestaat. Test de weergave op verschillende apparaten om er zeker van te zijn dat de lettertypen correct worden geladen en leesbaar zijn.
Iconen en spiegeling
Iconen die een richting aangeven (bijv. pijlen, vooruit/terug-symbolen) moeten in RTL-lay-outs worden gespiegeld. Dit bereikt u met CSS-transformaties zoals 'transform: scaleX(-1)' of door gebruik te maken van icon-sets die RTL automatisch ondersteunen (bijv. Font Awesome met het 'dir'-attribuut). Symbolen zonder richtingsverwijzing (bijv. huis, instellingen) blijven ongewijzigd. Zorg ervoor dat de spiegeling de semantiek niet vervalst. Test alle iconen in de RTL-weergave, omdat onbedoelde spiegelingen de gebruiksvriendelijkheid kunnen aantasten.
