Sites


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;
  }

gestion de l'espace entre colonne en CSS

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;
}

column-span répartissant le texte

 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;
} 

image avec column-fill à auto puis balance


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.