CSS Academy · Lektion

Block- og inline-retninger

Lær block- og inline-flowretningerne, og hvordan de svarer til lodrette og vandrette akser.

Lektion 2 af 413 trin

Block- og inline-retninger er en gratis CSS Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i CSS Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. CSS Academy-kurset indeholder 4 lektioner i alt.

Blokretning

Blokretningen er den retning, som bokse på blokniveau stables i. I vandrette skriftsystemer (LTR/RTL) går blokretningen fra top til bund. I lodrette skrivetilstande ændres den til fra venstre mod højre eller fra højre mod venstre.

Inline-retning

Inline-retningen er den retning, som teksten løber i inden for en linje. I LTR-sprog går inline-retningen fra venstre mod højre. I RTL går den fra højre mod venstre. I lodrette skrivetilstande går den fra top til bund.

Egenskaben writing-mode

writing-mode angiver tekstens grundlæggende skriveretning:

  • horizontal-tb — vandret tekst, fra top til bund (standard)
  • vertical-rl — lodret tekst, kolonner fra højre mod venstre
  • vertical-lr — lodret tekst, kolonner fra venstre mod højre

Vandret skriftsystem

I writing-mode: horizontal-tb (standard):

  • Blokretning = lodret (top → bund)
  • Inline-retning = vandret (fra venstre → højre i LTR, fra højre → venstre i RTL)
  • Block-start = top, block-end = bund
  • Inline-start = venstre (LTR) eller højre (RTL)

Lodret skriftsystem

I writing-mode: vertical-rl:

  • Blokretning = vandret (højre → venstre)
  • Inline-retning = lodret (top → bund)
  • Block-start = højre, block-end = venstre
  • Inline-start = top, inline-end = bund

Visualisering af akserne

Tænk på det som et koordinatsystem, der roterer sammen med skrivetilstanden. Logiske egenskaber beskriver positioner i forhold til dette roterbare system, ikke den faste skærm.

text-orientation

I lodrette skrivetilstande styrer text-orientation, hvordan de enkelte tegn vender:

  • mixed: Roter latinske tegn, og behold CJK-tegn opretstående
  • upright: Alle tegn står opretstående (til lodret CJK)
  • sideways: Alle tegn er drejet om på siden

Lodrette etiketter på siden

En praktisk anvendelse er roterede etiketter i sidepaneler eller etiketter på diagramakser i sammenhænge med vandret skrift:

<div class="chart-label">Revenue</div>

Blanding af skrivetilstande

En beholder kan have én skrivetilstand, mens de enkelte inline-elementer har en anden. Det bruges til at blande latinsk tekst og CJK-tekst i samme afsnit.

block-size og inline-size

Logiske ækvivalenter til bredde og højde:

  • inline-size = bredde i horizontal-tb (inline-dimensionen)
  • block-size = højde i horizontal-tb (blokdimensionen)
<div class="box">inline-size sets the width in LTR</div>

Egenskaben text-combine-upright

For lodret tekst, der indeholder tal eller forkortelser, holder text-combine-upright (tcy) korte tegnsekvenser opretstående og komprimeret i en enkelt lodret tekstcelle.

Hurtigt tjek

I writing-mode: horizontal-tb med et LTR-sprog, hvilken akse er så "blokaksen"?

Opsummering

Blokaksen er stablingsretningen for blokbokse, mens inline-aksen er tekstens løberetning. I vandrette skriftsystemer er blokaksen lodret, og inline-aksen er vandret. I lodret skrift bytter de retning. writing-mode styrer den grundlæggende akseretning. Logiske egenskaber tilpasser sig de akser, der aktuelt er blok- og inline-akser.

Gratis at komme i gang

Lær CSS med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser
40
Lektioner
159

Ofte stillede spørgsmål

Er lektionen “Block- og inline-retninger” gratis?

Ja — hele teksten til “Block- og inline-retninger” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af CSS Academy-kurset, skal du opgradere til CoddyKit PRO. CSS Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Block- og inline-retninger”?

Lær block- og inline-flowretningerne, og hvordan de svarer til lodrette og vandrette akser. Du øver dig i CSS Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på CSS Academy?

Der kræves ingen tidligere erfaring. CSS Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.

Hvor lang tid tager lektionen “Block- og inline-retninger”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne CSS Academy-lektion?

Ja. Alle CSS Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

  1. Hvorfor logiske egenskaber: internationalisering
  2. Block- og inline-retninger
  3. Logisk margin, padding og border
  4. Logiske egenskaber i RTL-layouts
← Tilbage til CSS Academy