ng'stuff

🔭 🎶 🕺

Idéalement dimensionner un site de contenu

Les possibilités embarquées dans les CSS ne cesseront de nous surprendre. Et s’il existait une unité parfaitement adaptée au dimensionnement de contenu textuel ?

L'unité adaptée

On a l’habitude de réutiliser toujours les mêmes unités arbitraires (rem, px…​). Mais le contenu est fait pour être lu, pas juste pour rentrer dans une boîte !

ch : l’unité qui représente concrètement la largeur d’un caractère.

Plus précisément : 1ch équivaudra à la largeur du caractère 0 rendu avec toutes les propriétés de style de l’élément ciblé.

css
main {
  /*
   * Prends une largeur de maximum ~75 caractères,
   * ou toute la largeur d'écran pour les viewports plus petits.
   */
  width: min(100vw, 75ch);
}

On voudra généralement une largeur entre 70ch et 85ch pour être agréable à lire. Au juger !

Pas convaincu·e ? Par nature, ch définit très précisément la largeur d’un bloc de code en nombre de caractères vu que la police est monospace 🤓

Intégration dans un design system

Valeur de base

L’unité ch étant relative, elle n’est pas viable comme dimension dans un design system.

En revanche, l’unité rch fonctionner parfaitement à condition de savoir ce qu’on fait. En effet, c’est la version absolue de ch.

rem et rch sont toutes les deux proportionnelles à la taille de la police, respectivement verticale et horizontale. Utilisées en conjonction, avec une police qui s’adapte à la taille de l’écran, elles permettent de tout dimensionner confortablement pour le lecteur.

D’abord un peu de magie !

css
:root, :host {
  font-size: clamp(1rem, 0.95rem + 0.2vw, 24px);
}

Ce trick plutôt non ? 🪄 Plutôt simple, juste inhabituel.

On décortique
  • clamp(min, base, max) vaut au moins min, au plus max sinon base
  • 0.95rem + 0.2vw : arbitraire mais évolue lentement avec la largeur de l’écran
  • 24px max la police de base.

Dimensions adaptatives

Patience : maintenant qu’on a une police de base qui s’adapte à l’écran, on peut dimensionner le contenu principal d’un site avec d’autant plus de pertinence.

En fait, on peut directement reprendre ce qu’on avait au début en se basant sur l’unité absolue (rch)

css
main {
  width: min(100vw, 75rch);
}

Vu qu’on parle de design system, on pourrait d’ailleurs définir 75rch comme breakpoint de taille d’écran et définirait le passage en vue mobile.

css
aside {
  display: none;
  float: left;
  margin-right: 2rch;
  width: 25rch;
}

main {
  width: min(100vw, 75rch);
}

@media (width >= 102rch) {
  aside {
    display: block;
  }
}

Ici on a dont un breakpoint à 102rch (75 + 25 + 2). Donc pas de dynamisme au runtime dans les @media mais nous verrons comment tout de même nommer nos breakpoints avec une pré-transformation LightningCSS !

Conclusion

On aura montré comment exploiter ch/rch pour nos dimensions horizontales. Mais est-ce vraiment nécessaire de s’emcombrer avec une unité supplémentaire ?

Cela dépendra des choix techniques et du type de site à développer :

  • Un blog, un site de presse, une documentation auront leur corps de contenu taillé de manière plus prévisible
  • Toute site utilisant une police système bénéficiera aussi de rch en s’y adaptant
  • Avec une équipe design, il peut être plus pragmatique d’importer une police custom (donc prévisible) et de se contenter d’une unité classique. Par contre, il faut savoir que si cette police change un jour, toutes les largeurs seront potentiellement à revoir.
  • On peut aussi très bien totalement laisser tomber rem pour rch
Retour aux articles 👀