Block- en inline-richtingen
Leer de block- en inline-flowrichtingen en hoe deze worden gekoppeld aan de verticale en horizontale assen.
Block- en inline-richtingen is een gratis CSS Academy-les op CoddyKit. Dit is les 2 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.
Blokr richting
De blokrichting is de richting waarin blokniveauvakken worden gestapeld. In horizontale schrijfsystemen (LTR/RTL) loopt de blokrichting van boven naar beneden. In verticale schrijfmodi verandert deze in een richting van links naar rechts of van rechts naar links.
Inline-richting
De inline-richting is de richting waarin tekst binnen een regel loopt. In LTR-talen loopt de inline-richting van links naar rechts. Bij RTL loopt deze van rechts naar links. In verticale schrijfmodi loopt deze van boven naar beneden.
De eigenschap writing-mode
writing-mode stelt de basisoriëntatie van de tekststroom in:
horizontal-tb— horizontale tekst, van boven naar beneden (standaard)vertical-rl— verticale tekst, kolommen van rechts naar linksvertical-lr— verticale tekst, kolommen van links naar rechts
Horizontaal schrijfsysteem
Bij writing-mode: horizontal-tb (standaard):
- Blokrichting = verticaal (van boven → naar beneden)
- Inline-richting = horizontaal (van links → naar rechts bij LTR, van rechts → naar links bij RTL)
- Block-start = boven, block-end = onder
- Inline-start = links (LTR) of rechts (RTL)
Verticaal schrijfsysteem
Bij writing-mode: vertical-rl:
- Blokrichting = horizontaal (van rechts → naar links)
- Inline-richting = verticaal (van boven → naar beneden)
- Block-start = rechts, block-end = links
- Inline-start = boven, inline-end = onder
De assen visualiseren
Zie het als een coördinatensysteem dat meedraait met de schrijfrichting. Logische eigenschappen beschrijven posities ten opzichte van dit draaibare systeem, niet ten opzichte van het vaste scherm.
text-orientation
In verticale schrijfmodi bepaalt text-orientation hoe afzonderlijke tekens worden georiënteerd:
mixed: draai Latijnse tekens; houd CJK-tekens rechtopupright: houd alle tekens rechtop (voor verticaal CJK)sideways: draai alle tekens zijwaarts
Zijwaartse verticale labels
Een praktisch gebruik: gedraaide labels in een zijbalk of labels van diagramassen in contexten met horizontaal schrijven:
<div class="chart-label">Revenue</div>
Schrijfmodi combineren
Een container kan één schrijfmodus hebben, terwijl afzonderlijke inline-elementen een andere hebben. Dit wordt gebruikt om Latijnse en CJK-tekst in dezelfde alinea te combineren.
Block-size en inline-size
Logische equivalenten voor breedte en hoogte:
inline-size= breedte bij horizontal-tb (de inline-afmeting)block-size= hoogte bij horizontal-tb (de blokafmeting)
<div class="box">inline-size sets the width in LTR</div>
De eigenschap text-combine-upright
Voor verticale tekst met getallen of afkortingen houdt text-combine-upright (tcy) korte reeksen tekens rechtop en samengedrukt binnen één verticale tekstcel.
Korte controle
Welke as is bij writing-mode: horizontal-tb met een LTR-taal de as voor blokken?
Samenvatting
De blokas is de stapelrichting voor blokvakken; de inline-as is de richting waarin tekst loopt. In horizontale schrijfsystemen is blok = verticaal en inline = horizontaal. Bij verticaal schrijven draaien deze om. writing-mode bepaalt de basisoriëntatie van de assen. Logische eigenschappen passen zich aan aan de huidige blok- en inline-assen.
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 “Block- en inline-richtingen” gratis?
Ja — de volledige tekst van “Block- en inline-richtingen” 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 “Block- en inline-richtingen”?
Leer de block- en inline-flowrichtingen en hoe deze worden gekoppeld aan de verticale en horizontale assen. 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 2 van 4.
Hoe lang duurt de les “Block- en inline-richtingen”?
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