Interprétation de em et ex

© Paladin. Document créé le 4 avril 2007 , mis à jour le 26 avril 2007.

Science sans conscience n’est que ruine de l’âme. François Rabelais

Accueil du site > Astuces > CSS > Interprétation de em et ex

CSS / Firefox 2, IE 7

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.

Plussoyez !

Les forums sont fermés.