Dans Firefox 3.6, IE7 et Opera 10 sur Windows, ce HTML a un comportement étrange :
<html><head></head>
<style>
span {
font-family: monospace; background-color: green;
}
span.b {
font-weight: bold;
}
</style>
<body>
<span>Text</span><span class="b">Text</span><span>Text</span>
</body>
</html>L'espace en gras au milieu est décalé d'un pixel vers le bas. Ce n'est pas le cas pour les autres polices.
Comment cela se fait-il ? Comment puis-je y remédier ?
Comment cela se fait-il ?
Excellente question. Je viens de passer une demi-heure à essayer de comprendre le pourquoi, en vain. La solution de Marcgg ne semble pas fonctionner non plus, le décalage est toujours là. Google ne donne rien. Cela ne semble se produire que sous Windows, non seulement dans les navigateurs que vous mentionnez, mais aussi dans Opera 9 et IE6. Non dans Firefox 2.0. C'est une énigme.
Comment puis-je y remédier ?
La seule solution qui a fonctionné jusqu'à présent pour moi est la suivante :
span {
font-family: Courier; background-color: green;
}
span.b {
font-weight: bold;
}C'est-à-dire en spécifiant Courier au lieu de monospace. Le rendu est cohérent dans tous les navigateurs que j'ai testés (IE6, Opera 9, FF 2.0 sous Windows 2000 ; Opera 10, FF 3 et Konqueror sous Ubuntu). Je ne sais toujours pas pourquoi.
Ce n'est qu'un effet d'optique. Prenez une capture d'écran et zoomez : vous verrez que la ligne de base du texte ne change pas du tout.
Le problème devrait se résoudre de lui-même si vous choisissez un contraste de couleur différent.
texte alt http://img690.imageshack.us/img690/421/opticaleffect.png
Le problème vient de la police "Courier New" qui est la police par défaut utilisée par la plupart des navigateurs Windows lorsque l'option "monospace" est demandée. Pour la variante en gras, la ligne de base est décalée :
<html><head></head>
<style>
span {
font-family: "Courier New"; background-color: green;
}
span.b {
font-weight: bold; vertical-align:top;
}
</style>
<body>
<span>Text</span><span class="b">Text</span><span>Text</span>
</body>
</html>Avec ce code, vous pouvez voir que le texte du milieu est décalé vers le haut (= décalage différent de la ligne de base) mais que la couleur d'arrière-plan est maintenant alignée correctement.
La solution consiste à demander la police "Courier" et à éviter la police "Courier New".
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
