• 6 heures
  • Moyenne

Mis à jour le 14/06/2019

Les multi-colonnes

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Saviez-vous que, pour un meilleur confort de lecture, les spécialistes recommandent de limiter la largeur des lignes de texte ? Il n'y a pas de règle absolue, mais on dit que l'idéal se situe entre 50 et 70 caractères par ligne. Cela évite aux yeux d'avoir à faire de trop larges allers-retours d'une ligne à l'autre.

C'est pour cela que, depuis longtemps, les journaux utilisent une mise en page sur plusieurs colonnes :

Les journaux proposent une lecture sur plusieurs colonnes
Les journaux proposent depuis longtemps une lecture sur plusieurs colonnes

Jusqu'à présent, le Web ne permettait pas ce type de mise en page. Nous étions condamnés au mieux à bidouiller, au pire à écrire des pages qui faisaient parfois plusieurs kilomètres de large.

Ce temps est révolu ! Grâce à CSS3, on peut maintenant automatiquement créer une mise en page du texte sur plusieurs colonnes de façon très efficace.

Un texte étalé sur plusieurs colonnes en CSS3
Un texte étalé sur plusieurs colonnes en CSS3

Le texte s'organise sur plusieurs colonnes : à la fin d'une colonne, on remonte en haut pour aller à la seconde colonne et ainsi de suite. Vous allez voir que c'est assez simple à mettre en place mais qu'il y a quelques petites subtilités...

Créer des colonnes

Pour créer des colonnes, on peut utiliser ces 3 propriétés CSS :

  • column-count  : indique sur combien de colonnes doit s'étaler le texte. Dans l'exemple précédent, il s'agissait de 4 colonnes.

  • column-width  : indique la largeur souhaitée de chaque colonne (en pixels, em... mais pas en pourcentage). Il est possible que le navigateur rende chaque colonne un peu plus large ou plus étroite en fonction de ses contraintes.

  • columns  :  c'est une super-propriété qui combine  column-count  et  column-width  (de la même manière que  border  combine  border-width ,  border-style ,  border-color ).

... mais (parce que ça serait trop simple sinon) les navigateurs supportent assez différemment ces propriétés. En fait, seul Internet Explorer gère correctement ces propriétés (oui, vous avez bien lu !). Pour les autres, il va falloir utiliser des préfixes :

  • Firefox : il faut commencer par  -moz . Exemple :-moz-column-count ,  -moz-column-width ...

  • Opera, Safari, Google Chrome : il faut commencer par  -webkit . Exemple :  -webkit-column-count ,  -webkit-column-width ...

Pour que votre code fonctionne sur tous les navigateurs, il va hélas falloir tripler les instructions CSS à chaque fois !

Allez, commençons simplement avec une  <section>  en HTML contenant plusieurs paragraphes :

<section>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bonum incolumis acies: misera caecitas. Idem iste, inquam, de voluptate quid sentit? Aufert enim sensus actionemque tollit omnem. Erat enim Polemonis. Potius inflammat, ut coercendi magis quam dedocendi esse videantur. Hoc enim constituto in philosophia constituta sunt omnia. Duo Reges: constructio interrete. Dicet pro me ipsa virtus nec dubitabit isti vestro beato M. Sed ut iis bonis erigimur, quae expectamus, sic laetamur iis, quae recordamur. Et quidem illud ipsum non nimium probo et tantum patior, philosophum loqui de cupiditatibus finiendis. At multis malis affectus. </p>
        
    <p>Non igitur bene. Gloriosa ostentatio in constituendo summo bono. Maximus dolor, inquit, brevis est. Quid nunc honeste dicit? Haec quo modo conveniant, non sane intellego. Haec dicuntur inconstantissime. At enim hic etiam dolore. Nunc haec primum fortasse audientis servire debemus. Nummus in Croesi divitiis obscuratur, pars est tamen divitiarum. Quae iam oratio non a philosopho aliquo, sed a censore opprimenda est. </p>

    <p>Quae autem natura suae primae institutionis oblita est? Vitiosum est enim in dividendo partem in genere numerare. Quae in controversiam veniunt, de iis, si placet, disseramus. Nobis aliter videtur, recte secusne, postea; Quid, de quo nulla dissensio est? </p>
