Compatibilité multi-navigateurs des polices de caractères

Compatibilité multi-navigateurs des polices de caractères Aurélien Levy 2008-03-09 2008-03-09 expert debutant css Quelles sont les unités et les valeurs à utiliser pour dimensionner la taille des caractères de façon homogène sur le plus grand nombre possible de navigateurs Web? Aurélien Levy a mené une campagne de tests pour donner une réponse à ce problème récurrent pour les développeurs de sites web.

Quelles unités ? Les tailles de polices peuvent être exprimées à l'aide d'unités relatives ou absolues. Sont disponibles, entre autres, pour les unités relatives : les mots clefs ; les em ; les % ; les px (pixels) ; Et pour les unités absolues : le pt (point) ; le pc (pica) ; le cm (centimètre) ; le mm (millimètre) ; le in (inche) ; Dans un premier temps, faisons le tri sur les unités à utiliser. Le dimensionnement des polices de caractères en pixels garantit un affichage homogène de la taille des caractères quel que soit le navigateur. Malheureusement cela empêche aussi les utilisateurs d'Internet Explorer pour Windows de changer la taille d'affichage des caractères par le biais de leur navigateur, sauf s'ils ont coché Ignorer les tailles de polices spécifiées sur les pages Web dans les options d'accessibilité, les obligeant à utiliser un logiciel de zoom d'écran. Depuis Internet Explorer 7, l'utilisateur a bien à sa disposition une fonction de zoom, mais l'effet produit et les besoins entrainant son utilisation ne sont pas forcément les mêmes. D'autre part, les unités absolues sont déconseillées pour des raisons liées à l'accessibilité des contenus Web. Ainsi, le Référentiel général d'Accessibilité des Administrations (RGAA) nous dit notamment que :

L'utilisation d'unités relatives pour les tailles de caractères permet aux utilisateurs d'adapter l'affichage de la page selon leur besoin. De même, l'utilisation d'unités relatives pour le dimensionnement des blocs facilite leur adaptation aux contraintes de largeur de la fenêtre d'affichage. Les utilisateurs ayant besoin d'agrandir ou de réduire les textes, ou ceux ayant des écrans de petites dimensions, ne seront ainsi pas pénalisés.

Pour toutes toutes ces raisons, nous abandonnerons donc les unités absolues au profit des unités relatives. Ainsi les mots clefs, les ems ou les % permettent de respecter les standards d'accessibilité, ainsi que le redimensionnement dans le navigateur qui reste encore aujourd'hui le plus utilisé sur le marché à savoir Internet Explorer. Nous allons donc devoir choisir parmi les unités relatives celle à utiliser. Étudions un peu plus précisément les avantages et les inconvénients de chacune avant de faire des choix définitifs.

Les mots clefs (xx-small, x-small, small, medium, large, x-large, xx-large) Bien qu'étant relatifs à la taille des caractères configurée par l'utilisateur dans son navigateur, les mots clefs sont considérés dans les spécifications du W3C comme des valeurs absolues. Ils ne sont en effet pas sensible à l'héritage. En fait, les mots clefs se réfèrent à une entrée de la table des tailles de police, celle-ci étant issue de l'agent utilisateur (navigateur graphique ou texte, entre autres). Les valeurs possibles sont : xx-small, x-small, small ,medium, large, x-large et xx-large. Le W3C conseille, dans le cas d'un moniteur, que le facteur d'échelle entre chaque mot clef varie entre 1,2 et 1,5 en fonction du mot clef utilisé afin d'éviter d'avoir un texte trop petit. Si la valeur 'medium' correspond à 16px, la valeur 'large' sera comprise entre 19.2px et 24px. Les facteurs d'échelle peuvent être différents selon les médias utilisés. Un texte en medium sur un PDA n'aura pas forcément la même taille que sur un écran d'ordinateur classique. Par ailleurs, le navigateur devrait prendre en compte la qualité et la disponibilité des polices au moment du calcul de cette table. Celle-ci peut aussi différer d'une famille de polices à une autre. Tableau comparatif des valeurs avec des réglages standards Taille HTML Mot clef non applicable xx-small size=1, size=-2 x-small size=2, size=-1, small small size=3 medium size=4, size=+1, big large size=5, size=+2 x-large size=6, size=+3 xx-large size=7, size=+4 non applicable

Les avantages : Permet à l'utilisateur de modifier l'affichage de la taille des caractères quelque soit sa plate-forme ; Sept tailles possibles qui répondent en théorie à bon nombre de situations. Les inconvénients : xx-small s'avère peu utilisable ; Limite les possibilités de dimensionnement (sept possibilités seulement) ; Taille affichée par un même mot clef variable en fonction du navigateur.

