Bert Bos | Kolommen (Future CSS, Utrecht 2013)

Kolommen

(Multi-column layout)

Cascading Style Sheets

Eigenschap `columns`

Twee manieren om columns te gebruiken:

Geef het aantal kolommen: columns: 3
Geef de gewenste kolombreedte: columns: 20em
De werkelijk breedte kan meer zijn, als het element niet een precies veelvoud van de breedte is

En als het element smaller is dan gewenste breedte, is de (enige) kolom zo breed als het element.

Tussenruimte: `column-gap`

Uit de demo:

P.a {
  column-gap: 3em;
  column-rule: 1em solid red }
P.b {
  column-gap: 1em;
  column-rule: 2em solid lightgreen }

De lijn is gecentreerd in de tussenruimte en maakt de ruimte niet breder!

Ongebalanceerde kolommen

Als een element een vaste hoogte heeft, kunnen kolommen op twee manieren worden gevuld:

column-fill: balance
verdeel de tekst over de kolommen
column-fill: auto
vul de kolommen één voor één

In beide gevallen, als er teveel tekst is, worden er automatisch extra kolommen aan de rechterkant bijgemaakt. Die vallen dus buiten de box van het element. Of ze zichtbaar zijn en of je erheen kunt scrollen is afhankelijk van de waarde van overflow.

Tekst over meerdere kolommen

Uit de demo:

HTML:

<H2>Column-span:none</H2>
<P>Lorem ipsum dolor...
<P>Nulla sagittis, odi...
<H2>Column-span:all</H2>
<P>Lorem ipsum dolor...
<P>Nulla sagittis, odi...

CSS:

body {columns: 18em}
h2 {column-span: all}

Nummers (column-span:3) komen misschien in CSS niveau 4

Nieuwe kolom, hoerenjong & weeskind

H2 {page-break-after: avoid}

(break-after is de nieuwe naam voor page-break-after, maar nog niet overal geïmplementeerd)

div {
  widows: 1;
  orphans: 1 }

De normale waarde voor beide is 2

Status

Opera 11, 12 – kleine bugs
AHFormatter 5 – (niet getest)
Prince 8 – geen column-span
IE 10 – (niet getest)
Webkit, Gecko – experimenteel, geen break-*
PDFreactor 5 – experimenteel

Voor oudere browers kun je columnizer proberen (als de gebruiker JavaScript aan heeft staan)

Einde

→ Terug naar agenda