La mise en colonne est une recommandation nouvelle en CSS3. A l'heure actuelle son implémentation est encore en discussion et il sera encore nécessaire d'utiliser les préfixes de navigateur pour les propriétés ayant trait à ces options.
Il y a deux façons de spécifier les colonnes, soit par le nombre de colonne souhaitée (en laissant l'interpréteur définir automatiquement la largeur), ou soit en spécifiant la largeur d'une colonne (et en laissant l'interpréteur trouver le nombre de colonne correspondant dans l'espace alloué). Elles passeront par :
Et version raccourcie : columns
Une fois les colonnes appliquées, il sera en général important de définir une séparation car des colonnes serrées ne rendent pas un résultat très lisible. On peut alors mentionner explicitement la largeur de l'espace souhaité entre les colonnes avec column-gap
.
On peut aussi éventuellement mettre une ligne (dit filet) dans cette gouttière. La propriété column-rule
va permettre de lister la liste des propriétés (épaisseur style couleur) qui pourraient aussi être définies individuellement avec column-rule-width
, column-rule-style
, column-rule-color
.
p {
-webkit-column-count:2;
-webkit-column-gap:2em;
-webkit-column-rule : 2px dotted black;
text-align:justify;
}
Utiliser les colonnes c'est laisser l'interpréteur CSS gérer à votre place la façon dont le texte sera réparti entre les colonnes. Dans certains cas, il pourra s'avérer important de contrôler au mieux ce flux. CSS a prévu d'agir de deux façons différentes à ce niveau :
En permettant à un texte de sortir de la prison des colonnes et ainsi pouvoir s'afficher au travers de toutes les colonnes. La propriété column-span
peut alors prendre la valeur all
en lieu et place de son paramètre par défaut qui est none.
Par exemple
<article>
<h1>"De Finibus Bonorum et Malorum" de Ciceron (45 av. J.-C.)</h1>
<p>"Sed ut perspiciatis unde omnis (...) dolorem eum fugiat quo voluptas nulla pariatur?"</p>
<h1>Rackham a fournie une version en 1914</h1>
<p>"But I must explain to you (...) no resultant pleasure?"</p>
</article>
En plaçant les colonnes sur Article, les titres h1 seront aussi affectés par les colonnes au même titre que les paragraphes. En créant une règle pour ces titres et en leur passant une valeur all
pour column-span
, les titres s'afficheront répartis sur les deux colonnes.
article {
-webkit-column-count:2;
text-align:justify;
}
h1 {
-webkit-column-span:all;
background-color : yellow;
}
Enfin, lorsque les paragraphes ont une hauteur défini, le paramètre par défaut des navigateurs rempli d'abord la première colonne avant de renvoyer le texte dans la seconde. Ce paramètre automatique de column-flll
peut être modifié avec la valeur balanced
de manière à ce que le navigateur tente de répartir le texte équitablement entre chaque colonne.
p {
-moz-column-count:2; /* nous utilisons ici le préfix Mozilla */
-moz-column-fill:auto;
text-align:justify;
height:400px;
}
Il y a une erreur de communication avec le serveur Booktype. Nous ne savons pas actuellement où est le problème.
Vous devriez rafraîchir la page.