Les ems ou les % Les ems et les % sont les valeurs relatives par excellence. L'utilisation des ces valeurs sur la propriété font-size implique que tous les calculs de taille se font par rapport à un élément défini précédemment, l'élément de base commun étant la taille définie par l'utilisateur dans la configuration de son navigateur. La valeur affichée est égale au produit de la valeur de pourcentage par la valeur initiale de cette propriété. Voici par exemple une page avec le code HTML suivant : <body> <div>ici du texte <p> ici du texte </p> </div> </body> Et le code css suivant : body { font-size:100%; } div, p { font-size:75%; } Dans le cas d'une configuration standard (16px par défaut) le texte dans la div fera 75% de 100%, donc 75% de 16px, donc 12px. Le texte dans le paragraphe fera quant à lui 75% de 75% de 100%, donc 75% de 12px (ou 56,25% des 16px de départ) donc 9px. (Pour plus d'info, voir Comment définir la taille du texte en em). Les avantages : Permet à l'utilisateur de modifier l'affichage de la taille des caractères quelle que soit sa plate-forme ; Ils sont déterminés par rapport à la taille par défaut configurée dans le navigateur (16px étant la valeur défaut). Ainsi, un texte de 1em ou 100% est égale à une fois la valeur configurée ; Liberté totale dans le dimensionnement. Les inconvénients : Certaines valeurs de % ou de em ont un affichage différent entre les différents navigateurs ; L'héritage des tailles de polices est un outil puissant mais son maniement n'est pas simple

À l'heure du choix Nous retenons l'utilisation des % au vu de leur plus grande souplesse d'utilisation. Le problème reste de trouver les bonnes valeurs à utiliser, en utilisant pour cela un protocole de test nous permettant de comparer le rendu de la taille des caractères dans différents navigateurs.

Quelles valeurs ?

Le protocole de test Ce protocole de test à été mis au point par Owen Briggs. Il s'agit simplement d'une série de page HTML composée d'un P avec un font-size fixé à 1.0em et d'un BODY avec un font-size en %, avec pour chaque page une valeur de pourcentage différente allant de 50% à 99%, et enfin d'une image de fond graduée. Ces pages sont ensuite placées dans un frameset permettant de les montrer toutes en même temps. Pour finir, il ne reste plus qu'à regarder ce frameset sous les différents navigateurs. Le résultat est visible ici. Malheureusement ces tests se limitent à une seule famille de police à savoir : verdana, arial, helvetica, sans-serif. Ils se limitent également à une taille maximum de 99%. L'auteur en conclut qu'il n'y a que 6 valeurs fiables, ce qui ne nous apporte aucun bénéfice par rapport à l'utilisation des mots clefs qui en comptent 7. Nous allons chercher à obtenir 11 valeurs et à élargir la gamme de familles de polices utilisées. De cette manière, nous obtiendrons dans le cas d'une configuration classique (texte réglé à 16px dans le navigateur) des tailles dont l'équivalent en px serait entre 9px et 19px qui s'afficheront de manière identique quelque soit le navigateur et la famille de police. Pour faciliter d'éventuels tests ultérieurs sur l'héritage, nous avons fait varier la valeur de font-size sur le P en % et laissé fixe la valeur du BODY à 100%, et non l'inverse comme le faisait Owen Briggs. Nous avons augmenté l'échelle de test en allant jusqu'à 129% et testé plusieurs familles de polices pour voir si les valeurs trouvées étaient les mêmes quelle que soit la famille de police. Les tests ont été effectués sur les navigateurs et plateformes suivantes : navigateurs et plateformes testées Navigateurs Windows OS X Linux Konqueror 3.5 oui Opera 8.5 oui oui Opera 9.2 oui oui oui Camino 1.5 oui Safari 1.2 oui Safari 2 oui Safari 3 oui Internet Explorer 5 oui Internet Explorer 5.2 oui Internet Explorer 5.5 oui Internet Explorer 6 oui Internet Explorer 7 oui Internet Explorer 8 beta 1 oui Firefox 1.5 oui oui oui Firefox 2 oui oui oui Firefox 3 beta 4 oui oui oui

Résultats Les résultats de ces tests sont donc visibles sous forme d'image par famille de police (images JPG): Verdana (ZIP 3,8 Mo) Arial (ZIP 3,5 Mo) Times (ZIP 3,4 Mo) Geneva (ZIP, 3,7 Mo) Georgia (ZIP 3,5 Mo)

La réponse à vos soucis Pour vous faciliter la tâche et ne pas jouer à cache cache avec les bonnes valeurs, voici le récapitulatif des valeurs que nous avons trouvées, comme étant les plus stable, en étudiant et comparant les images. Ceci se révèle être valable pour l'ensemble des 5 polices utilisées : Tableau récapitulatif des résultats en base BODY à 100% (16px) Valeurs en % Valeurs en pixels approximative 57 9 65 10 71 11 77 12 82 13 88 14 96 15 103 16 109 17 115 18 121 19

Il est à noter que certains frameworks CSS vous propose également des feuilles de styles toutes faites ayant la même optique. C'est notamment le cas de YUI Font qui remet le texte par défaut à un équivalent 13px et vous propose les bonnes valeurs à utiliser pour avoir des textes plus petits ou plus grand. Reste cependant le problème de l'héritage inhérent à l'utilisation des % ou des em qui pourra faire l'objet d'un autre article...