Logische properties in RTL-layouts
Bouw een echt bidirectionele layout die automatisch wordt gespiegeld voor Arabisch en Hebreeuws met logische properties.
Logische properties in RTL-layouts is een gratis CSS Academy-les op CoddyKit. Dit is les 4 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject CSS Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus CSS Academy bevat in totaal 4 lessen.
RTL instellen in HTML
Declareer RTL in HTML met het attribuut dir en een overeenkomende lang:
<div dir="rtl" lang="ar" class="rtl-box">مرحبا بكم في تخطيط RTL</div>
dir="rtl" in CSS
Je kunt de richting ook in CSS instellen — handig voor tests of gedeeltelijke RTL-secties:
<div dir="rtl">هذا العنصر باتجاه RTL</div>
De LTR/RTL-schakeling testen
Een snelle test: voeg dir="rtl" toe aan <html>. Met logische eigenschappen hoort de indeling correct te spiegelen. Met fysieke eigenschappen zie je wat er moet worden aangepast.
Wat zich automatisch aanpast
Wanneer dir="rtl" is ingesteld, draaien deze zaken automatisch mee dankzij logische eigenschappen:
- Tekstuitlijning (begin/einde)
- Marges en binnenafstanden (inline-start/end)
- Randen (inline-start/end)
- Zwevende elementen (inline-start/end)
- Positionering (inset-inline-start/end)
Wat zich NIET automatisch aanpast
Ook met logische eigenschappen hebben deze zaken in RTL aandacht nodig:
- Achtergrondafbeeldingen met richtingsafhankelijke inhoud
- SVG-pictogrammen die een duidelijke richting hebben (pijlen, chevrons)
- Transformaties zoals
translateX()— gebruiktranslateX(calc(-1 * var(--offset)))met een richtingsvlag - Absolute positionering met expliciete pixelwaarden
SVG-pictogrammen spiegelen
CSS biedt een nette manier om richtingsafhankelijke pictogrammen in RTL om te draaien:
<div dir="rtl"><span class="icon-arrow"></span> Mirrored arrow in RTL</div>
Richtingsafhankelijke CSS-variabele
Een truc met CSS-variabelen voor richtingsafhankelijke waarden:
<div dir="rtl" class="drawer">Drawer</div>
Praktisch RTL-voorbeeld
Een kaartcomponent met logische eigenschappen:
<div dir="rtl" class="card"><span class="card__icon">🔔</span><span class="card__text">تنبيه جديد</span></div>
font-size en RTL
Sommige Arabische lettertypen lijken bij dezelfde pixelgrootte groter of kleiner dan Latijnse equivalenten. Definieer indien nodig een afzonderlijke font-size per schrijfsysteem:
<p>Default text (16px)</p>
<p lang="ar">نص عربي (17px)</p>
Testhulpmiddelen
Met de DevTools van de browser kunt u bidirectionele indelingen simuleren. Gebruik ook de toegankelijkheidsstructuur van Chrome om te controleren of de leesvolgorde voor schermlezers de logische volgorde volgt en niet de visuele volgorde.
RTL-controlelijst uit de praktijk
Controlelijst voor RTL:
- Alle marges/binnenafstanden gebruiken logische eigenschappen
- Alle randen gebruiken inline-start/end
- Tekstuitlijning gebruikt begin/einde
- Richtingsafhankelijke pictogrammen worden omgedraaid met scaleX(-1)
- Absolute posities gebruiken waar nodig inset-inline-*
- Schuifbare containers schuiven vanaf de juiste rand
Korte controle
Welke CSS-transformatie is de eenvoudigste manier om een richtingsafhankelijke SVG-pijl in RTL-indelingen te spiegelen?
Samenvatting
Stel dir="rtl" in op het html-element voor een RTL-indeling. Logische eigenschappen passen marges, binnenafstanden, randen en uitlijning automatisch aan. Voor fysieke pixels in transformaties en absolute positionering moet u nog steeds handmatig rekening houden met RTL. Spiegel richtingsafhankelijke pictogrammen met scaleX(-1). Test dit door dir="rtl" op uw hoofdelement aan en uit te zetten.
Leer CSS 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 “Logische properties in RTL-layouts” gratis?
Ja — de volledige tekst van “Logische properties in RTL-layouts” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus CSS Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus CSS Academy bevat in totaal 4 lessen.
Wat leer ik in “Logische properties in RTL-layouts”?
Bouw een echt bidirectionele layout die automatisch wordt gespiegeld voor Arabisch en Hebreeuws met logische properties. Je oefent met CSS 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 CSS Academy te beginnen?
Ervaring vooraf is niet nodig. CSS 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 4 van 4.
Hoe lang duurt de les “Logische properties in RTL-layouts”?
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 CSS Academy?
Ja. Elke les over CSS 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
- Waarom logische properties: internationalisering
- Block- en inline-richtingen
- Logische margin, padding en border
- Logische properties in RTL-layouts