Taille du texte et zoom dans le navigateur

[Jan]

Bonjour,

Je constate une différence entre Firefox et IE au niveau de l'effet d'un "zoom" dans le navigateur (menu "view/text size") sur la taille des caractères affichés.

J'ai défini dans ma feuille de style la taille des caractères de certaines parties de la page en pixels. Les pages du site étant d'une largeur fixe (elle aussi définie en pixels) le but était que ces parties du texte définies en pixel gardent la même taille, quel que soit le "zoom" appliqué dans le navigateur.

J'obtiens bien l'effet recherché dans IE, mais dans Firefox, le taille des caractères varie avec les changements appliqués dans le navigateur.

Pour une fois, c'est IE qui semble mieux gèrer la css que Firefox. Ai-je raté quelque chose? Comment définir des tailles de police fixes quel que soit le zoom, et ceci pour tous les navigateurs?

Ma page est visible à http://www.presidentielle-2007.net/ . La partie du texte que je veux fixe est le titre et le menu horizontal.

[Xavier]

1. Certaines personnes ont des problèmes de vue. Elles sont bien contentes de pouvoir agrandir la taille du texte.
   
2. Certaines personnes ont un petit écran, elles aussi sont contentes d'avoir la possibilité de profiter d'un texte pas trop petit.
   
3. Il est déconseillé d'utiliser des tailles en px justement pour la raison qu'elles ne sont pas redimentionnables dans IE
   
4. Il est recommandé d'utiliser des tailles relatives (em, %) pour la simple et bonne raison qu'elles tiennent compte des préférences de l'utilisateur.
   

Conclusion : supprimes les tailles en px, mets-les en relatives et fait une mise en page un peu plus souple (les CSS ça sert aussi à ça )

PS : plus globalement : oublie la mise en page au pixel près. En CSS c'est impossible, et de toutes façons même avec les tableaux ça n'a toujours été qu'une belle illusion : chacun a un navigateur différent, des préférences différentes, des capacités différentes, un matériel différent, tout ça c'est autant de différences dans l'affichage de la page, et la seule façon de faire une mise en page qui soit belle partout c'est de la concevoir assez souple pour qu'elle puisse s'adapter à toutes ces spécificités particulières.

Modifié 25 Juin 2005 par Xavier

[Jan]

Salut,

Tout le contenu des pages, à l'exception du titre et du menu horizontal sont volontairement redimensionnables, pour les raisons que tu expliques.

Ceci dit, la raison pour laquelle je veux rendre le titre et le menu non redimensionnables est que ces éléments se superposent sur l'image de fond. Alors quand leur taille augmente ça devient illisible de toutes façons (essaye d'enchainer les ctrl++ sous firefox: tu verras que les rubriques du menu horizontal finissent par se superposer. Et si je les laisse s'étendre sur 2 lignes, je sors de l'image de fond et elles deviennent alors presque invisibles sur fond blanc). Je pourrais décider de réaliser ces éléments de navigation avec des images ce qui règlerait le problème, mais je préfère rester en texte pour ne pas alourdir les pages.

La mise en page au pixel près m'importe peu. Je cherche seulement à rendre mes éléments de navigation non redimensionnables. Est-ce possible?

[golog]

Non, ce n'est pas possible. Et c'est justement tout l'intérêt de Firefox par rapport à IE: pouvoir redimensionner le texte même si les concepteurs ont indiqué une taille absolue

