dir=rtl voor tekst van rechts naar links
Schakel een RTL-lay-out in voor Arabisch, Hebreeuws en andere RTL-talen
dir=rtl voor tekst van rechts naar links is een gratis HTML Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject HTML Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus HTML Academy bevat in totaal 4 lessen.
Wat dir doet
Het kenmerk dir geeft de basistekstrichting van een element aan. dir="ltr" (van links naar rechts, de standaard voor de meeste talen) of dir="rtl" (van rechts naar links, voor Arabisch, Hebreeuws, Perzisch en Urdu).
Instellen op html voor RTL op de hele site
Stel voor sites in het Arabisch, Hebreeuws, Perzisch of Urdu dir="rtl" in op het hoofdelement. Hierdoor verandert de standaardrichting van elk blok: tekst wordt rechts uitgelijnd, lijsten springen rechts in, schuifbalken staan links en indelingen worden met moderne CSS automatisch gespiegeld.
<html lang="ar" dir="rtl">
<head>...</head>
<body>...</body>
</html>Bidirectionele tekst
Tekst met gemengde richtingen (Arabisch met ingebedde Engelse merknamen) volgt automatisch het Unicode-algoritme voor bidirectionele tekst. De basistekstrichting (uit dir) bepaalt op regelniveau hoe segmenten met één richting worden gerangschikt; afzonderlijke tekenreeksen lopen in de natuurlijke richting van hun eigen schrift.
Logische CSS-eigenschappen
Moderne CSS gebruikt logische eigenschappen die zich aan de richting aanpassen: margin-inline-start (links in LTR, rechts in RTL), padding-inline-end en border-inline-start. Door left/right te vervangen door start/end kan één stylesheet beide richtingen ondersteunen.
/* Works in both directions */
.card {
padding-inline-start: 16px;
margin-block-end: 12px;
border-inline-end: 1px solid #ccc;
}Flexbox en Grid passen zich automatisch aan
De rijrichting van Flexbox houdt rekening met dir: in RTL lopen items van rechts naar links. Ook de kolommen van een Grid-sjabloon worden omgedraaid. Daardoor werken de meeste indelingen met flex of grid in RTL zonder richtingsspecifieke CSS — moderne indelingen zijn onafhankelijk van de richting.
Pictogrammen die moeten omdraaien
Richtingspictogrammen (terugpijl, volgende-pijl, ongedaan maken/opnieuw) moeten in RTL worden omgedraaid. Gebruik CSS transform: scaleX(-1) binnen [dir="rtl"], of lever afzonderlijke RTL-varianten van SVG's. Niet-richtingsgebonden pictogrammen (zoeken, instellingen, tandwiel) blijven hetzelfde.
[dir="rtl"] .icon-back {
transform: scaleX(-1);
}Tekstuitlijning
Gebruik bij voorkeur text-align: start in plaats van text-align: left — start wordt links in LTR en rechts in RTL. Hetzelfde geldt voor end. Richtingsbewuste uitlijning voorkomt een categorie fouten bij het toevoegen van RTL-ondersteuning.
dir per element overschrijven
Stel dir="auto" in op een element om de browser de richting te laten bepalen aan de hand van het eerste teken met een sterke richting: <p dir="auto">{user.name}</p> werkt voor door gebruikers ingevoerde namen die Arabisch, Engels of gemengd kunnen zijn, zonder aparte uitzonderingen.
Bidi-insluiting
De elementen bdi (isolatie van bidirectionele tekst) en bdo (overschrijven van bidirectionele tekst) geven gedetailleerde controle over hoe het bidi-algoritme specifieke tekst behandelt — handig wanneer je gebruikersinvoer letterlijk weergeeft of een bepaalde richting afdwingt voor een codefragment binnen doorlopende tekst.
Formuliervelden
Invoervelden nemen dir over van hun bovenliggende element. Stel voor door gebruikers ingevoerde tekst waarvan de richting kan verschillen (bijvoorbeeld in een chatapp met meertalige gebruikers) dir="auto" in op afzonderlijke invoervelden, zodat elk veld op basis van de inhoud correct wordt weergegeven.
RTL-indelingen testen
Met browsers kun je RTL tijdelijk bekijken door in de DevTools-console document.documentElement.dir = "rtl" in te stellen. Controleer de richting van pictogrammen, binnenruimte en buitenmarges, de positie van de schuifbalk en of geen element hardgecodeerde left/right gebruikt waar start/end nodig is.
CSS-richting verschilt van indelingsrichting
De CSS-eigenschap direction en het HTML-kenmerk dir hebben op de meeste indelingen hetzelfde effect. Geef de voorkeur aan het HTML-kenmerk, omdat ondersteunende technologie, mailprogramma's en andere verwerkers dit kunnen lezen, terwijl de CSS-eigenschap alleen de weergave in browsers beïnvloedt.
Kennischeck
Waarom hebben logische CSS-eigenschappen zoals margin-inline-start de voorkeur boven margin-left bij ondersteuning van RTL-talen?
Samenvatting
dir="rtl" op <html> verandert de basistekstrichting voor sites in het Arabisch, Hebreeuws, Perzisch of Urdu. Logische CSS-eigenschappen (margin-inline-start, padding-block-end) passen zich automatisch aan. Indelingen met Flexbox en Grid worden zonder wijzigingen gespiegeld. Draai richtingspictogrammen om, gebruik text-align: start/end en gebruik dir="auto" voor gebruikersinhoud waarvan de richting onbekend is.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 40
- Lessen
- 159
Veelgestelde vragen
Is de les “dir=rtl voor tekst van rechts naar links” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad HTML Academy, waaronder “dir=rtl voor tekst van rechts naar links”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus HTML Academy bevat in totaal 4 lessen.
Wat leer ik in “dir=rtl voor tekst van rechts naar links”?
Schakel een RTL-lay-out in voor Arabisch, Hebreeuws en andere RTL-talen Je oefent met HTML Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met HTML Academy te beginnen?
Ervaring vooraf is niet nodig. HTML Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.
Hoe lang duurt de les “dir=rtl voor tekst van rechts naar links”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over HTML Academy?
Ja. Elke les over HTML Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Het lang-attribuut en schermlezers
- dir=rtl voor tekst van rechts naar links
- De elementen bdi en bdo
- charset en Unicode: speciale tekens verwerken