Plan de site Navigation
Blog & Blues Techniques et Standards de la Qualité Web

Accueil > weblog


- Lire le billet précédent - Lire le billet suivant -

Polices redimensionnées en pixels, une grosse sottise

Par Laurent Denis, le 30 mai 2004.

C'est un fait connu comme le loup blanc : Internet Explorer ne sait pas redimensionner une police spécifiée en pixels dans la CSS. Et il n'existe aucune solution miracle. Surtout pas celle-ci, qui repose sur une mauvaise compréhension de ce qu'en fait le moteur de rendu du navigateur.

Le problème à résoudre étant l'impossibilité pour l'utilisateur d'IE d'agrandir ou de rétrécir les polices affichées à l'écran lorsqu'elles ont été réglées par un font-size en pixels, voici la pseudo-solution que j'ai vu passer sur un forum : Une taille de caractère spécifiée avec un font-size: 10 px; au lieu de font-size: 10px; devient redimensionnable (notez l'espace ajouté avant l'unité px).

De fait, si l'on teste le code suivant dans IE6, la seconde ligne de la liste semble bien pouvoir être redimensionnée :

<ul>
    <li style="font-size: 10px;">
        Sans espace: <code>font-size: 10px;</code>
    </li>
    <li style="font-size: 10 px;">
        Avec espace: <code>font-size: 10 px;</code>
    </li>
</ul>

Vérifiez par vous-même en affichant cette page dans IE6 :

  • Sans espace: font-size: 10px;
  • Avec espace: font-size: 10 px;

Mais, en fait, la syntaxe avec espace est tout simplement invalide : 10 px (avec son espace) est lu par le moteur de rendu du navigateur comme si l'unité n'avait pas été indiquée à la suite de la valeur. Dès lors, la propriété incorrecte est ignorée et, aucune taille de caractère spécifique n'étant appliquée, Internet Explorer sait effectivement redimensionner le texte... qui n'est plus en pixel.

Conclusion ? En attendant un monde meilleur où tous les navigateurs sauront redimensionner les pixels... utilisez plutôt des unités relatives (em, pourcentages...)

Trackbacks

1. Le 16 février 2006 à 00:12, de Le Potlatch

La bonne taille de texte en CSS (How to size text using ems | clagnut/blog)

