©
. Document créé le 4 avril 2007 , mis à jour le 26 avril 2007.Les cons ça ose tout. C'est même àça qu'on les reconnaît. Michel Audiard
Accueil du site > Astuces > CSS > Interprétation de em et ex
L’interprétation CSS par les différents navigateurs est parfois surprenante.
ex par exemple, se veut être la hauteur du ’x’ en minuscule (source : selfhtml).
On peut donc se baser sur cette hypothèse pour définir la largeur d’un bloc, en espérant que cette hauteur de minuscule corresponde aussi à la largeur moyenne d’un caractère (ce qui n’est pas le cas, mais en HTML, il faut bien faire un compromis).
Mais...
Un style appliqué à un bloc de texte :
body {
font-size: 70%;
}
.bloc-de-texte {
width:16ex;
margin: 0 0 0.5em;
font-family: "Times New Roman", Times, serif;
font-size: 140%;
letter-spacing: 3pt;
border-top:4px solid navy;
line-height: 110%;
font-variant: small-caps;
overflow: hidden;
}
donne sur IE 7 :
et sur Firefox :
width:16ex ; règle la largeur du bloc à 16 caractères.
overflow : hidden ; masque le débordement.
Le reste du code CSS de cet exemple a peu d’importance ici.
Le texte original est "Rubriques", avec un ’s’.
En corrigeant le code donné ci-dessus par :
width:9em;
(remplacement de la valeur ex par em) le résultat est presque identique sur les deux navigateurs.
Plus un soucis de chasse de caractères, semble t-il.
Pour mémo, ex : hauteur du x minuscule, em : hauteur de la police.
Les forums sont fermés.