28173 sujets

CSS et mise en forme, CSS3

Taille de polcie en em

Bonjour,
j'ai vus que des documents de W3C conseillent d'utiliser des tailles de polices variables et non fixe ("em" et non "px").
J'ai donc fait cette modification dans la feuille de style CSS de mon site.

Le problème qu'il y a maintenant c'est que quand le visiteur, avec Internet Explorer diminu/augmente la taille de la police. Au lieu de la diminuer/augmenter un tout petit peu (comme alsacreation ou openweb), cela double, voir même triple la taille de la police. Donc ça rend le texte illisible ou alors cela déforme entièrement mon site.

Mais je pense que le problème vient de la feuille de style.
Je vous montre donc tout les endrois ou il a une indication de taille de police:
body{
font-size:0.81em;
}
a{
font-size:0.89em;
}
.news a{
font-size:1em;
}

Bon voila je crois qu'il y a tout, si ptete mon site si vous voulez tester avec IE : http://4et3.free.fr

Bon voila, j'éspère que vous pourez m'aider.
Merci d'avance
Modifié par Sined_style (07 May 2006 - 17:44)
C'est moi ou de toute façon Internet Explorer n'autorise que 5 niveaux de zoom ?

Illisible
Petit
Normal
Plus grand
Très grand

Aussi bien en passant par le menu qui va bien ou avec CTRL + Molette de la souris.
Perso, je ne comprends pas non plus l'utilisation des em, j'ai lu que c'était pas mal de mettre le body à 62.5% pour faire 1em=10px.

alors j'ai tenté ça :
<head>
<style type="text/css">
<!--
body {font-size:62.5%;}
.1{font-size:1em;}
.2{font-size:1.2em;}
.3{font-size:1.4em;}
.4{font-size:2em;}
-->
</style>
</head>

<body>
<p class="1">paragraphe</p>
<p class="2">paragraphe</p>
<p class="3">paragraphe</p>
<p class="4">paragraphe</p>
</body>
</html>


Mais j'ai le même résultat partout Smiley sweatdrop

Si vous pouviez m'aider ... merci bcp Smiley smile
mpop a écrit :
C'est moi ou de toute façon Internet Explorer n'autorise que 5 niveaux de zoom ?

Illisible
Petit
Normal
Plus grand
Très grand

Aussi bien en passant par le menu qui va bien ou avec CTRL + Molette de la souris.

Oui tu as raison mais avec mon site seul la taille "Normal" utilisable, alors que avec un site comme openweb, toutes les 5 tailles sont utilisables!
Si j'utilise des tailles comme small, x-small et compagnie sa marche correctement! mais elle ne sont pas assez précise pour mon site !
Salut ...

Dans les unités relatives pour les tailles de polices, tu peux aussi utiliser les '%' ... Cela facilitera peut-être tes réglages Smiley cligne

Par ailleurs, j'ai l'impression qu'en règle générale, IE affiche un texte plus petit que Firefox, en tous cas dès qu'on modifie les tailles par défaut. J'ai en tous cas tendance à définir des tailles de police un peu plus élevées, via des commentaires conditionnels (je ne sais pas si c'est recommandale, mais bon ..)
mpop a écrit :
Mettre un "font-size: 62.5%;" pour le body, effectivement ça doit bien donner l'équivalence 1em=10px... pour la personne qui a écrit cette bêtise. C'est à dire que sur son ordinateur, avec son écran, sa résolution d'écran, son système d'exploitation, ses règlages du système d'exploitation, son navigateur, ses réglages du navigateur, et enfin en taille de texte 100% (ou normal), ça devait bien donner 1em=10px.


Hm, j'aurais peut-être dû lire l'article d'abord...
Donc la personne en question est Richard Ruttler, qui se base sur le fait que dans les navigateurs modernes, la taille du texte par défaut est 16px. Et 16 × 0,625 = 10. OK.

EDIT: la partie suivante a subi quelques modifications suite à une erreur de ma part...

Seulement voilà, j'ai un navigateur moderne (Firefox), et un écran moderne (en 1280×1024) et plat que je regarde d'assez loin (une bonne longueur de bras). Du coup, si je garde une taille par défaut à 16px, j'ai aussi configuré une taille de police minimale à 12px. Toute texte avec une taille moindre sera affiché en 12px.