Après avoir compris que les tailles en pixels appartenaient à l'Axe du Mal, j'ai longuement cherché la méthode la plus efficace pour dimensionner du texte avec des valeurs relatives (donc accessibles) sans trouver la formule idéale (simple et...

Les trackbacks pour ce billet sont temporairement fermés en raison d'une série d'attaques de spam.

Commentaires

Gloom, le 30 mai 2004

Pour moi, le fait qu'on ne puisse pas redimentionné une taille en pixel est une bonne chose, ça permet au développeur web de choisir une taille précise dans certains cas précis. Avec un Zoom (un vrai, comme celui d'Opera, pas l'horrible "zoom sur le texte" de Mozilla), on peut lire le texte trop petit tout en gardant le design tel que le dévelopeur l'a concus.

Ce qu'il faudrait, c'est que les développeurs comprennent que les taille en px sont à utilisé avec parsimonie ! Ainsi, il n'y aurais pas des horreur comme le zoom sur le texte de Mozilla qui est fait pour pallier à tout ces webmasteurs qui abusent des tailles en px.

P.S.: Il y a un problème: les paragraphes de mon commentaire se mélange en un paragraphe.

Gloom, le 30 mai 2004

C'est uniquement dans la prévisualisation que les paragraphes se confondent.

Laurent Denis, le 31 mai 2004

Déterminer un design au pixel près est illusoire. Il y aura toujours un certain nombre d'utilisateurs :

  • Dont la configuration locale fera échouer le design en question ;
  • Ou chez qui cette présentation sera inaccessible (le redimensionnement du texte est avant tout une règle d'accessibilité).

Gloom, le 31 mai 2004

Ce que je dis, c'est qu'il y a certain cas où, d'un point de vue graphique, l'utilisation du px peut se justifier et que, dans ces cas là, le "zoom sur le texte" de Mozilla* pause problème contrairement au zoom d'Opera. Le problème n'est pas l'utilisation des px, mais son abut.

Bref, dans un monde parfait, tout les navigateur aurais un zoom ET la possibilité d'augmenter la taille du texte (cette dernière option ne marchant que pour les taille définie en pt et en em). Toujours dans un monde parfait, les développeurs web n'utiliserais les px QUE quand c'est vraiment nécessaire d'un point de vue graphique.

Je suis bien sûr tout à fait d'accord que déterminer un design au pixel près est totalement illusoire, mais, déterminer une partie du design au pixel près est très possible, on le fait souvant avec des images, le problème, c'est que, quand on veut supperposer du texte à une image avec une certaine adéquoition entre la taille de l'image et la taille du texte, si quelqu'un utilise le zoom sur le texte de mozilla, graphiquement, ça devient n'importe quoi et donc, il n'est pas réaliste de supperposer texte et image dans une adéquoition graphique (à cause de Mozilla*, mais, j'insiste pour dire que, pour moi, c'est son plus gros défaut et que en bien des point, Mozilla & co).

*: Je dis Mozilla, mais, en gros, c'est tout les navigateurs Gecko suffisament réssent.

Eric Daspet, le 01 juin 2004

merci Gloom, j'allais faire la même remarque. Il n'y a aucune raison d'agrandir les unités non relatives autrement que par un zoom global.

Pour rappel, on n'agrandi pas les tailles qui sont en unités em, on agrandi la taille par défaut du texte pour le navigateur. Effectivement, si les tailles sont proportionnelles à la taille par défaut (et ça devrait être le cas globalement) : ça augmente/diminue dans le texte.
Maintenant je conçois qu'on puisse vouloir afficher des objets (textes ou autres) avec des tailles fixes. Centimètres, millimètres, pixel ou point (oui Gloom, je ne comprend pas pourquoi tu le met avec "em") n'ont aucune raison de changer.
L'accessibilité ça serait zoomer globalement, pas avoir un centimètre plus gros quand il s'agit d'un texte.

Il faudrait effectivement avoir ET pouvoir modifier facilement la taille par défaut au niveau de la page (mozilla et IE le permettent) ET pouvoir zoomer sur la page (Opera le permet)

Pour le zoom je me demande si c'est si dûr en fait. Il suffit d'augmenter proportionnellement toutes les tailles fixes (images, page, boutons ...). Logiquement ça devrait être faisable.

Gloom, le 01 juin 2004

"Centimètres, millimètres, pixel ou point (oui Gloom, je ne comprend pas pourquoi tu le met avec "em")..."

J'ai eu un doute en l'écrivant et, comme tu me le fait remarquer, je me suis trompé. Je me demande si mon erreur ne vient pas du fait qu'on peut redimentionner un texte défini en point dans MSIE là où on ne peut pas redimentionné une taille définie en pixel.

Je vais faire un bug report avec "Enhancement Request for new feature or enhancement." comme "Severity" pour proposer de faire un zoom ( et je vais prendre le temps de bien m'exprimer pour être bien compris smiley clin d'oeil ). D'ailleurs, je vais (enfin) télécharger Bugzilla.

Gloom, le 01 juin 2004

C'est déjà signallé, je vais terminer de lire et éventuellement insister d'un commentaire pour appuyer l'importance d'un zoom d'un point de vue accessibilité.

bugzilla.mozilla.org/show...

P.S.: Utilisant Windows et lisant que ça à l'air compliqué d'installer Bugzilla sur windows, j'ai décider de me contanter de la version web.

Les commentaires pour ce billet sont temporairement fermés en raison d'une série d'attaques de spam.