</section>

On applique maintenant  column-count  à toute la section pour que les paragraphes à l'intérieur soient répartis sur plusieurs colonnes :

section
{
    -webkit-column-count:4; /* Opera, Safari, Google Chrome */
    -moz-column-count: 4; /* Firefox */
    column-count: 4; /* Internet Explorer */
}

Résultat :

Vous avez demandé 4 colonnes ? Pas di problème !
Vous avez demandé 4 colonnes ? Pas de problème !

Le fonctionnement de base est donc très simple (il faut juste penser aux variantes avec  préfixes, grmpf...).

Que se passe-t-il si on combine column-count et column-width ? Quelle propriété l'emporte sur l'autre ?

Ah ah, bonne question ! En effet, si vous demandez des colonnes de 100px de large mais qu'il y a 600px de place, et qu'en parallèle vous demandez 4 colonnes, que se passe-t-il ?

Eh bien il n'y a pas vraiment de propriété qui l'emporte sur l'autre. Si vous demandez 100px de large, le navigateur va essayer de faire des colonnes d'environ 100px. En revanche, le navigateur ne dépassera pas le nombre de colonnes indiquées... donc il y aura dans tous les cas au maximum 4 colonnes dans l'exemple suivant qui utilise la super-propriété  columns  :

section
{
    -webkit-columns: 4 100px;
    -moz-columns: 4 100px;
    columns: 4 100px;
}

Séparations entre colonnes

Nous avons la possibilité de modifier la séparation entre les colonnes de deux façons différentes :

  • column-gap  : indique l'espace entre deux colonnes (en pixels, em... mais pas en pourcentages).

  • column-rule  : indique un liseré de séparation entre les colonnes. Il s'agit d'une super propriété qui ressemble beaucoup à border, et qui rassemble en fait les propriétés  column-rule-color ,  column-rule-width  et  column-rule-style .

L'espace de séparation (column-gap)

En plus du nombre de colonnes, si vous indiquez un "gap" (espace de séparation), vous pourrez espacer vos colonnes. Et là encore, il va falloir tripler vos propriétés pour que ça fonctionne sur tous les navigateurs !

section
{
    -webkit-column-gap: 100px;
    -moz-column-gap: 100px;
    column-gap: 100px;
 
    /*
    N'oubliez pas aussi les propriétés d'activation des colonnes
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
    */
}
Colonnes séparées par un espace de 100px
Des colonnes séparées par un espace de 100px

Le liseré de séparation (column-rule)

Pensez tout simplement à la propriété  border  qui vous permet de créer des bordures. Ici,  column-rule  va servir de liseré de séparation entre les colonnes :

section
{
    -webkit-column-rule: 2px dashed #555;
    -moz-column-rule: 2px dashed #555;
    column-rule: 2px dashed #555;
  
    /*
    N'oubliez pas aussi les propriétés d'activation des colonnes
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
    */
}
Un liseret de séparation entre les colonnes
Un liseré de séparation entre les colonnes

Un texte sur plusieurs colonnes

Si vous le souhaitez, vous pouvez faire en sorte qu'un élément s'étale sur plusieurs colonnes (par exemple un titre important).

Le titre s'étale sur plusieurs colonnes
Le titre s'étale sur plusieurs colonnes

Pour faire ça, je place d'abord un titre à l'intérieur de ma section sur plusieurs colonnes :