"R. Ruttler" a écrit :
Nous obtenons un document où le texte des deux colonnes (navigation et side-bar) est rendu en 10px, celui du contenu en 12px et celui du pied de page en 9px.

Pour ma part, j'obtiendrai un document où le texte des deux colonnes est rendu en 12px, celui du contenu en 12px, et celui du pied de page en 12px. Voilà déjà une petite nuance...

Laurent Denis (le traducteur de ce texte) émet d'ailleurs plusieurs réserves.
– Sur le principe, elle modifie brutalement les préférences de l'utilisateur (avec le font-size:62.5% appliqué au body. Est-il justifié de chercher la précision au pixel près ?
– Tout repose sur une supposition : les 16 pixels du texte « medium ». Il suffit que l'utilisateur ait une autre configuration pour aboutir à un texte trop petit. Il est prudent de s'en tenir à un body {font-size: } initial plus grand (pour ma part, j'utilise 80%) ;
– On aboutit à des agrandissements et des rétrécissements excessifs pour les font-size les plus grands et les plus petits, lorsque l'utilisateur a fixé lui-même un font-size en pourcentage dans sa propre feuille de style utilisateur. Il est donc préférable de s'en tenir à une fourchette d'ems assez serrée..

Mais je n'y vois pas trace de notion de taille minimale. Serait-ce une fonctionnalité "récente" de Firefox ?
Modifié par mpop (19 Mar 2006 - 17:03)
mpop a écrit :
Si on veut du 10px, la seule solution c'est de demander "10px". Ça marche très bien.


C'est vrai, mais il faut être conscient du fait que le visiteur ne pourra pas redimensionner la partie du texte concernée. Ca peut ne pas poser de gros problèmes dans certains cas, mais à ne pas utiliser systématiquement ni sans discernement.
Hm, fausse manip, j'ai effacé un de mes messages en le remplaçant par un autre (qui commente le message disparu...).

EDIT : en plus, j'écris des bêtises Smiley sweatdrop

J'ai bien un réglage avec une taille du texte par défaut à 16px (ce qui est plutôt gros) et une taille minimale de police à 12px (ce qui me garantit une lecture agréable sur un texte en Verdana... pour du Times à 12px, il m'arrive souvent d'augmenter la taille du texte avant de me lancer dans une lecture).
Modifié par mpop (19 Mar 2006 - 17:03)
Je ne sais pas pourquoi l'unité em pose problème ... car à partir du moment où tu colles ton body à 62.5% et que tu adaptes toutes tes font-size en fonction, qu'est ce qui peut poser problème ?

Merci
statvg a écrit :
Je ne sais pas pourquoi l'unité em pose problème ... car à partir du moment où tu colles ton body à 62.5% et que tu adaptes toutes tes font-size en fonction, qu'est ce qui peut poser problème ?


Il faudrait faire des tests, mais il me semble que la cascade CSS fait que les valeurs se multiplient entre elles.

<body>
	<div id="contenu">
		<p>...</p>
	</div>
</body>

Et CSS :
#body {font-size: 62,5%;}
#contenu {font-size: 1.2em;}
#contenu p {font-size: 0.9em;

Au final on a un paragraphe en : 0.625×1.2×0.9 = 0.675em

Maintenant, il s'agit de savoir comment le navigateur réagit quand on demande un agrandissement ou une réduction du texte. S'il modifie uniquement la "taille du texte par défaut", tout va bien. Par contre, s'il applique un coefficient multiplicateur à la taille du texte par défaut ET à body, par exemple, ou bien à chaque élément auquel on a précisé une taille spécifique, bonjour les dégâts (démultiplication de l'effet...).

Mais ça me semblerait bizarre que les développeurs d'IE aient été aussi stupides.

