Tailles et dimensions
dans une page HTML

Page précédente

Avertissement : on ne s'occupera pas de codage explicite dans cette page, mais uniquement d'aspects qualitatifs


Introduction

Un auteur doit se préoccuper de la taille de nombreux éléments dans sa page s'il tient à tout maîtriser dans sa présentation. Tout compte : largeurs et hauteurs des calques, des images, des tables, taille des marges internes et externes, taille des caractères, des espacements et des interlignages. En fait, fort peu de dimensions lui sont réellement imposées en dehors de la taille des images s'il veut montrer celles-ci dans les meilleures conditions, c.à.d. à leur taille nominale. Ces dimensions s'expriment alors en pixels. Si l'auteur tient à verrouiller toute sa présentation à partir de ses images il cherchera donc naturellement à tout exprimer en pixels. On ne doit pas trop l'encourager dans cette voie.

Cette conception est parfaitement compréhensible si on conçoit ses pages comme des œuvres d'art graphiques où les images et la typographie formeraient un ensemble indissociable. Mais la plupart d'entre nous devrions être plus modestes et comprendre que nos pages puissent passer avec différentes résolutions d'affichage et des caractères qui n'aient pas tout à fait la taille prévue à l'origine. Les visiteurs avec des problèmes de vision devraient même toujours pouvoir librement agrandir les caractères. Il est donc bon de prévoir une mise en page avec une certaine élasticité, avec des dimensions proposées qui ne soient pas forcément des dimensions imposées.

Les 6 tailles de caractère du HTML classique vont dans ce sens. La taille SIZE=3 correspond à la taille par défaut du visiteur, que celui-ci est censé avoir réglée à son goût, et les autres valeurs sont donc des valeurs relatives à ce choix du visiteur. L'auteur peut prévoir ce qui se passera si le visiteur s'écarte de la moyenne en jouant sur son bouton ou menu A+/A- (zoom) réglant la taille des caractères. Bien entendu la mise en page amoureusement léchée va en prendre un bon coup, mais l'essentiel est que le site reste lisible. Dans ce cas, à Dieu vat !

Le HTML moderne et les feuilles de style donnent beaucoup plus de liberté au concepteur des pages. Il peut choisir de se référer à la taille de police par défaut de son visiteur, et cela de plusieurs manières différentes. Mais il peut aussi choisir de figer sa mise en page en s'exprimant en pixels ou directement en centimètres ou autres unités de longueur. Selon les cas, et selon les navigateurs, il peut inhiber ou non le menu A+/A- de zoom sur les caractères et le gel de ce menu est toujours fâcheux pour les mal-voyants.

A noter que ce menu n'a jamais marché correctement avec NN3 ou NN4 et qu'il a disparu de NN6. Par contre, il a toujours remarquablement fonctionné avec les Explorer. Dans les navigateurs alternatifs, Mozilla, Opera et iCab (MacOS) fonctionnent très bien sur ce point.

(retour au menu)

Unités de mesure

Les CSS proposent 8 unités possibles pour exprimer tailles et longueurs (sans compter les pourcentages). Une tradition venant du W3C lui-même les répartit en unités absolues et unités relatives

Attention à l'expression «police de référence» pour les unités relatives. Une page HTML est constituée de différents éléments, soit juxtaposés, soit imbriqués les dans dans les autres. Chaque élément a donc un contenant immédiat, qui peut être un autre élément, ou bien, à défaut, l'ensemble de toute la page. Quand on définit un style pour un élément donné, la police de référence (pour cet élément) est la police du contenant de cet élément. Quand on a des éléments imbriqués les uns dans les autres, la police de référence peut varier d'un élément à un autre et la même indication de taille en em peut donc conduire à des tailles réelles (en pixels) différentes, comme le démontre l'exemple ci-dessous.

A titre d'exemple, ce paragraphe est écrit avec une taille de police 0.8 em. Le contenant étant la page elle-même, la police de ce paragraphe spécial est réduite de 80% par rapport au reste de la page. Ici, on a appliqué un nouveau style à une sélection de ce paragraphe, avec une autre couleur de fond, mais avec à nouveau la même taille de police 0.8em. On a donc donc une nouvelle réduction de 80% de la taille des caractères. On revient ici à la suite du paragraphe de démonstration.

C'est en ce sens qu'on parle «d'unité relative», pour dire que le résultat physique dépend du contexte.

Remarque : le W3C range le pixel parmi les unités relatives sous le prétexte qu'il n'a pas de taille bien définie, puisqu'il varie d'une machine à une autre. A notre (humble) avis, il s'agit d'un raisonnement un peu spécieux ; à ce compte, les «points», qui sont rendus par des pixels sur un écran (à raison de 1 pour 1 sur Mac ou de 4 pixels pour 3 points sur Windows) auraient pu passer dans les unités relatives... Il aurait mieux valu considérer le pixel comme une unité à part. :-)

