Du pixel aux unités relatives ou de l'art de dompter les grilles fluides

Victor Brito — Tue, 03 Mar 2009 19:57:00 +0100

Puisque le pixel n'est pas une unité recommandée pour créer des feuilles de styles soucieuses de permettre l'agrandissement du texte, on doit se contenter des unités relatives restantes, comme l'em ou le pourcentage. Mais, il reste le problème de reproduire fidèlement une maquette réalisée sous Photoshop (ou tout autre logiciel de graphisme), où tout est figé en pixels.

Heureusement, il existe des astuces permettant d'obtenir un design fluide et j'ai déjà eu l'occasion d'en rapporter dans un précédent billet. A List Apart vient de publier un article qui présente une astuce qui va plus loin que le traitement de la taille du texte.

Partons du bout de code HTML suivant :

<div id="page">
  <h1>Some header</h1>
  <p>Some text</p>
</div>

D'abord, fixons la taille de police globale à 100 % de la taille par défaut de la police utilisée.

body {
  font-size: 100%;
}

Nous avons une maquette qui nous présente le texte de l'élément h1 comme ayant une taille de 24 pixels.

Pour traduire la taille en pixels vers la taille équivalente en ems, nous emploierons l'équation suivante : taille ciblée ÷ taille du contexte = taille résultante. La taille ciblée est celle dont on souhaite obtenir l'équivalent en ems, la taille du contexte est la taille de texte utilisée par l'élément parent de celui contenant le texte ciblé (ou, à défaut de taille déclarée, par l'élément ancêtre le plus proche) et la taille résultante est le résultat obtenu par la division de la première par la deuxième.

Lorsque la taille du contexte est égale à 100 %, elle correspond à la taille par défaut de la police, telle que fixée par le navigateur, soit la plupart du temps 16 pixels. À partir de cette donnée précieuse, nous pouvons calculer la taille en ems de l'élément h1 comme suit : 24 ÷ 16 = 1,5 ; l'élément h1 aura donc une taille de texte de 1,5 ems.

h1 {
  font-size: 1.5em;
}

Notre maquette indique que le texte du paragraphe p a une taille de 14 pixels. Pour en obtenir l'équivalent en pixels : 14 ÷ 16 = 0,875, soit 0,875 em.

p {
  font-size: 0.875em;
}

Ce qui est possible pour la taille de texte l'est également pour la dimension des blocs. En effet, une maquette rigide ne contenant que des blocs définis en pixels peut produire un design fluide.

Reprenons notre maquette, qui nous dit que l'ensemble du contenu (représenté par l'élément div dont l'identifiant est "page") tient dans une largeur de 988 pixels et que l'élément h1 occupe une largeur de 700 pixels, avec une marge de 144 pixels à sa gauche.

Pour calculer l'équivalent en ems de la largeur du div, nous nous basons sur la taille par défaut de la police, soit les fameux 16 pixels, ce qui donne 988 ÷ 16 = 61,75, soit 61,75 ems.

#page {
  width: 61.75em;
}

Pour calculer la largeur du bloc h1, nous devons partir de celle du plus proche ancêtre déclaré, à savoir l'élément div en question. Ainsi, le calcul est le suivant : 700 ÷ 988 = 0,7085 (résultat arrondi). Le résultat peut être exploité sous forme de pourcentage, puisque l'élément h1 occupe non seulement 700 pixels de la page hors tout, mais surtout 700 des 988 pixels du div, soit 70,85 %. Pour la marge de 144 pixels, même motif, même punition : 144 ÷ 988 = 0,14575 (résultat arrondi). Ce qui, dans la feuille de style, s'écrit :

h1 {
  width: 70.85%;
  margin-left: 14.575%;
}

Ainsi, la page Web intégrée sera fluide non seulement pour la taille de texte (et la nécessité, parfois, de l'agrandir), mais aussi pour les taille et résolution d'écran disponibles. Bref, ce n'est pas sorcier de faire entrer un carré dans un cercle.

Blog - Britoweb - Tag - design fluide

Du pixel aux unités relatives ou de l'art de dompter les grilles fluides