2026-06-03 · Redactie Baduno · 6 blog.readMin · Blog & Kennis
RTL-ontwerp: Wat er verandert als de leesrichting omslaat
Arabisch en Hebreeuws lezen van rechts naar links – en zetten daarmee stilzwijgende designaannames op hun kop. Een praktijkverslag uit ons designsysteem.
Meer dan gespiegeld
De naïeve benadering – 'gewoon alles spiegelen' – mislukt snel: cijfers en Latijnse merknamen blijven links-naar-rechts, mediaspeler-pictogrammen behouden hun richting, telefoonnummers breken. RTL-ontwerp betekent voor elk element bepalen of het logisch (de leesrichting volgend) of fysiek (richtingsvast) is.
CSS: logische eigenschappen
Moderne CSS-logica maakt RTL beheersbaar: margin-inline-start in plaats van margin-left, inset-inline-end in plaats van right, text-align:start in plaats van left. Wie vanaf het begin logisch schrijft, krijgt de tweede leesrichting bijna cadeau – wie achteraf aanpast, vecht met honderden uitzonderingen. Deze website gebruikt overal logische eigenschappen; elke RTL-versie ontstaat uit hetzelfde stylesheet als de Duitse.
Typografie en dichtheid
Arabisch schrift heeft geen hoofdletters, andere boven-/onderlengtes en oogt bij dezelfde lettergrootte kleiner en dichter. Goede RTL-typografie vereist eigen, gespecialiseerde fonts, vaak een tot twee punt grotere gradaties en ruimere regelafstand. Ook letterspacing-effecten, populair in het Latijns, werken niet met verbonden schrift.
Testen met moedertaalsprekers
Geen enkele automatisme vervangt de blik van iemand die in het schrift leeft: regeleinden in samenstellingen, cijfers in doorlopende tekst, gemengde richtingen in formulieren – de foutcategorieën zijn subtiel. Ons controleproces omvat daarom altijd een visuele RTL-review, niet alleen tekstcorrectie.
Navigatie: Waar de logica omkeert
In RTL-omgevingen moeten navigatiestructuren opnieuw worden bedacht. Een horizontale menubalk begint rechts, het eerste menu-item is het meest linkse – de volgorde blijft logisch van rechts naar links. Dropdownmenu's openen standaard naar linksonder in plaats van rechtsonder, omdat het ankerpunt aan de rechterkant ligt. Zijbalken die in een LTR-layout links zijn geplaatst, verschuiven in RTL-gevallen naar rechts. Bijzondere voorzichtigheid is geboden bij hamburgermenu's: het pictogram zelf (drie horizontale lijnen) is richtingsneutraal, maar de plaatsing (linksboven versus rechtsboven) moet worden omgewisseld. Een veelgemaakte fout zijn submenu's die nog LTR-richting tonen, omdat ze niet via logische CSS-eigenschappen worden aangestuurd. In ons designsysteem definiëren we navigatiecomponenten daarom volledig met inset-inline-start/end, zodat ze automatisch schakelen tussen LTR en RTL. Praktisch voorbeeld: een broodkruimelnavigatie toont in de RTL-modus de huidige pagina links en de startpagina rechts – de scheidingspijlen moeten ook van richting veranderen. Wij gebruiken hiervoor CSS-content met ingebedde pijlen die afhankelijk van de dir-waarde een andere entiteit gebruiken.
Gemengde richtingen: cijfers en tekens
Cijfers, telefoonnummers, e-mailadressen en Latijnse merknamen behouden hun LTR-uitlijning, ook als de omringende tekst RTL is. Dit leidt tot zogenaamde bidirectionele secties waarin de leesrichting midden in de zin omslaat. Standaard behandelt het Unicode-bidirectionele algoritme (Bidi) dergelijke gemengde teksten, maar u moet ervoor zorgen dat de richtingswissel correct is. Gebruik het dir-attribuut op het niveau van het gemengde element of gebruik tekens zoals LRM (Left-to-Right Mark) en RLM (Right-to-Left Mark). Voorbeeld: in een Hebreeuwse zin „Telefon: 01234 56789” moet de cijferreeks van links naar rechts worden gelezen. Zonder correcte markering kan de browser de tekenreeks afbreken of verkeerd weergeven. In formulieren is het essentieel dat labels rechts en invoervelden links staan, omdat de gebruiker rechts begint te lezen. Onze aanpak: voor elk tekstelement met ingebed Latijns materiaal plaatsen we in het RTL-sjabloon een <span dir="ltr">-wrapper met een afsluitende LRM, zodat het volgende RTL-teken correct naar het einde verschuift.
Arabisch en Hebreeuws lezen van rechts naar links – en zetten daarmee stilzwijgende designaannames op hun kop. Een praktijkverslag uit ons designsysteem.
Symbolen: richtingsvast of logisch?
Pictogrammen en iconen dragen vaak impliciete richtingen: voorwaartse pijlen wijzen naar rechts, achterwaartse pijlen naar links. Deze moeten in RTL-oppervlakken worden gespiegeld, anders werkt de navigatie contra-intuïtief. Niet alle symbolen zijn echter richtingsafhankelijk: een afspeeldriehoek blijft altijd hetzelfde (omdat het een fysieke actie voorstelt), net als een e-mail- of telefoonpictogram. De vuistregel: logische richting (tijdsverloop, leesrichting, navigatierichting) moet worden gespiegeld; fysieke of symbolische betekenis niet. In de ontwikkeling gebruiken we CSS-transformaties voor pictogrammen: scaleX(-1) voor alle richtingslogische SVG's, aangestuurd door een klasse [dir=rtl] .icon--directional. Zo vermijden we dubbele assets. Let op: carrouselpijlen die naar rechts wijzen, moeten in de RTL-modus naar links wijzen, omdat de „volgende” pagina nu links ligt. Hetzelfde geldt voor voortgangsbalken: de voortgang moet van rechts naar links toenemen. In ons designsysteem zijn dergelijke componenten geïmplementeerd met logische eigenschappen (inline-size in plaats van width), zodat de vulgraad automatisch aan het begin van de voortgangsbalk bindt.
Afbeeldingen: wat spiegelen, wat hertekenen?
Grafieken en illustraties bevatten vaak culturele of richtingsafhankelijke symbolen: klokken die met de klok mee draaien (in RTL-context werkt dat gespiegeld normaal), handdrukken, tijdlijnen. Niet elke afbeelding hoeft volledig gespiegeld te worden – een gespiegelde wijzerbeweging kan als fout worden ervaren, omdat de fysieke realiteit behouden blijft. Maar een tijdlijn van links naar rechts moet in RTL-context van rechts naar links lopen. Logo's en merkafbeeldingen blijven meestal ongespiegeld, omdat ze een vast uiterlijk hebben. De uitdaging is om de juiste afbeeldingen automatisch te leveren. We slaan voor elke grafiek een RTL-equivalent op als apart asset of gebruiken CSS-transformaties voor eenvoudige gevallen. In complexe scenario's (bijv. infographics met tekst) is handmatig herontwerp nodig. Onze workflow: de grafisch ontwerper markeert elke afbeelding als 'richtingsvrij', 'spiegelbaar' of 'individueel' in het CMS. De levering gebeurt via een conditie die het dir-attribuut van het bovenliggende element uitleest. Voorbeeld: een afbeelding van een boekenkast met boeken in Latijns schrift moet worden gespiegeld zodat de ruggen rechts lijken – dat lijkt op het eerste gezicht verrassend, maar is consistent.
SEO en hreflang: RTL-specifieke markering
Voor zoekmachines is de correcte taal- en richtingsaanduiding essentieel. Naast het taalattribuut (lang) moet het dir-attribuut op elke pagina worden ingesteld, zodat de browser en de zoekmachine de leesrichting correct interpreteren. Bij meertalige RTL-pagina's is de hreflang-aanduiding bijzonder kritisch: een Arabische pagina (ar) moet correct verwijzen naar haar Duitse of Engelse tegenhangers. Foutieve hreflang-vermeldingen leiden tot verkeerde indexeringen, omdat Google de leesrichting niet automatisch afleidt. Bovendien moet u overwegen om aparte sitemaps voor LTR- en RTL-versies te gebruiken om signalen te versterken. Een veelgemaakte fout is het gebruik van generieke tags zonder rekening te houden met de schrijfrichting. Wij zetten in op dynamische hreflang-generatie die uit de taaldatabase zowel de taal- als de regiocodes afleidt. Voor Arabische dialecten is regionale differentiatie noodzakelijk, omdat consumenten en algoritmen verschillende verwachtingen hebben. Daarnaast gebruiken we de canonical-tag om inconsistenties tussen gespiegelde en niet-gespiegelde inhoud te voorkomen. Onze workflow controleert automatisch of het dir-attribuut in de HTML-header consistent is met de hreflang-opgaven. Want een Arabische tekst zonder dir="rtl" kan door browsers verkeerd worden weergegeven, wat weer het bouncepercentage verhoogt. De SEO-prestatie wordt dus niet alleen beïnvloed door teksten, maar ook door de correcte aanduiding van de leesrichting.
Toegankelijkheid: RTL-uitdagingen voor ondersteunende technologieën
De behoeften van schermlezers en andere ondersteunende technologieën veranderen met de leesrichting. Schermlezers zoals JAWS of VoiceOver verwachten het dir-attribuut om de juiste voorleesvolgorde te bepalen. Ontbreekt deze aanduiding, dan lezen ze gemengd talige inhoud mogelijk in de verkeerde volgorde. Ook de ARIA-landmarks blijven weliswaar hetzelfde, maar de positie in het DOM moet idealiter de leesrichting volgen: het hoofdmenu moet in de broncode vóór de hoofdinhoud staan – bij RTL betekent dat de rechterkant eerst. Een ander punt zijn focusvolgorden: tabindexen moeten in RTL-pagina's logisch van rechts naar links verlopen. Gebruik native HTML-elementen die de toetsenbordnavigatie automatisch aanpassen. De alt-teksten van afbeeldingen moeten taalspecifiek zijn en het perspectief van de doelcultuur weerspiegelen. Voorbeeld: een afbeelding die een handdruk toont, moet in het Arabisch worden beschreven als 'twee handen die elkaar kruisen', omdat de culturele connotatie anders is. Wij raden aan om toegankelijkheidsaudits zowel in LTR- als in RTL-weergave uit te voeren. Dit omvat het controleren van contrasten, die onder RTL-typografie anders kunnen uitvallen. Ons team gebruikt geautomatiseerde tools in combinatie met handmatige tests door moedertaalsprekers om ervoor te zorgen dat de gebruikerservaring inclusief is.
blog.faqT
Moet ik alle afbeeldingen spiegelen wanneer ik een RTL-versie maak?
Nee. Alleen afbeeldingen met een duidelijke leesrichting zoals tijdlijnen, pijlen of doorlopende diagrammen moeten worden gespiegeld. Logo's, portretten, grafieken met fysieke objecten (klok, globe) blijven ongewijzigd, omdat anders de betekenis wordt vervalst. Beslis per geval.
Hoe test ik RTL het meest efficiënt tijdens de ontwikkeling?
Gebruik browserontwikkeltools om het dir-attribuut op het html-element in te stellen op "rtl", en controleer elke component op correcte rangschikking. Breid uw code-reviewproces uit met een speciale RTL-check met moedertaalsprekers, die visuele irritaties en onjuiste bidirectionele tekststromen omvat.
