Lilapuce
 

supports (lundi 19 novembre 2007)

Unités de mesure relative CSS

Ce support concerne un aspect particulier du quatrième exercice consacré aux CSS. Je n’ai pas voulu encombrer le développement de l’exercice avec des explications plus théoriques, lesquelles ont été, de surcroît, fournies lors des ateliers.

Pour autant, je pense que ces questions, concernant les unités de mesure CSS, doivent faire l’objet d’un support, car il s’agit de notions qu’il est important de comprendre pour maîtriser au minimum les styles.

C’est la raison pour laquelle, même si les questions abordées ici peuvent s’appliquer de façon générale au traitement des CSS, il est fortement recommandé de prendre connaissance de ces exercice avant d’engager la lecture de cette page.

Venons en à l’étape de paramétrage des styles du body.

Ci-dessous, pour rappel, la déclaration de la force (taille) du texte :

JPEG - 31.1 ko

Avant de donner une explication sur ce choix, il me semble important d’apporter quelques précisions d’ordre théorique.

CSS permet d’appliquer deux types d’unité de mesure :

- les unités de mesure absolue : pica, inch, centimètres, millimètres, etc.

- les unités de mesure relative : pixels, pourcentage, cadratin (em), etc.

Il faut prendre en compte que les unités de mesure absolue, telles que le point pica utilisées en typographie, sont, en réalité assez peu adaptées pour un mode de « publication écran ». Le point pica, comme le cicéro est une unité de mesure du corps de texte imprimé. Est-il besoin de préciser qu’une fois imprimé, la taille du texte ne peut être modifiée ?

Or, précisément, tel n’est pas le cas d’un texte affiché à l’écran. Vous pouvez en faire l’expérience sur votre traitement de texte : sans même modifier la « taille » du caractère (par exemple, corps12), vous pouvez « zoomer » afin d’en modifier l’apparence à l’écran. Pour autant, quelle que soit la taille d’affichage, votre document sera toujours imprimé en corps 12.

JPEG - 55 ko
JPEG - 48.5 ko
JPEG - 31.8 ko

Il en est de même avec le navigateur Web. Beaucoup d’utilisateurs l’ignorent, mais vous pouvez modifier la taille d’affichage des pages web (à condition que les concepteurs le permettent). Par exemple, à l’aide des raccourcis clavier CTRL+ et CTRL-, vous pouvez augmenter ou baisser la taille du texte des navigateurs.

JPEG - 31.8 ko
JPEG - 37.5 ko
JPEG - 31.2 ko

Par exemple, sur Firefox, en effectuant la commande CTRL+0 (zéro) vous rétablissez la taille d’affichage par défaut.

Et … c’est quoi cette taille par défaut ?

Il suffit de consulter les options (ou les préférences) du navigateur. Voici où il est possible de régler cela sur Firefox :

JPEG - 52.5 ko
JPEG - 42.9 ko
JPEG - 36.9 ko

D’autres critères, tout aussi essentiels, permettent de considérer que rien ne permet de garantir les mêmes conditions d’affichage d’un écran à un autre :

- les différentes résolutions d’écran,

- les variations d’affichage des polices selon les systèmes d’exploitation

- la prise en charge d’options d’accessibilité pour les handicaps ; pour ce dernier point il est même indispensable que l’apparence du contenu puisse être modifiée.

Ceci vaut pour d’autres propriétés, telle que la couleur, mais la question de la taille du texte est essentielle.

Pour toutes ces raisons, il est donc préférable d’utiliser les unités de mesure relative, en particulier pour le texte. Cette portabilité fait justement partie des conditions d’utilisation des pages Web : de toutes façons, c’est le visiteur qui doit avoir le dernier mot. On ne peut le priver de la liberté de modifier les paramètres d’affichage d’un contenu en ligne pour l’adapter à son environnement. Le fait de verrouiller une page en empêchant, par exemple, l’adaptation de la taille des caractères représente une intrusion comparable à celle d’un titre de presse qui imposerait les conditions d’éclairage (physique) du journal.

Alors, dans ces conditions, quelles sont les unités de mesure relatives CSS permettant de paramétrer le texte ?

