Interprétation de em et ex
© . Document créé le 4 avril 2007 , mis à jour le 26 avril 2007.
Ce qui est simple est toujours faux. Ce qui ne l'est pas est inutilisable. Paul Valéry (Mauvaises pensées)
Accueil du site > Astuces > CSS > Interprétation de em et ex
CSS / Firefox 2, IE 7
Mots-clés
- Personnaliser le curseur pour son site web
- Marges d’un bloc par défaut
- Changer de classe à la volée
- Centrer un bloc dans la page
- 4 colonnes en tableau sans tableau
- Contourner le code CSS avec des hacks
- Interprétation de em et ex
- Fond et image de fond (motif)
- Forcer font-weight pour IE 6
- Les propriétés CSS respectées sur PIE 2003
- Fontes Explorer, Firefox et PDA
- Dessiner un triangle en CSS
- Rappel sur le style
- Un éditeur de style
- Effets de style, filtres graphiques
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.
RSS 2.0
