CSS

Structure CSS adaptative

CSS3 - Texte en multicolonnes à la manière d’un journal

Sur deux colonnes au grand max...

On dit que la meilleure façon de lire un texte est de le présenter sous forme de colonnes plus ou moins étroites, comme un journal (plus ou moins large)! On dira bien ce qu’on voudra, ce n’est pas nécessairement le cas avec une page Web ! Au contraire, l’espace vient à manquer en largeur... Et ce n’est pas tant les navigateurs que les résolutions.

Pour ceux qui ont déjà fait de la mise en page papier avec des conditions parfaites de pleine largeur fixe, vous savez qu’il est difficile d’aligner un texte en colonne. Il faut parfois ajouter un peu d’espace pas-ci par-là, changer la grandeur du texte, des titres, changer de photos. Et parfois même carrément changer un bout de texte pour bien aligner le tout. Bon, l’espace est aussi fixe en hauteur, mais ce n’est pas toujours évident. Imaginer maintenant dans une page Web !!

Déjà une page Web c’est souvent un encadrement à la moindre occasion qui réduit d’autant l’espace du contenu. Ensuite les écrans, du plus petit en passant par toutes les résolutions, nous arrête au « Mobile First forever » ! Personnellement, les rares fois que j’ai utilisé les colonnes c’était pour une impression, aérer une présentation ou au contraire, compacter des cartes (card) sur deux colonnes comme sur la page d’accueil des Trucsweb. Essentiellement la grille (grid) !

Même si le multicolonne est maintenant largement compatible, il reste encore quelques problèmes. L’empiètement column-span ou le changement de page avec widows et orphans sont plutôt hasardeux, particulièrement lors de l’impression, voir carrément incompatible avec Firefox... Il y a de meilleures façons de mettre en valeur un texte. Alors qu’il suffit d’une seule colonne que l’on défile jusqu’en bas du texte.

Enfin, c’est tout de même un outil supplémentaire dans la boite à outils. Raphael Goetter à fait un exemple de menu adaptatif utilisant les colonnes « multicolumns navigation » sur Alsacréations. Je ne suis pas sûr de son utilité dans ce cas précis, mais il n’en demeure pas moins que son usage peut être étendu à plusieurs sauces.

Les colonnes

C’est en fait d’une extrême simplicité, une propriétés columns et le tour est joué ! columns est une super propriété qui en combine deux autres : column-width pour définir la largeur d’une colonne, par défaut à « auto » et surtout à la merci du nombre de colonne column-count.

div.colonnes {
  columns: 4 150px;
}

/* Équivaut donc à */
div.colonnes {
  column-width: 150px;
  column-count: 4;
}

Les préfix !!!

Pour augmenter la compatibilité avec les navigateurs, il faut ajouter les préfix. La plupart des navigateurs sont aujourd’hui compatibles avec columns sans préfixe. Je n’utilise jamais les préfixes quand il s’agit d’effet non indispensable. D’autant qu’aujourd’hui la plupart des navigateurs sont mis à jour automatiquement.

<style>
/* Préfix */
div.colonnes {
    columns: 1;
    -webkit-column: 1; /* Opera, Safari, Google Chrome */
    -moz-column: 1;    /* Firefox */
}

Les colonnes avec @mediaquery

Mais encore une fois, cette pratique peut s’avérer problématique selon la largeur de l’écran. Les colonnes peuvent rapidement empiéter les unes sur les autres. Pour éviter cette situation, il y a les « mediaquery » pour spécifier le nombre de colonnes selon la largeur disponible.

<style>
/* Méthode @mediaquery */
div.colonnes {
    columns: 1;
}

@media (min-width: 768px) {
  div.colonnes {columns: 2;}
}

@media (min-width: 992px) {
  div.colonnes {columns: 3;}
}

@media (min-width: 1200px) {
  div.colonnes {columns: 4;}
}
</style>

<div class="colonnes">
  <h6>...</h6>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
</div>

Les colonnes carrément adaptatives

Beaucoup plus simple, utilisez l’unité « em », c’est-à-dire relativement à la grandeur de la police. Alors là, plus besoin de spécifier le nombre de colonnes, elles s’ajusteront automatiquement selon l’espace disponible. Une seule colonne sur un mobile et 5 colonnes avec un grand écran.

