Bert Bos &
Eva Kasal | CSS3 in Style
en fr
Colonnes de texte (Multi-column)
●
●
●
●
●
●
Deux façon d'utiliser la propriété columns :
- Mettre le nombre de colonnes :
columns: 3
- Mettre la largeur des colonnes :
columns: 20em
La largeur réelle peut être plus important, si la largeur de
l'élément n'est pas un multiple exact des colonnes
Colonnes de texte – interstice & trait
●
●
●
●
●
●
Dans le demo :
P.a {
column-gap: 3em;
column-rule: 1em solid red }
P.b {
column-gap: 1em;
column-rule: 2em solid lightgreen }
Le trait de colonne est centré dans l'interstice et ne l'élargit
pas !
Colonnes de texte – non-equilibré
●
●
●
●
●
●
Si l'élément a une hauteur fixe, les colonnes peuvent
être remplies de deux façons :
column-fill: balance
équilibrer les colonnes
column-fill: auto
remplir les colonnes
consécutivement
Colonnes de texte – enjambement
●
●
●
●
●
●
Dans le 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}
L'enjambement d'un nombre spécifique de colonnes est prévus pour
niveau 4
Colonnes de texte – fin de colonne, veuves & orphelins
●
●
●
●
●
●
H2 {page-break-after: avoid}
(break-after: avoid est équivalent à
page-break-after: avoid, mais pas encore très répandu)
div {
widows: 1;
orphans: 1 }
Remarquez que la valeur par défaut est 2
Colonnes de texte – statut
●
●
●
●
●
●
- Opera ≥ 11 – des petits bugs
- AHFormatter 5 – (non testé)
- Prince 8 – pas de
column-span
- IE 10 Preview – (non testé)
- Webkit, Gecko – expérimental, pas de
break-*
- PDFreactor 5 – expérimental
Pour des navigateurs differents ou plus vieux, essayez columnizer (nécessite JavaScript)