Edit: j'ajouterais que si le texte peut être agrandi jusqu'à 150% tout en restant lisible (en l'occurence, sans trop sortir de sa zone de visualisation, ce qui est le cas sur ton site), il n'y a pas de problème...

Modifié 25 Juin 2005 par golog

[Jan]

OK, je vais laisser comme ça alors. Merci pour l'explication

[Dudu]

Non, ce n'est pas possible. Et c'est justement tout l'intérêt de Firefox par rapport à IE: pouvoir redimensionner le texte même si les concepteurs ont indiqué une taille absolue

Si je peux me permettre: nombre de navigateurs ont toujours eu ce comportement avant même que Firefox ne sorte des bureaux de la MoFo

Rendons à César ce qui est à César.

[Xavier]

Edit: j'ajouterais que si le texte peut être agrandi jusqu'à 150% tout en restant lisible (en l'occurence, sans trop sortir de sa zone de visualisation, ce qui est le cas sur ton site), il n'y a pas de problème...

<{POST_SNAPBACK}>

150% par rapport à une taille "normale" (qui, je le rappelle, est fixée dans je crois tous les navigateurs à 16px), pas à ime taille qui a déjà été fortement diminuée (par un splendide font-size: 0.8em; pour bien montrer à l'internaute que ce n'est pas lui qui décide s'il a des problèmes de vue )

Cela dit il est vrai que ceux qui ont vraiment des problèmes de vue ont sans doute des outils d'agrandissement plus performants.

PS : regarde aussi avec Opera, c'est très différent (en fait c'est vraiment un zoom, pas juste la taille du texte, et donc c'est vraiment très élégant).

[golog]

DuDu: Oui, effectivement! Je parlais uniquement de Firefox car c'était celui cité par Jan. En tout cas, heureusement qu'il n'y a pas que Firefox qui permette de forcer le redimensionnement du texte, et que cela existait avant lui

Xavier: J'avoue que je n'avais pas pensé à cela! Mais quel concepteur ne redimensionne pas la police au préalable? Du moment que tout est défini en relatif... évidemment l'agrandissement max ne sera pas génial dans IE. Mais comme tu le dis, les gens ayant vraiment des problèmes de vue ont probablement des outils plus adéquats. En ce qui concerne Opera, c'est vrai que le zoom est un outil très pratique, mais j'aimerais parfois pouvoir redimensionner uniquement le texte

[Monique]

Bonjour,

PS : regarde aussi avec Opera, c'est très différent (en fait c'est vraiment un zoom, pas juste la taille du texte, et donc c'est vraiment très élégant).

<{POST_SNAPBACK}>

Avec Firefox, l'option zoom de l'extension ColorZilla fait cela très bien aussi.

L'inconvénient par rapport à Opera, c'est que l'effet de zoom n'est opérationel que sur la page affichée. Il ne convient donc pas pour naviguer puisqu'il n'est pas conservé quand on change de page.

[Monique]

J'ai défini dans ma feuille de style la taille des caractères de certaines parties de la page en pixels. Les pages du site étant d'une largeur fixe (elle aussi définie en pixels) le but était que ces parties du texte définies en pixel gardent la même taille, quel que soit le "zoom" appliqué dans le navigateur.

J'obtiens bien l'effet recherché dans IE, mais dans Firefox, le taille des caractères varie avec les changements appliqués dans le navigateur.

Pour une fois, c'est IE qui semble mieux gèrer la css que Firefox. Ai-je raté quelque chose? Comment définir des tailles de police fixes quel que soit le zoom, et ceci pour tous les navigateurs?

<{POST_SNAPBACK}>

Je crois bien que tu as raté quelque chose, en effet Jan

Dans les spécifications CSS2, "La syntaxe de CSS2 et les types de données de base", 4.3.2 Les longueurs

Voici les unités relatives :

    * em : la valeur de 'font-size' pour la police concernée

    * ex : la valeur de 'x-height' pour la police concernée

    * px : une quantité de pixels, en fonction de l'appareil de visualisation.

[...]

Les valeurs exprimées en pixel s'entendent relativement à la résolution de l'appareil de visualisation, c.à.d. le plus souvent un moniteur. Dans le cas où la densité de pixels de l'appareil de sortie est trop éloignée de celle d'un moniteur typique, l'agent utilisateur devrait redimensionner les valeurs en pixel. On recommande une valeur pour le pixel de référence qui soit égale à l'angle visuel d'un pixel sur un appareil de densité 96dpi (96 ppp) situé à une longueur de bras du spectateur. Pour une longueur de bras nominale de 28 pouces (71 cm), l'angle visuel serait de 0.0213 degrés.

À cette distance, un pixel correspond à une taille d'environ 0.26 mm (soit 1/96 pouce).

[Jan]

Merci Monique pour l'explication

un splendide font-size: 0.8em; pour bien montrer à l'internaute que ce n'est pas lui qui décide s'il a des problèmes de vue )

<{POST_SNAPBACK}>

Désolé, la route est longue pour réussir à faire des pages accessibles. J'en suis encore à lutter pour essayer de créer des pages conformes, sois indulgent