<style>
/* Meilleurs méthode */
div.colonnes {
    columns: 18em;
}
</style>

<div class="colonnes">
  <h6>...</h6>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
</div>

Dans l’exemple ci-dessus, j’utilise la justification text-align: justify;, plutôt approprié dans le contexte. Et les césures (hyphenations) hyphens: auto; comme suggéré par Mathieu Nebra d’OpenClassrooms dans son tutoriel « Les multi-colonnes », question de couper certains mots en deux avec un tiret pour éviter les lignes trop étirées.

Espacement et lignes

<style>
/* Exemple complet */
div.colonnes {
    columns: 18em;
    column-gap: 3em;
    column-rule: 1px solid gray;
    text-align: justify;
    hyphens: auto;
}
</style>

<div class="colonnes">
  <h6>...</h6>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
</div>

Le remplissage (column-fill)

Cette propriété est inutile si vous ne spécifiez pas une hauteur minimale au bloc à remplir. Si vous fixez par exemple une auteur de 400px, le remplissage sera automatiquement équilibré entre les colonnes avec la valeur par défaut « auto ». Mais vous pouvez spécifier la valeur « balance » pour occuper entièrement la hauteur avant de passer à la colonne suivante.

<style>
div.colonnes {
  ...
  /* Par défaut */
  column-fill: auto;
  /* ou */
  column-fill: balance;
</style>

Le « column-span »

La propriété column-span (incompatible Firefox) spécifie le nombre de colonnes qu’un élément doit recouvrir, exactement comme le colspan du bon vieux tableau HTML.

<style>
/* Exemple avec span */
div.colonnes {
    h5 {column-span: all;-webkit-column-span: all};
    columns: 18em;
    column-gap: 3em;
    column-rule: 1px solid gray;
    text-align: justify;
    hyphens: auto;
}
</style>

<div class="colonnes">
  <h6>...</h6>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
</div>

Les sauts de colonne

Pas facile de s’assurer qu’un paragraphe ne perd pas quelques mots sur l’autre colonne ou qu’un sous-titre s’affiche sur deux colonnes. L’impression peut même scinder une image en deux ! Et pourtant quoi de plus naturel !

Voilà toujours les propriétés :

• break-before : indique si on peut faire un saut de colonne avant le bloc;
• break-inside : indique si on peut faire un saut de colonne à l’intérieur d’un bloc;
• break-after : indique si on peut faire un saut de colonne après le bloc.

Les valeurs

• auto : par défaut, le saut de colonne est autorisé;
• column : force un saut de colonne;
• avoid-column : le saut de colonne n’est pas autorisé.

Averc le préfix -webkit-column-

• -webkit-column-break-before : indique si on peut faire un saut de colonne avant le bloc;
• -webkit-column-break-inside : indique si on peut faire un saut de colonne à l’intérieur d’un bloc;
• -webkit-column-break-after : indique si on peut faire un saut de colonne après le bloc.

Les valeurs

• always : force un saut de colonne;
• avoid : le saut de colonne n’est pas autorisé.

<style>
/* Exemple complet */
div.colonnes {
    h5 {
      break-inside: avoid-column;
      -webkit-column-break-inside: avoid;
    };
    columns: 18em;
    column-gap: 3em;
    column-rule: 1px solid gray;
    text-align: justify;
    hyphens: auto;
}
</style>

<div class="colonnes">
  <h5>...</h5>
  <p>...</p>
  <p>...</p>
  <h5>...</h5>
  <p>...</p>
  <p>...</p>
</div>

Veuve et orphelin

En typographie, une ligne veuve ou orpheline est une ligne laisser seule en haut ou en bas d’une page ou d’une colonne.

widows = nombre minimum de lignes laissées en haut d’une page ou d’une colonne (veuves).
orphans = nombre minimum de lignes en bas d’une page ou d’une colonne avant de passer sur la nouvelle page (orphelin).

.cColonne {
  orphans: 3;
  widows: 3;
}

Références

• Colonnes CSS par Mozilla (MDN web docs)
• Les multicolonnes en CSS3 par Raphael Goetter d’Alsacréations
• Compatibilité sur Caniuse
• Les multi-colonnes par Mathieu Nebra d’OpenClassrooms
• Exemple : Structure HTML5 en colonnes CSS, fluide et adaptative (responsive) Par Oznog