Quelle est la valeur de l'unité css 'ex'?

87

(À ne pas confondre avec Xunit , une bibliothèque de tests unitaires .Net populaire.)

Aujourd'hui, dans un accès d'ennui, j'ai commencé à inspecter Gmails DOM (oui, je m'ennuyais beaucoup).

Tout semblait assez simple jusqu'à ce que je remarque une spécification intéressante sur la largeur de certains éléments. Les illustres Googlites avaient spécifié un certain nombre de colonnes de table en utilisant l'unité rare «ex».

width: 22ex;

Au début, j'étais perplexe ("qu'est-ce qu'un 'ex'?"), Puis cela m'est revenu: il me semble que je me souviens de quelque chose d'il y a des années lorsque j'apprenais le CSS pour la première fois. De la spécification CSS3 :

[L' unité ex est] égale à la hauteur x utilisée de la première police disponible . La hauteur x est ainsi appelée car elle est souvent égale à la hauteur du «x» minuscule. Cependant, un «ex» est défini même pour les polices qui ne contiennent pas de «x».

Bel et bien. Mais je ne l'ai jamais vu utilisé auparavant (et encore moins utilisé moi-même). J'utilise les ems assez couramment, et j'apprécie leur valeur, mais pourquoi le "ex"? Cela semble une mesure beaucoup moins standard que le em, et beaucoup moins utile.

L'une des rares pages que j'ai trouvées sur ce sujet est http://www.xs4all.nl/~sbpoley/webmatters/emex.html de Stephen Poley . Stephen fait valoir de bons points, cependant, sa discussion ne me paraît pas concluante.

Ma question est donc la suivante: quelle valeur l'unité «ex» prête-t-elle à la conception Web?

(Cette question pourrait être qualifiée de subjective, mais je laisserai cette décision à des SO'ers plus expérimentés que moi.)

css specifications units-of-measurement Joël
la source

Réponses:

124

Il est utile lorsque vous souhaitez dimensionner quelque chose par rapport à la hauteur des lettres minuscules de votre texte. Par exemple, imaginez travailler sur un design comme celui-ci:

texte alternatif


Dans la dimension typographique du design, la hauteur des lettres a d'importantes relations spatiales avec le reste des éléments. Les lignes de l'image source ci-dessus sont destinées à aider à indiquer la hauteur x du texte, mais elles montrent également où se trouveraient les lignes directrices en cas de conception autour de ce texte.

Comme Jonathan l'a souligné dans les commentaires, ex est simplement la version en hauteur de em (width).

Rex M
la source
29
juste pour ajouter, c'est l'équivalent de hauteur d'utiliser l'unité 'em' pour la largeur
Jonathan Fingland
3
@Joel Quel est le rapport entre la largeur de m et la hauteur de x pour une police donnée? Même si elle est fixe, elle peut être potentiellement très difficile à calculer, car chaque police a un rapport différent et arbitraire entre son m et son x. Ainsi, lorsque vous concevez des éléments qui devraient être relatifs au type, au lieu d'avoir à déterminer vous-même le rapport, vous pouvez vous fier à la hauteur x pour garder les choses en proportion.
Rex M
2
Un autre point assez ésotérique est que selon Mozilla, Gecko peut mettre à l'échelle des éléments en utilisant des ex un peu plus précisément que ceux utilisant des ems. La taille par défaut "non stylisée" d'un em est 10,06667px tandis que la taille d'un ex est de 6px. Cela signifie que lors de la mise à l'échelle des ems, Firefox doit arrondir les pixels partiels plus souvent que lors de la mise à l'échelle des ex.
benrifkah du
1
Bien que cela ne soit généralement pas correct, il est valable d'imaginer que 2ex a à peu près la même taille que 1em (bien que la hauteur d'une lettre majuscule soit généralement un peu inférieure à 1em). La spécification CSS indique même «là où il est impossible ou peu pratique de déterminer la hauteur x, une valeur de 0,5em doit être supposée».
natevw
20
@JonathanFingland @RexM Contrairement à la typographie imprimée, en CSS, l' emunité ne mesure pas une largeur - elle mesure la hauteur de la police. 1 emest la font-sizevaleur calculée et font-sizespécifie «la hauteur souhaitée des glyphes» . Alors les deux emet exmesurent une hauteur. ( chcependant, mesure une largeur.)
Rory O'Kane
20

Pour répondre à la question, une utilisation est avec exposant et indice. Exemple:

sup {
    font-size: 75%;
    height: 0;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    bottom: 1ex;
}
jbs
la source
1
Je ne pense pas que cela aide vraiment à expliquer ce qu'est un «ex», cependant.
duskwuff -inactif-
12
La question est "Quelle valeur l'unité« ex »prête-t-elle à la conception Web?". Pas "qu'est-ce qu'une ancienne unité?" Joel fait un très bon travail de définition d'une unité ex dans la question originale. Je donne un exemple pratique de la façon dont vous pouvez l'utiliser pour positionner un exposant.
jbs
1
Bon exemple pratique qui répond directement à la question. Bien joué.
Basil Bourque
2

Une autre chose à considérer ici est la mise à l'échelle de votre page lorsqu'un utilisateur augmente ou réduit la taille de sa police (peut-être en utilisant ctrl + molette de la souris (Windows)).

Je l'ai utilisé avec .. padding-left: 2 em; padding-right: 2 em;

et ex avec rembourrage en bas: 2 ex; rembourrage haut: 2 ex;

Ainsi, en utilisant une unité de mesure verticale pour une propriété de mise à l'échelle verticale et une unité de mesure horizontale pour une propriété de mise à l'échelle horizontale.


la source
5
Les deux em et ex sont des unités verticales, car ils sont définis comme la hauteur des majuscules "M" et des minuscules "x" respectivement. Ils peuvent tous deux être utilisés pour des longueurs verticales et horizontales.
JacquesB
Pour ajouter à cela, chest une unité horizontale mesurant la largeur du chiffre zéro ("0").
Matt F.
1

La valeur de l' avoir dans la spécification CSS, si c'est ce que vous demandez vraiment, est exactement la même que la valeur d'avoir l'unité em.

Il vous permet de définir les polices sur des tailles relatives .

Vous ne savez pas quelle est ma taille de police de base. Une bonne stratégie pour la conception Web consiste donc à définir des tailles de police relatives plutôt qu'absolues; l'équivalent de "doubler votre taille normale" ou "un peu plus petit que votre taille normale" plutôt qu'une taille fixe comme "dix pixels".

AmbroseChapelle
la source
Je suis d'accord avec ça. Mais la spécification em n'est-elle pas suffisante pour cela et plus fiable?
Joel
@JoelPotter oui, mais uniquement pour les largeurs; pour les hauteurs, le exsemble être l'équivalent.
ANeves pense que SE est diabolique
5
@ANeves incorrect. En CSS, un em est la hauteur d'une police (approximativement), pas la largeur . Dans la typographie imprimée, l'idée d'un em venait de la largeur d'une majuscule M. Mais CSS a raffiné em. Voir Wikipedia .
Basil Bourque
2
Si vous voulez de la largeur, utilisez l' chunité comme mentionné sur une autre réponse.
Basil Bourque
1

Notez que des termes comme "interligne simple / double" signifient en fait le décalage entre deux lignes adjacentes, mesuré par em . Donc "double interligne" signifie que chaque ligne a une hauteur de 2 em .

Par conséquent, si vous souhaitez spécifier une distance verticale proportionnelle aux "lignes", utilisez em. N'utilisez ex que si vous voulez la hauteur réelle de la lettre minuscule, ce qui est, j'ose dire, une instance beaucoup plus rare.

MISE À JOUR: La norme Web permet au navigateur d'utiliser 0,5em comme ex ou dériver de la police.

Cependant, il n'y a aucun moyen d'incorporer de manière fiable des informations "x-height" dans une police (OpenType ou webfont).

Par conséquent, la première possibilité rend l'ex-unité redondante et la seconde ne dispose d'aucun moyen fiable pour se produire. Et le fait que l'un ou l'autre soit possible le rend encore moins fiable.

Ainsi je plaide pour le manque de valeur de l'ex-unité.

Yì Yáng
la source
Cette question demande spécifiquement sa valeur, pas sa signification.
Matt F.