<section>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bonum incolumis acies: misera caecitas. Idem iste, inquam, de voluptate quid sentit? Aufert enim sensus actionemque tollit omnem. Erat enim Polemonis. Potius inflammat, ut coercendi magis quam dedocendi esse videantur. Hoc enim constituto in philosophia constituta sunt omnia. Duo Reges: constructio interrete. Dicet pro me ipsa virtus nec dubitabit isti vestro beato M. Sed ut iis bonis erigimur, quae expectamus, sic laetamur iis, quae recordamur. Et quidem illud ipsum non nimium probo et tantum patior, philosophum loqui de cupiditatibus finiendis. At multis malis affectus. </p>

    <!-- Mon titre au milieu -->
    <h1>Ce titre prend de la place !</h1>
         
    <p>Non igitur bene. Gloriosa ostentatio in constituendo summo bono. Maximus dolor, inquit, brevis est. Quid nunc honeste dicit? Haec quo modo conveniant, non sane intellego. Haec dicuntur inconstantissime. At enim hic etiam dolore. Nunc haec primum fortasse audientis servire debemus. Nummus in Croesi divitiis obscuratur, pars est tamen divitiarum. Quae iam oratio non a philosopho aliquo, sed a censore opprimenda est. </p>

    <p>Quae autem natura suae primae institutionis oblita est? Vitiosum est enim in dividendo partem in genere numerare. Quae in controversiam veniunt, de iis, si placet, disseramus. Nobis aliter videtur, recte secusne, postea; Quid, de quo nulla dissensio est? </p>
</section>

J'applique les règles habituelles à la section pour faire plusieurs colonnes, et j'applique en plus une nouvelle règle au titre :  column-span .

section
{   
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
}

section h1
{
    /* Le titre s'étalera sur toutes les colonnes */
    -webkit-column-span: all;
    -moz-column-span: all;
    column-span: all;
}

Les sauts de colonne

Parfois, vous voulez absolument éviter qu'un contenu soit "coupé en deux" parce qu'on arrive en bas de la colonne. Ou vous aimeriez qu'un texte commence obligatoirement en haut d'une colonne. Eh bien c'est possible grâce à ces propriétés :

  • break-before : indique si on a le droit ou non de faire un saut de colonne avant le texte

  • break-inside : indique si on a le droit ou non de faire un saut de colonne à l'intérieur du texte

  • break-after : indiquer si on a le droit ou non de faire un saut de colonne après le texte

Pour chacune de ces propriétés, plusieurs valeurs sont possibles. Les 3 que je vous recommande de retenir sont :

  • auto : le saut de colonne est autorisé mais n'est pas obligatoire (valeur par défaut).

  • column : force un saut de colonne.

  • avoid-column : interdit un saut de colonne.

Je traduis avec quelques exemples :

  • Si vous écrivez  break-inside: avoid-column , cela signifie qu'il est interdit de faire un saut de colonne à l'intérieur du texte.

  • Si vous écrivez  break-before: column , cela force un saut de colonne juste avant le texte, pour que celui-ci se trouve en haut.

Compris ? :)

Si on combine ces propriétés un peu différentes pour chacun des navigateurs, voici comment on peut faire pour forcer un retour en haut de la colonne suivante sur chaque titre :

section
{
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
}

section h1
{
    break-before: column;
    -webkit-column-break-before: always;
}

Résultat, le titre "saute" automatiquement en haut de la colonne suivante :

Le titre saute en haut de la colonne suivante
Le titre saute en haut de la colonne suivante

Les césures (hyphenations)

Si on veut adopter un style proche des journaux, on peut combiner les colonnes avec un alignement justifié. Cela permet d'avoir des colonnes propres, de même largeur. Cependant, le texte justifié sur les navigateurs n'est pas vraiment idéal sans système de césure.

Et euh, question bête, mais c'est quoi une césure déjà ?  :euh: 

Vous savez, quand on coupe un mot en deux avec un tiret au milieu entre deux syllabes pour aller à la ligne ?

Grâce aux césures, le texte justifié est en général plus harmonieux. Cela évite d'avoir des lignes trop "étirées".

Pour que la césure fonctionne, il faut :

  1. Bien indiquer la langue utilisée dans le document avec l'attribut  lang  :  <html lang="fr">  pour le français. En effet, les règles de césure diffèrent d'une langue à l'autre.

  2. Utiliser la propriété  hyphens  (avec ses variantes préfixées pour chaque navigateur) pour activer la césure.

Voici comment je peux activer la césure, en combinant avec les multi-colonnes et le texte justifié :

section
{
    text-align: justify;

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
   
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
}

Voici le résultat !

Texte sur plusieurs colonnes, justifié, avec des césures !
Texte sur plusieurs colonnes, justifié, avec des césures !
Exemple de certificat de réussite
Exemple de certificat de réussite