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

(À 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:

[Le ex unité est égale à la x-hauteur de la disponible pour la première fois 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 pourrait être étiqueté subjectif, mais je vais laisser cette décision à plus de vécu tant de livres que moi.)

InformationsquelleAutor Joel | 2009-05-28
  1. 107

    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:

    Quelle est la valeur de la propriété css


    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.

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

    • juste pour ajouter, c'est la hauteur de l'équivalent de l'aide de la " em " unité pour la largeur
    • un moyen beaucoup plus simple de le dire, merci.
    • Donc, est-2ex la hauteur d'une lettre majuscule, alors?
    • pas nécessairement. Qui dépend de la police de caractères. Certaines polices ont minuscules qui sont près de la moitié de la majuscule' hauteur; certains ont la même hauteur dans les deux cas, et partout entre les deux.
    • Je reconnais la relation entre les em et ex. Mais puisque le ratio d'aspect de polices est fixe, je ne vois pas la valeur ajoutée. Peut-être un suivi sur la question "quand faut-ex être utilisé à la place de l'em?" Pour moi, ils semblent interchangeables avec les " ex " juste ajouter un autre niveau de complexité. +1 pour la bonne description.
    • Quel est le rapport entre la largeur de la m et la hauteur de x pour une police donnée? Même si elle est fixe, il peut éventuellement être très difficile à calculer, car chaque police de caractères différente, et l'arbitraire le rapport m et x de. Donc lors de la conception des éléments relatifs au type, au lieu d'avoir à déterminer le rapport vous-même, vous pouvez compter sur le x-hauteur de garder les choses en proportion.
    • Un autre assez ésotérique point est que selon Mozilla Gecko peut items pour l'échelle à l'aide de exe un peu plus précise que celles utilisant de l'ems. La valeur par défaut de "non-style" de la taille d'un em est 10.06667 px alors que la taille d'un ex est 6px. Cela signifie que lors de la mise à l'échelle ems Firefox a la ronde partielle pixels plus souvent que lors de l'extension exe.
    • Bien que généralement pas correcte, il est possible d'imaginer que 2ex est d'environ la même taille que cadratin (1 em (bien que la hauteur d'une lettre majuscule serait généralement un peu moins de cadratin (1 em). CSS, même les états "où il est impossible ou difficile de déterminer la hauteur d'x, une valeur de 0.5 em doit être pris en compte."
    • Contrairement à l'impression de la typographie, dans le CSS, le em unité ne pas mesurer la largeur – à la mesure de la taille de la police. 1 em est calculée font-size valeur et font-size précise “la hauteur souhaitée de glyphes”. Donc, à la fois em et ex mesurer la hauteur. (ch, cependant, n'mesurer la largeur.)
    • Eh bien, ch était une nouvelle révélation! Il a été autour depuis si longtemps, mais je n'ai même pas le savoir...
    • RexM: pourrais-je vous suggérer de simplement revenir à votre réponse à votre première version, parce que Rory O'Kane du commentaire ci-dessus est tout à fait correct! La seule chose que l'on pourrait ajouter à cela est que em et ex sont par rapport à l'élément parent est calculé de la taille de police, ou de celle du parent.parent, etc. tout le chemin jusqu'à l'élément racine html (à qui rem unités de la famille) et si c'est undefined, puis nous nous retrouvons avec le navigateur par défaut (généralement 16px/12pt) peut-être @JonathanFingland pourrait supprimer ce commentaire (à ne pas confondre les futurs lecteurs)?

    InformationsquelleAutor Rex M
  2. 15

    Pour répondre à la question, et une question sur l'utilisation de l'exposant et indice. Exemple:

    sup {
    font-size: 75%;
    height: 0;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    bottom: 1ex;
}
    • Je ne pense pas que vraiment permet d'expliquer ce qu'est un "ex" est, bien.
    • La question est "Quelle est la valeur 'ex' unité de prêter à la conception web?". Pas "qu'est ce qu'un ex de l'unité?" Joel fait un très bon travail de définition d'un ex de l'unité dans la question d'origine. Je suis en fournissant un exemple pratique de la façon dont vous pouvez l'utiliser pour la position d'un exposant.
    • Un bon exemple pratique qui répond directement à la question. Bien fait.
    InformationsquelleAutor jbs
  3. 2

    Une autre chose à considérer ici est de savoir comment votre page échelles lorsqu'un utilisateur de l'onduleur ou les bas de leur taille de la police (peut-être à l'aide de ctrl+molette de la souris (windows)).

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

    et ex avec
    padding-bottom: 2 ex;
    padding-top: 2 ex;

    Ainsi, à l'aide d'une unité verticale de mesure pour une verticale de mise à l'échelle de la propriété et l'horizontale de l'unité de mesure pour l'horizontale avec une mise à l'échelle de la propriété.

    • Les deux em et ex sont des unités verticales, puisqu'ils sont définis comme la hauteur de la majuscule "M" et "x" en minuscule, respectivement. Ils peuvent être utilisés pour le vertical et horizontal de la longueur.
    InformationsquelleAutor
  4. 0

    La valeur de en avoir dans le CSS, si c'est ce que vous êtes vraiment à la demande, est exactement la même que la valeur d'avoir l'appareil lui.

    Il vous permet de définir les polices de relative tailles.

    Vous ne savez pas ce que ma base taille de la police est. Donc, une bonne stratégie pour la conception web est de définir des tailles de police qui sont relative plutôt qu'absolue, et l'équivalent de "double votre taille normale" ou "un peu plus petite que votre taille normale" plutôt que d'une taille fixe comme "dix pixels".

    • Je suis d'accord avec cela. Mais n'est-ce pas l'em spec assez pour cela et plus fiable?
    • oui, mais que pour les largeurs; pour des hauteurs, la ex semble être l'équivalent.
    • Incorrect. Dans le CSS un em est la hauteur d'une police (environ), pas le largeur. Imprimé typographie, l'idée d'un em est venu à partir de la largeur d'une majuscule M. Mais CSS raffiné em. Voir Wikipédia.
    • Si vous voulez largeur, utilisez la ch unité comme mentionné dans une autre réponse.
    InformationsquelleAutor AmbroseChapel
  5. 0

    Noter que, des termes comme "single/double interligne" veut dire en fait le décalage entre deux lignes adjacentes, mesurée 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 qui est proportionnelle à la "lignes", l'utilisation de l'em. Utilisez uniquement des ex si vous voulez la hauteur de la lettre minuscule, qui est, j'ose le dire, beaucoup plus rare exemple.

    InformationsquelleAutor Yì Yáng