Maintenant, si on jette un coup d'oeil au site d'Openweb, on voit que leur feuille de style utilise les valeurs génériques "small" et "medium" (principalement). Ces valeurs sont héritées, par contre il me semble que small + small = toujours small (et pas x-small). À chaque fois qu'on donnerait une telle valeur, on remettrait donc le calcul des valeurs héritées à zéro. Je ne sais toujours pas pourquoi c'est important (sauf si une stupidité comme suggéré ci-dessus est réellement implémentée dans certains navigateurs !), mais ça a l'air de l'être.

Du coup, une bonne pratique pourrait être de se limiter à des "small", "medium" (et peut-être "large") pour tous les blocs conteneurs (body, les div appelées à contenir pas mal de contenu, les tableaux, les blockquote, etc.). On n'utiliserais alors les em (ou les pourcentages, d'ailleurs) qu'au stade final, pour le dernier élément.
Bonsoir,

"body à 62.5%" => taille de base des caractères à 62.5% de la taille précisée par l'utilisateur dans sa configuration.

Par la suite : "1em de 62.5%" = toujours 62.5% de la taille précisée par l'utilisateur dans sa configuration, ce qui peut être illisible pour l'utilisateur en question. Le risque est évidemment plus grand dès qu'on descend en dessous d'un em, et n'est compensé que si on monte très au-dessus des valeurs d'em couramment utilisées.

Ne pas descendre en dessous de 80% quand on utilise cette technique. Et ne pas faire dépendre une mise en page de la taille réelle des caractères.
Modifié par Laurent Denis (19 Mar 2006 - 19:05)
Laurent, quand tu dis, ne pas descendre en dessous de 80%, je suppose que tu parles de body à 80%.. ?

Appelle-t-on des valeurs d'em couramment utilisées ? de 1em à 2,3 em ?

Je ne comprends pas le sens de :"Et ne pas faire dépendre une mise en page de la taille réelle des caractères. ", c'est quoi la taille réelle des caractères ?

Merci Smiley sweatdrop
Bug dans IE !

Bon, là je crois que je suis clair. Après une petite série de tests, j'ai remarqué un comportement étrange d'IE avec les tailles de police en EM.

body {font-family: Verdana; font-size: large;}
p#test {font-size: .8em;}

Ma page de test comportait deux paragraphes, le premier sans attributs particuliers, le deuxième portant l'identifiant "test".
On est en Verdana pour avoir la même police dans les deux navigateurs (IE6 et Firefox), et en font-size: large; pour y voir quelque chose en taille du texte par défaut.

Avec le code ci-dessus, on peut s'attendre à ce que le deuxième paragraphe ait une taille de caractère représentant 80% de la taille de caractère du paragraphe précédent (qui hérite de body).
– dans Firefox, c'est le comportement qu'on obtient quel que soit l'agrandissement.
– dans IE, c'est le comportement que l'on obtient en agrandissement normal. En réduisant la taille, je n'ai pas constaté d'anomalie (mais c'est pas évident à voir quand c'est petit). Par contre en l'agrandissant :
* en "grand", le deuxième paragraphe fait presque la taille du premier (comme s'il était à 95% plutôt qu'à 80%).
* en "très grand", le deuxième paragraphe est plus grand que le premier !!!

