CSS3
Mettre en colonne
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.
Définir les colonnes
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 :
- Column-count
- basée sur le nombre de colonne, la taille est alors automatique en fonction de l'espace disponible
- Column-width
- basée sur la largeur de la colonne, cette fois, c'est le nombre de colonne qui sera déterminé automatiquement.
Et version raccourcie : columns
Spécifier la séparation des colonnes
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;
}
Modifier le flux de texte entre colonnes
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 :
- pour l'annulation de l'effet de colonne
- pour la répartition du texte entre colonnes
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;
} 