Trucsweb.com

Trucsweb 1997-2017 - 20 ans de partage.

CSS

Structure CSS adaptative

RDFFav

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

La meilleure façon de lire un texte est de le présenter en colonnes plus ou moins étroites, comme un journal.css3, columns, column-gap, column-rule, column-fill, column-span, page-break-after, avoid, break-after, widows, orphans, column-count, column-width, multi-colonnes, colonnes, Multi-column Layout Module

L’Exemple du New York Time

Les exemples de colonnes sur le Web ne sont pas légion encore aujourd’hui. Contrairement à la version papier, le fameux New York Time n’utilise pas de colonne dans sa version numérique !! Il se contente d’une colonne à seulement 560 pixels de largeur, ce qui procure une lecture fluide et agréable même sans colonne. Bien entendu à l’image du langage AMP de Google, son fidèle partenaire... Il y a certainement une raison pour que le New York Time persiste à utiliser la police « Time » (en fait nyt-franklin), mais pas les colonnes !

La Gazette de Québec, un des premier journal d’Amérique
La Gazette de Québec, 1790
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.

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

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

Test de colonnes avec 18em de large

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


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
Pour simuler encore davantage notre présentation comme un journal, on peut modifier l’espace entre les colonne avec column-gap et surtout ajouter une ligne avec column-rule.
Exemple avec ligne
<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>

Test de colonnes avec 18em de large

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


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.

Exemple avec empiètement
<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>
Test de colonnes avec un « column-span » plus ou moins concluant

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


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é.
Exemple avec sauts de colonne

L’exemple suivant évite à un titre de se retrouver sur deux colonnes. C’est le minimum. J’aimerais, par exemple m’assurer que le paragraphe arrive juste après, ou encore forcer un saut de colonne avant le titre, mais on se retrouve avec des colonnes vides sous Edge ! Tout en étant complètement incompatible avec Firefox.

<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>
Test de colonnes avec un « column-span » plus ou moins concluant

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


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
, Analyste programmeurConception oznogco multimédia (http://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

Ajouter un commentaire
Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
Votre évaluation du tutoriel

9/10 sur 1 revues.
       Visites : 140 - Pages vues : 223
X

Trucsweb.com Connexion

Connexion

X

Trucsweb.com Mot de passe perdu

Connexion

X

Trucsweb.com Conditions générales

Conditions

Responsabilité

La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

Droit applicable et juridiction compétente

Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

X

Trucsweb.com Trucsweb

X

Trucsweb.com Glossaire

X

Trucsweb.com Trucsweb

X

Trucsweb.com Trucsweb

Conditions

Aucun message!

Merci.

X
Aucun message!
X

Trucsweb.com Créer un compte

Créer un compte

.
@