Même problème d'agrandissement exponentielle si on fixe une taille de caractères pour body en EM.
Par contre, si on écrit body {font-size: 140%;} (plutôt que 1.4em[/em], on obtient le comportement attendu !

Même chose avec le code suivant, qui donne le comportement attendu :
body {font-family: Verdana; font-size: 1.4em;}
p {font-size: 1em;}
p#test2 {font-size: .8em;}

Le deuxième paragraphe fera bien toujours 80% de la taille du premier.
Ou encore celui-ci :

body {font-family: Verdana; font-size: 1.4em;}
p#test2 {font-size: 80%;}


Seul la première formulation pose donc problème (avec IE uniquement, mais je n'ai pas testé avec Opera, Konqueror ou Safari). Quelle est sa caractéristique ?
Elle se fonde sur l'héritage des valeurs en EM données pour le bloc parent, et la multiplication des valeurs des différents éléments allant de l'élément final à son ancètre le plus lointain (html).
Cette multiplication a l'air d'être bonne en taille de texte normale, mais l'agrandissement (et peut-être aussi la réduction ? mais je ne l'ai pas clairement constatée) fausse la donne d'une manière que je ne m'explique pas.

[b]Solutions ?
– n'utiliser que des valeurs en pourcentages (un inconvénient à cette méthode ?) ?
– en em, préciser la taille du texte pour chaque élément de l'imbrication, même si c'est 1em ?

--------------------------
Notes :
– il est possible que le phénomène soit identique pour la diminution du texte (diminution excessive du deuxième paragraphe), mais le faible jeu disponible pour les niveaux de réduction n'aide pas à le constater. Mais j'ai l'impression qu'au niveau le plus bas, le deuxième paragraphe ne fait plus que 50% du premier (en hauteur de texte, pas en hauteur générale), au lieu des 80% attendus.
– utiliser une classe plutôt qu'un identifiant ne change rien.
– passer par une div (font-size: .8em;) contenant le deuxième paragraphe donne exactement le même résultat, mis à part que le correctif p {font-size: 1em;} ne fonctionne plus.
– le problème se pose quelle que soit la valeur en EM du deuxième paragraphe (ou du bloc le contenant) : essayez avec 1em, c'est saisissant !

------------

Quelqu'un aurait des éclaircissements à apporter ?

[/i]
statvg a écrit :
Je ne comprends pas le sens de :"Et ne pas faire dépendre une mise en page de la taille réelle des caractères. ", c'est quoi la taille réelle des caractères ?

Je ne sais pas trop, mais si tu enlèves l'adjectif "réelle", ça devient plus limpide.

La taille des caractères est importante pour donner, comparativement, une importance plus ou moins grande à des textes différents, par exemple. Signaler un titre. Mettre en évidence la hiérarchie des titres.

Maintenant s'il faut, pour que ta mise en page ne s'effondre pas, quel tel bout de texte ait une taille entre 11,8 et 13,2px, le tout dans la police que tu as choisi (et dont l'internaute ne dispose pas forcément...), il y a un problème.
statvg a écrit :
alors j'ai tenté ça :
<head>
<style type="text/css">
<!--
body {font-size:62.5%;}
.1{font-size:1em;}
.2{font-size:1.2em;}
.3{font-size:1.4em;}
.4{font-size:2em;}
-->
</style>
</head>

<body>
<p class="1">paragraphe</p>
<p class="2">paragraphe</p>
<p class="3">paragraphe</p>
<p class="4">paragraphe</p>
</body>
</html>

Mais j'ai le même résultat partout Smiley sweatdrop

Les noms de classes ou d'identifiants ne peuvent pas commencer par un chiffre, à ce qu'il me semble. En tout cas, ça ne marche pas. Mais avec "p1", "p2", "p3" et "p4", ça marche.
ah ... bon, c'est noté, je ne savais pas que les chiffres étaient interdits.
Je ferai demain les tests que tu as effectué mpop.

A+ Smiley smile
Après une nouvelle série de tests, je confirme qu'il s'agit bien d'un bug d'Internet Explorer, constaté avec IE 5 (win) et IE 6 (win).

J'ai fait une page qui expose ce problème, avec plusieurs pages de test attenantes. Et je propose une solution, dans la foulée.

C'est par là :
http://www.covertprestige.info/ressources

(Tests HTML et CSS > Bug avec les unités relatives em et Internet Explorer)

EDIT: Bug déjà répertorié, mais souvent oublié car les développeurs web travaillant avec Firefox, Safari ou Opera, ils ne testent que rarement le redimensionnement des polices dans IE.
http://www.gunlaug.no/contents/wd_additions_13.html
Modifié par mpop (20 Mar 2006 - 13:23)
En cherchant beaucoup et j'ai même un peu inventé Smiley cligne
Voila ce que j'obtient :

*,table,input{
font-size:100%;
}

Alors pourquoi? Car IE < 6 calcule les "em" avec une valeur parente, hors si c'est aussi des em ca ne marche pas donc on spécifie une valeur en % à un élément avant le body.
Le faite de mettre * corrige le problème de redimentionage du texte avec IE < 7
Et table et input c'est pour IE 4 qui ne connait pas le * qui est du CSS 2.
Modifié par Sined_style (07 May 2006 - 17:48)
Sujet clos
Aller à