L’instruction em (cadratin), semble tout à fait adaptée au texte. Il s’agit, en effet, d’une sorte d’étalon utilisée en typographie pour appliquer, par exemple, l’encombrement d’un renfoncement en début d’alinéa (le blanc, ou le retrait). Le cadratin, en typo au plomb, était de section carrée : la hauteur étant égale à la chasse. Le cadratin est, par conséquent, toujours exprimé en valeur relative : généralement en fonction de la force du texte placé sur la même ligne.

Pour revenir à nos CSS, em ne sera d’aucun recours si l’on veut, par exemple, positionner « pile poil » un élément, tel qu’un bloc <div> en repérage par rapport à un autre. Dans ce cas, on aura tout intérêt à utiliser une autre unité de mesure en valeur relative : le pixel.

Revenons, plus précisément encore, à mon exemple du texte dans le body :

En indiquant la propriété de 0.85em dans le corps de page, je demande au navigateur d’afficher le texte à 85% de la taille « par défaut ». Ce qui est, pour le moins, très approximatif.

Sachant, comme nous l’avons vu, que la taille par défaut du navigateur est relativement arbitraire, je suis obligé de reconnaître que le paramétrage de la taille du texte de corps de page (la balise body) s’apparente plus au bidouillage pragmatique qu’à la mise en place d’une procédure rigoureuse.

En clair, voici comment je procède : si je veux que le texte s’affiche « un peu plus petit » que la taille moyenne affichée par les navigateurs, j’indique, après quelques essais sur plusieurs navigateurs, une valeur comprise entre 0.80em et 1em et inversement si je souhaite que ce même texte s’affiche « en gros caractère », je ferais des essais à tâtons avec des valeurs supérieurs à 1em.

Il me semble que le fait d’indiquer – dans la balise body (j’insiste sur ce point) - la taille du texte en valeur relative n’est pas d’une importance décisive. On pourrait tout aussi bien renseigner cette valeur en point pica, par exemple : rappelons que les navigateurs indiquent la taille du texte par défaut en pica.

Donc, de mon point de vue, si l’emploi de cette unité de mesure proportionnelle - em - n’est que d’un intérêt très mineur pour le body, il n’en n’est pas de même pour les autres balises.

En effet, cette valeur du texte du body, même imprécise, servira de référence pour calculer en proportion d’autres dimensions : les titres, par exemple, mais également d’autres conteneurs dont les contours s’adapteront en fonction de l’encombrement des textes.

Quelques précisions s’imposent ici, pour expliquer pourquoi les propriétés des conteneurs HTML peuvent être définis les uns par rapport aux autres.

Nous avons vu que la logique du HTML repose, en partie, sur l’imbrication de balises. Ainsi, selon l’organisation arborescente d’une page HTML, le body représente « l’élément parent » du corps de la page.

Les autres balises, imbriquées entre <body> et </body> sont considérées comme « éléments descendants » du body. Certaines de ces balises étant également des « éléments parents », puisqu’elles intègrent, à leur tour, d’autres balises.

Par exemple, nous avons vu qu’à l’intérieur d’une liste <ul> </ul> doit nécessairement être composée de plusieurs item <li> </li>. On pourrait très bien imaginer que, certains de ces items de liste comportent à leur tour des images.

Cette organisation « en arbre », dans laquelle s’imbriquent « éléments parents » et « éléments enfants » est caractéristique d’un document HTML ; cette logique est tout aussi importante dans la mise en oeuvre des CSS.

Les valeurs relatives paramétrées en em sont calculées, en proportion de la taille du texte de l’élément parent ; d’où l’effet de « cascade ».

Regardez le code ci-dessous. Les tailles des titres h1, h2 et h3sont calculées en proportion de la taille de l’élément parent, c’est-à-dire le body.

JPEG - 57.5 ko

En conclusion, l’unité de valeur relative em est plutôt imprécise ; mais c’est paradoxalement, la solution qui semble la plus adaptée pour afficher du texte sur un média dont les paramètres de sortie sont, de toutes façon, relativement incontrôlables.

Ainsi, avec des valeurs relatives, la disposition générale de la page sera toujours respectée quels que soit la résolution de l’écran et les paramètres personnalisés du visiteur (taille des caractères, systèmes d’accessibilités liés aux handicaps, etc.).