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

Question

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

Aujourd'hui, dans un moment d'ennui, j'ai commencé à inspecter Gmails DOM (oui, j'ai été très ennuyé).

Tout avait l'air assez simple jusqu'à ce que j'ai remarqué intéressant de spécification sur les largeurs de certains éléments. L'illustre Googlites avait spécifié un numéro de la table de cols, à l'aide de la rare " ex " de l'unité.

width: 22ex;

Au début, j'étais perplexe ("qu'est ce qu'un "ex"?"), puis il revint à moi: je crois me souvenir de quelque chose y a quelques années, lorsque j'ai d'abord été l'apprentissage de CSS. À partir du CSS3 spec:

[L' ex unité est égale à la x-hauteur de la première disposition de la police. La hauteur d'x est appelé ainsi parce qu'il est souvent égale à la hauteur de la lettre minuscule "x". Cependant, un " ex " est défini, même pour les polices qui ne contiennent pas d'un "x".

Bien et bon. Mais je ne l'ai jamais vu utilisé avant (beaucoup moins utilisé moi-même). J'ai utiliser ems assez souvent, et d'apprécier leur valeur, mais pourquoi les "ex"? Il semble beaucoup moins standard une mesure que l'em, et bien moins utile.

L'un des quelques pages que j'ai trouvé discuter de ce sujet est Stephen Poley est http://www.xs4all.nl/~sbpoley/webmatters/emex.html. Stephen fait de bons points, cependant, son analyse semble pas concluant pour moi.

Donc ma question est: Quelle est la valeur 'ex' unité de prêter à la conception web?

(Cette question peut être étiqueté subjectif, mais je vais laisser cette décision à plus de vécu tant de livres que moi.)

Answer 1

Il est utile lorsque vous voulez la taille de quelque chose par rapport à la hauteur de votre texte en lettres minuscules. Par exemple, imaginez que vous travaillez sur un dessin comme ceci:

Dans la typographie de la dimension de la conception, de la hauteur des lettres est important de relations spatiales pour le reste des éléments. Les lignes de la source de l'image ci-dessus sont destinées à aider à préciser la hauteur du texte, mais ils montrent aussi où les lignes directrices pourraient être si la conception autour de ce texte.

Jonathan a souligné dans les commentaires, ex est tout simplement la hauteur de la version de em (largeur).

Answer 2

Notez que les termes tels que "interligne simple / double" désignent en réalité le décalage entre deux lignes adjacentes, mesuré par em . Donc, "double interligne" signifie que chaque ligne a une hauteur de 2 cm .

Par conséquent, si vous souhaitez spécifier une distance verticale proportionnelle à "lignes", utilisez em. Utilisez uniquement ex si vous souhaitez connaître la hauteur réelle des lettres minuscules, ce qui est, j’ose dire, un cas beaucoup plus rare.

Answer 3

Le fait de l' avoir dans les spécifications CSS, si c'est ce que vous demandez en réalité, est exactement identique à celui d'avoir l'unité em.

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

Vous ne savez pas quelle est la taille de ma police de base. Donc, une bonne stratégie pour la conception Web consiste à 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 que d'une taille fixe comme "dix pixels".