Waarom RTL-ondersteuning essentieel is
RTL (right-to-left) is niet zomaar een ander schrijfsysteem — het’s een fundamentaal andere leesrichting. Als je een website bouwt voor Arabische of Hebreeuwse gebruikers zonder RTL-ondersteuning, zien zij chaos. Knoppen staan aan de verkeerde kant. Tekst loopt in de verkeerde richting. Nummers verschijnen omgekeerd.
En hier’s het ding: je doelgroep uit het Midden-Oosten en Israël groeit elk jaar. Bedrijven die RTL negeren, verliezen klanten. Niet omdat hun product slecht is, maar omdat de website onbruikbaar aanvoelt.
We’ve gezien websites van grote bedrijven die RTL half-implementeren. Ze zetten Arabische tekst op de pagina, maar de knoppen blijven links. De sidebar zit nog steeds rechts. Dat werkt niet. Je moet goed nadenken over hoe alles zich spiegelt.
De basis: HTML-dir-attribuut instellen
Je begint niet met CSS. Je begint met HTML. Voeg het dir-attribuut toe aan je html-tag:
<html dir="rtl" lang="ar">
Of voor Hebreeuws:
<html dir="rtl" lang="he">
Dit één regel verandert alles. De browser weet nu: “Dit is RTL.” Tekst begint rechts. Schuifregelaars keren om. Marges spiegelen. Veel CSS-werk wordt al voor je gedaan.
Als je WPML of Polylang gebruikt — goed nieuws. Deze plugins zetten het dir-attribuut automatisch. Je hoeft het niet handmatig in te voegen.
CSS-aanpassingen: Het lastige deel
HTML regelt veel, maar CSS moet je aanpassen. En dat’s waar het interessant wordt. Je kan niet zomaar “left” door “right” vervangen. Je moet logische properties gebruiken.
Oude manier — WERKT NIET voor RTL:
.sidebar {
float: left;
margin-left: 20px;
}
Nieuwe manier — WERKT voor LTR EN RTL:
.sidebar {
float: inline-start;
margin-inline-start: 20px;
}
Zie het verschil? “inline-start” betekent “de startpositie van de tekstrichting.” In LTR is dat links. In RTL is dat rechts. Dezelfde CSS, ander resultaat. Perfect.
Logische properties die je nodig hebt:
- margin-inline-start / margin-inline-end (in plaats van margin-left / margin-right)
- padding-inline-start / padding-inline-end (in plaats van padding-left / padding-right)
- border-inline-start / border-inline-end (in plaats van border-left / border-right)
- float: inline-start (in plaats van float: left)
- text-align: start / end (in plaats van left / right)
WPML of Polylang configureren voor RTL
Als je WPML gebruikt, zit RTL-ondersteuning ingebouwd. Je hoeft het alleen in te schakelen:
Ga naar WPML Languages
Klik op de taal (Arabisch of Hebreeuws)
Zoek naar “Text direction” en zet het op “Right-to-left”
Sla op en test de voorkant van je site
Voor Polylang is het vergelijkbaar. Ga naar Languages Language Details en zet Direction op RTL.
Maar — en dit’s belangrijk — dit zorgt NIET automatisch voor perfecte RTL. Je thema kan nog steeds LTR-CSS hebben. Je moet je thema aanpassen. WPML en Polylang kunnen je helpen met het dir-attribuut, maar ze kunnen niet alle CSS magisch omdraaien.
Praktische tips die echt werken
Flexbox en Grid spiegelen automatisch
Als je flexbox of CSS Grid gebruikt, hoef je niks te doen. De browser handelt het af. Een flex-container met flex-direction: row spiegelt zichzelf in RTL. Dat’s waarom moderne CSS zoveel beter is dan float-gebaseerde layouts.
Test met echte RTL-tekst
Niet met placeholders. Echt Arabisch of Hebreeuws. Sommige lettertypes werken niet goed met RTL. Je ziet dit pas als je echte tekst gebruikt. Regelafstanden kunnen ook anders zijn — RTL-tekst neemt meer ruimte in beslag dan je denkt.
Getallen en afkortingen zijn lastig
In RTL-tekst verschijnen getallen soms in de verkeerde volgorde. “2024” kan “4202” worden. Email-adressen kunnen omdraaien. Je moet dit testen met je werkelijke gegevens. Sommige browsers handelen dit beter af dan anderen.
Niet alles hoeft te spiegelen
Afbeeldingen hoeven niet gespiegeld te worden. Logo’s blijven hetzelfde. Alleen layout en tekst richten zich naar RTL. Je hoeft niet je hele branding om te draaien.
Wat je niet moet doen
We’ve gezien RTL-implementaties die op de verkeerde manier gaan. Leer van hun fouten:
- Niet zomaar CSS flippen. Je kan niet een screenshot nemen, horizontaal spiegelen en klaar zijn. Dat werkt niet. Tekst wordt onleesbaar. Elementen overlappen.
- Niet verschillende themes gebruiken. Eén theme met logische CSS is beter dan twee aparte themes. Onderhoud is veel lastiger met twee versies.
- Niet vergeten dat RTL mobiel ook werkt. Je test desktop RTL, maar je mobiele menu? Dat kan een nachtmerrie zijn. Test op echte telefoons.
- Niet vertrouwen op automatische vertalingen van plugins. Sommige plugins zeggen “RTL-ondersteund!” maar dat betekent alleen dat het dir-attribuut wordt ingesteld. Jouw CSS-werk is nog niet gedaan.
Het einde van het verhaal
RTL-ondersteuning is geen groot mysterie, maar het vergt voorbereiding. Je start met het dir-attribuut. Je herwerkt je CSS naar logische properties. Je test met echt RTL-content. En je accepteert dat het niet perfect zal zijn de eerste keer.
De websites die dit goed doen, winnen gebruikers. De websites die het negeren, verliezen ze. En we’re niet eens aan de grens van wat mogelijk is — er zijn nog veel meer RTL-nuances waar we niet in gedoken hebben. Maar met wat we hier hebben behandeld, ben je al veel verder dan 90% van de websites.
Begin vandaag. Zet dir=”rtl” in. Pas je CSS aan. Test ervan. Je Arabische en Hebreeuwse bezoekers zullen het verschil voelen.