(retour au menu)

Pourcentages

Une dimension exprimée en pourcentage se calcule sur une grandeur de référence qui est généralement la grandeur analogue héritée de l'élément contenant. On vient d'en voir un exemple avec la police de référence d'un élément, qui est la police héritée de son contenant. Il y a de nombreuses autres grandeurs qui peuvent ainsi être héritées du contenant ; on se laissera guider par l'intuition. L'exemple ci-dessous montre comment la taille de police et la largeur s'héritent d'un élement à un autre pour servir de base à des pourcentages.

Bloc de référence : largeur 100% et police à 120%
Premier bloc imbriqué de largeur 80% (de la largeur précédente) et police 70% (de la taille de police précédente)
Deuxième bloc imbriqué, avec le même style : largeur 80% (de la largeur précédente) et police 70% (de la taille de police précédente)

Notez que les 100% pour la largeur du grand bloc ne se comptent pas sur la largeur de la fenêtre, mais sur celle du calque qui contient notre texte.

Attention toutefois, la grandeur de référence qui sert de base aux pourcentages n'est pas toujours la grandeur héritée. Regardez l'exemple ci-dessous :

Ce bloc 2 est contenu dans le bloc 1, avec un style qui ne contient rien sur la taille de police (donc on garde celle du bloc 1), mais qui redéfinit la hauteur de ligne à 120%. Ce pourcentage est manifestement appliqué à la taille de la police locale.
Bloc 1 : police de 12px et une hauteur de ligne (exagérée) de 32 px. Cette hauteur ne servira pas de référence en cas de redéfinition dans le bloc 2.

Si on ne redéfinissait pas la hauteur de ligne dans le bloc 2, on garderait le même interligne que dans le bloc 1. Cette hauteur est donc bien héritée, mais ce n'est pas elle qui sert de base au pourcentage. Vraisemblablement, toutes les grandeurs concernant le formatage du texte doivent se baser sur la taille de la police locale (c'est assez intuitif, mais ce serait tout de même à vérifier :-)


(retour au menu)

Taille des caractères

A la lecture de ce qui précède, on aura compris qu'on pouvait exprimer la taille des caractères soit par un pourcentage, soit par un nombre suivi d'une unité. Par exemple, on prendra 1.0em (ou 100%) pour retrouver la taille de police de référence, 0.83em (ou 83%) pour obtenir une taille réduite à 83%, etc...

Réexpliquons cette notion de taille de référence. Les différents éléments d'une page HTML sont des blocs contenus les uns dans les autres. Par exemple l'ensemble de la page peut contenir des calques (ou blocs DIV) qui peuvent contenir d'autres blocs, etc... et on arrive finalement à des paragraphes. La taille définie en «em» ou en «%» pour un paragraphe s'appuie sur la taille qui a été définie pour l'élément qui contient ce paragraphe. Si on n'a rien défini pour ce bloc contenant, on remonte d'un cran dans les hiérarchie de ces blocs, etc... On arrive finalement à l'ensemble de la page (BODY). Si on n'a toujours rien défini, la référence est la taille qui a été définie par le visiteur lui-même dans les préférences de son navigateur.

A noter que selon ce raisonnement, une taille définie pour la page entière devrait aussi être valable pour les éléments d'une table. Comme ça ne se passe manifestement pas comme ça avec de nombreux navigateurs, il vaut mieux toujours définir la taille dans les tables de manière explicite.

Les feuilles de style offrent aussi deux autres possiblités dans la continuité de ce qu'on faisait en HTML classique :

Tailles prédéfinies
Le W3C préfère parler de tailles absolues, mais on a vu qu'il faisait un usage un peu flou du mot «absolu». C'est en fait la nouvelle mouture des six tailles prédéfinies du HTML classique, à part que, progrès oblige, on est passé de six à sept. Le tableau ci-dessous donne les codages anglais et leur francisation dans Dreamweaver
xx-small
x-small
small
medium
large
x-large
xx-large
   xx-petit
x-petit
petit
moyen
grand
x-grand
xx-grand
Leur interprétation est laissée aux soins du navigateur du visiteur :
xx-small   x-small   small   medium   large   x-large  xx-large
Malheureusement, la taille par défaut du navigateur correspond plutôt à small («petit») pour Explorer et à medium («moyen») pour NN6 et Mozilla, ce qui veut dire qu'on risque de se décaler d'un cran dans cette hiérarchie de tailles en passant d'un navigateur à un autre. Par ailleurs, l'éventail des tailles est bien plus grand dans Explorer que dans NN6. Notre avis est qu'on s'expose à des variations trop grandes d'un visiteur à l'autre en définissant ainsi les tailles de police.

