Dimensionner son texte avec rem

Une nouvelle unité disponible en CSS3

Dans cet article, nous allons apprendre à utiliser une nouvelle unité pour dimensionner son texte : le rem.

Commentez Donner une note à l'article (5)

Article lu   fois.

L'auteur

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Introduction

Le dimensionnement du texte sur une page Web est, encore aujourd'hui, un sujet épineux. La seule variable commune à tous les développeurs est l'utilisation de la propriété CSS font-size.

Maintenant une question se pose : quelle unité utiliser avec cette propriété ?

Doit-on préférer les px ? Les em ? Les pourcentages ? Les valeurs absolues qui correspondent aux anciennes tailles de texte HTML (allant de 1 à 7) telles que small, large ou encore xx-large ? Ou bien carrément utiliser une des unités dites absolues proposées par le W3C : pt (point), pc (pica = 12 points), cm (centimètre), mm (millimètre) ou in (pouce, inch en anglais). Ces dernières étant plutôt destinées à de l'impression ; en effet, elles varient d'un écran à l'autre en fonction de la résolution de celui-ci, il serait donc très compliqué d'adapter l'apparence pour différents appareils.

On s'orientera donc plus vers les unités relatives que sont les px, les em et les pourcentages. Chacune ayant ses avantages et ses inconvénients que je détaillerai brièvement dans le chapitre suivant.

Cependant, une nouvelle unité a fait son apparition avec la version 3 des CSS : rem. Je vais vous expliquer son fonctionnement et vous présenter un cas d'utilisation.

II. Unités de dimensionnement avant CSS3

II-A. Le dimensionnement en px

Cette façon de dimensionner le texte est la toute première apparue sur le Web. C'était une méthode simple et fiable à l'époque où tout un chacun était équipé d'un écran avec une résolution de 800x600. Cependant, à cette époque l'expérience utilisateur était peu prise en compte et l'utilisation des pixels présente plusieurs inconvénients :

  • aujourd'hui les résolutions diffèrent énormément, surtout avec l'apparition des appareils mobiles (smartphone, tablette). On ne peut donc pas fixer la taille de la police en pixels et espérer avoir un design adapté à différents appareils ;
  • le texte ne peut être agrandi par les fonctionnalités natives du navigateur.

Vous l'aurez compris, le dimensionnement en pixels reste très rigide et peu adapté au mouvement actuel qui consiste à faire du responsive design. Pour rappel, le responsive design est un principe dont l'importance croît avec l'évolution des smartphones et tablettes. En effet, ce principe consiste à faire en sorte que son site Web s'affiche correctement, quel que soit le type d'appareil utilisé pour le visionner. Il s'agit donc d'adapter son design aussi bien à un ordinateur de bureau qu'à une tablette ou encore un ordinateur portable. Il existe différentes méthodes pour y parvenir, je vous invite à consulter la page Cours CSS pour en savoir plus.

II-B. Le dimensionnement en pourcentage

La première alternative aux pixels est l'utilisation de pourcentage pour optimiser l'affichage. On décide que la barre de menu occupera 30 % de la page, le contenu 60 %, etc.

Cependant, on se heurte de nouveau à un inconvénient lié aux résolutions actuelles. Ainsi, sur de très grandes résolutions, un site dont l'affichage est géré en pourcentage sera très étiré, là où sur une très petite résolution le site s'affichera complètement écrasé.

II-C. Le dimensionnement en em

La troisième possibilité pour dimensionner du texte est d'utiliser l'unité em. Pour la petite histoire, cette unité est appelée cadratin en français. Elle correspond à la hauteur d'un caractère d'imprimerie en plomb. Celle-ci résout le problème lié à l'agrandissement du texte via les fonctionnalités de chaque navigateur.

Grâce à cette unité, on peut en effet dimensionner notre texte en fonction de la taille de texte de son parent. La définition étant obscure, rien ne vaut une explication par l'exemple. Supposons le code suivant :

 
Sélectionnez
body { font-size : 100% ; }
h1 { font-size : 3em ; }

Dans notre exemple, le texte contenu dans un titre de niveau 1 sera trois fois plus grand que le texte du corps de la page. Vous allez me dire que c'est la solution miracle qui résout tous les problèmes ! Et je vais vous répondre : non.