Tailles relatives
Tout comme dans le HTML classique et son codage par size="+1" ou size="-1", on peut aussi simplement demander des caractères plus grands ou plus petits que dans l'élément contenant (larger ou smaller dans le codage, «plus grand» ou «plus petit» dans les boîtes de dialogue de Dreamweaver).

A titre d'exemple, ceci est plus petit.
A titre d'exemple, ceci est plus grand.

Bien entendu, on pourra obtenir des variations plus fines de la taille en utilisant des fractions d'em ou des pourcentages, mais on n'oubliera pas qu'une taille de caractères est définie en nombre entiers, donc forcément avec des arrondis dans les divisions, et que tous les navigateurs n'ont pas la même façon de s'y prendre [1]. On est donc difficilement à l'abri des surprises si on vise des valeurs précises en pixels pour la taille des caractères, tant qu'on ne s'est pas livré à des comparaisons entre navigateurs comme nous l'avons fait nous-même dans notre article [1].


(retour au menu)

Attention au gel du menu A+/A- pour les caractères

L'emploi des unités absolues (point, cm, mm, pc, in) ou des pixels pour définir la taille des caractères empêche le visiteur sur IE5 ou IE6-windows de recourir au menu «taille des caractères» pour régler cette taille à son goût. C'est très fâcheux pour les mal-voyants et ça le restera tant que ces navigateurs auront la même prééminence que vers les années 2001-2002.

Ce menu reste accessible avec IE5-mac, Mozilla et sur les versions les plus récentes de Opera ou iCab (en 2002). Bien entendu, quand le visiteur augmente ainsi la taille des caractères, il a toutes les chances de ruiner les efforts de mise en page de l'auteur, mais au moins peut-il accéder aux informations contenues dans le site.


(retour au menu)

Evitez d'utiliser les points

Nous venons de voir une première raison d'éviter les points. Une deuxième tient à une différence profonde entre les systèmes Windows d'un côté et MacOS ou Linux d'autre part. En principe, les points sont rendus sur un écran à raison de 1 pixel pour 1 point par ces derniers, contre 4 pixels pour 3 points dans Windows. En conséquence, les caractères rapetissent de 30% en passant de Windows à MacOS.

En réalité la plupart des navigateurs récents ont un réglage de préférence «96dpi» qui leur permet de s'aligner sur le réglage de Windows, mais encore faut-il que le visiteur sache que ce réglage existe, à quoi il correspond et qu'il l'adopte (car à l'inverse, un site conçu en points sur MacOS avec le réglage traditionnel de «72dpi» sera alors affiché sur Windows avec des polices de 30% trop grosses). :-(

Evidemment, les points retrouveront leur intérêt si votre site est avant tout destiné à être imprimé. Mais gageons que ce ne sera pas souvent le cas.


(retour au menu)

Taille des blocs ou des calques

On rencontrera le plus souvent des dimensions de blocs en pourcentages ou en pixels. Les pourcentages sont très pratiques quand on se réfère aux dimensions de la fenêtre : par exemple, une largeur de 100% signifie qu'on prend la plus grande largeur possible dans la fenêtre ou dans le bloc contenant. A l'opposé, on exprimera souvent une largeur en pixels lorsque l'on veut éviter qu'un affichage s'étende trop en largeur quand l'affichage passe du 800x600 au 1024x768 ou davantage.

Mais on peut très bien exprimer une largeur en em, par exemple pour fixer (à peu près) le nombre de caractères par ligne.

Comme les caractères sont à peu près deux fois plus hauts que large, ce bloc de 20em en largeur devrait contenir (à la louche) une quarantaine de lettres par ligne. L'intérêt potentiel est que si la taille des caractères affichés varie, que ce soit dû aux réglages par défaut du visiteur ou parce que celui-ci a utilisé son menu A+/A-, la largeur du bloc varie en proportion et la mise en place du texte dans le bloc ne varie pas.

Attention à la spécification de hauteur des blocs DIV ou des calques ! Ne spécifiez cette hauteur (height) que si vous êtes certain que ça ne débordera pas, ce qui peut toujours arriver si le visiteur affiche vos textes avec des caractère plus grands que ce que vous aviez prévu.
— Dans ce cas, IE5.5-windows augmente obligeamment la hauteur du bloc sans tenir compte de ce qui était spécifié, mais c'est une erreur au sens du W3C.
— La norme officielle prévoit que le contenu d'un bloc puisse déborder et elle propose plusieurs façons d'en tenir compte. Si donc vous spécifiez une hauteur sans rien proposer pour un éventuel débordement, les navigateurs plus conformes comme IE5-mac ou NN6 vont vous faire payer ce débordement par une dégradation de la mise en page, pouvant aller jusqu'au mélange du texte excédentaire et de la suite de la page.
Le plus sage consiste à ne rien spécifier du tout, ou bien à demander une option «automatique», et le bloc s'ajustera tout seul en hauteur.

Retour en haut
Accueil des réponses
Page suivante :
les blocs dans les pages HTML