En effet, il existe un énorme inconvénient au dimensionnement en em : les tailles se répandent en cascade. Imbriquez plusieurs listes (<li>) pour lesquelles vous définissez la même taille en em et vous vous apercevrez que le texte n'a pas du tout la même taille dans chaque liste. Eh oui, car cette méthode se réfère au parent direct et il est impossible de faire un reset du contexte pour préciser qu'on utilise la taille de texte du body en tant que parent. Si on suppose le code suivant :

 
Sélectionnez
body { font-size : 100% ; }
li { font-size : 1.5em ; }

Le texte de notre deuxième liste imbriquée dans la première aura une taille 1,5 fois plus grande que… le texte de la première liste ! Je vous laisse imaginer les problèmes que cela peut engendrer lors d'imbrication sur plusieurs niveaux…

C'est précisément à ce niveau qu'intervient l'unité rem.

III. Le dimensionnement en rem

CSS3 est arrivé avec son lot de nouveautés et bien heureusement pour nous avec une nouvelle unité appelée rem. Je vous vois venir d'ici me dire que rien ne change par rapport au cadratin. Eh bien si ! Comme son nom l'indique, rem signifie root em (em à la racine). Cette unité ne se base plus sur le parent direct pour calculer les tailles de texte mais sur la taille de texte de la racine de la page Web à savoir l'élément <html>. Et c'est précisément cette petite différence qui va résoudre le problème de cascade !

Nous pouvons dorénavant définir une taille de texte par défaut sur notre élément racine <html> et utiliser l'unité rem pour tous les autres éléments enfants afin de calculer une taille de texte proportionnelle. N'importe quelle taille spécifiée en rem sera calculée sur la base de la taille de l'élément racine : fini les problèmes de taille de texte en cascade !

Reprenons notre exemple de liste :

 
Sélectionnez
html { font-size : 100% ; }
li { font-size : 1.5rem ; }

Avec ce code, le texte de notre deuxième liste aura exactement la même taille que celui de la première liste, car quel que soit le niveau d'imbrication, la taille du texte de nos listes sera 1,5 fois plus grande que le texte de notre élément racine à savoir l'élément <html>.

IV. Support des navigateurs

Un dernier point pourrait poser problème : le support des navigateurs. En effet, l'unité rem a fait son apparition dans la version 3 de CSS. On peut donc légitimement se demander quels navigateurs supportent cette méthode. Aussi surprenant que cela puisse paraître, le support de cette unité est plutôt bon :

  • Chrome toutes versions ;
  • Firefox 3.6+ ;
  • Internet Explorer 9 ;
  • Safari 5+ ;
  • Opera 12.1+.

Malgré ce support étonnamment bon, la plupart des développeurs d'aujourd'hui se soucient de tous les utilisateurs. Quelle solution adopter dans ce cas pour les utilisateurs d'anciennes versions d'Internet Explorer par exemple comme c'est le cas dans beaucoup de grosses entreprises ?

Nous pouvons simplement coupler une taille de texte en pixels à celle en rem. Les utilisateurs dont le navigateur prendra en compte la taille en pixels ne pourront pas redimensionner leur texte via leur navigateur, mais c'est mieux que rien.

En reprenant notre exemple de liste cela donnerait :

 
Sélectionnez
html { font-size : 100% ; }
li {
  font-size : 24px ;
  font-size : 1.5rem ;
}

Si vous vous demandez pourquoi 24, la réponse est simple : la taille de texte par défaut est fixée à 16px. Comme nous définissons notre taille de base à 100 % nous ne modifions donc pas la taille par défaut, le texte par défaut sera donc également de 16px dans notre cas. Il suffit donc ensuite de calculer la taille de texte pour nos listes à partir de cette valeur ce qui nous donne une équivalence en pixels de 24 pour une taille de 1.5em.

V. Conclusion

J'espère avoir été clair sur l'utilisation de cette nouvelle unité introduite en CSS3 qu'est le rem. Rien ne vous empêche de définir la taille de base de votre élément racine en pixels. Cependant, on perd l'intérêt des unités relatives. Chacun optera pour la solution qui lui parle le plus, mais vous devez bien garder en tête qu'avec l'évolution croissante du marché du mobile et des tablettes le responsive design devient de plus en plus important. On ne peut négliger aujourd'hui les utilisateurs de ces appareils si l'on veut rester compétitif !

VI. Remerciements

Je remercie ericd69, Torgar et zoom61 pour leur relecture technique de cet article.
Je remercie également Torgar et ClaudeLELOUP pour leur relecture orthographique attentive.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2013 Sébastien Germez. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.