¿Cuál es el valor de la unidad css 'ex'?

87

(No debe confundirse con Xunit , una popular biblioteca de pruebas de unidades .Net).

Hoy, en un ataque de aburrimiento, comencé a inspeccionar DOM de Gmails (sí, estaba muy aburrido).

Todo parecía bastante sencillo hasta que noté una especificación interesante sobre los anchos de ciertos elementos. Los ilustres Googlites habían especificado una serie de cols de mesa utilizando la rara unidad 'ex'.

width: 22ex;

Al principio estaba perplejo ("¿qué es un 'ex'?"), Luego me acordé: parece que recuerdo algo de hace años, cuando estaba aprendiendo sobre CSS. De la especificación CSS3 :

[La unidad ex es] igual a la altura x utilizada de la primera fuente disponible . La altura x se llama así porque a menudo es igual a la altura de la "x" minúscula. Sin embargo, se define un 'ex' incluso para fuentes que no contienen una "x".

Bien y bueno. Pero nunca lo había visto usar antes (y mucho menos lo usé yo mismo). Utilizo ems con bastante frecuencia y aprecio su valor, pero ¿por qué el "ex"? Parece una medida mucho menos estándar que la em, y mucho menos útil.

Una de las pocas páginas que encontré discutiendo este tema es http://www.xs4all.nl/~sbpoley/webmatters/emex.html de Stephen Poley . Stephen hace buenos puntos, sin embargo, su discusión no me parece concluyente.

Entonces mi pregunta es: ¿Qué valor le da la unidad 'ex' al diseño web?

(Esta pregunta podría etiquetarse como subjetiva, pero dejaré esa decisión a SO'ers más experimentados que yo).

css specifications units-of-measurement

— Joel
fuente

124

Es útil cuando desea ajustar el tamaño de algo en relación con la altura de las letras minúsculas de su texto. Por ejemplo, imagina trabajar en un diseño como este:

En la dimensión tipográfica del diseño, la altura de las letras tiene importantes relaciones espaciales con el resto de elementos. Las líneas en la imagen de origen anterior están destinadas a ayudar a señalar la altura x del texto, pero también muestran dónde estarían las pautas si se diseña alrededor de ese texto.

Como señaló Jonathan en los comentarios, ex es simplemente la versión de alto de em (ancho).

— Rex M
fuente

29

solo para agregar, es la altura equivalente a usar la unidad 'em' para el ancho

— Jonathan Fingland

3

@Joel ¿Cuál es la relación entre el ancho de my la altura de x para una fuente determinada? Aunque es fijo, potencialmente puede ser muy difícil de calcular, porque cada fuente tiene una relación diferente y arbitraria entre su my su x. Entonces, al diseñar elementos que deberían ser relativos al tipo, en lugar de tener que determinar la proporción usted mismo, puede confiar en la altura x para mantener las cosas en proporción.

— Rex M

2

Otro punto bastante esotérico es que, según Mozilla, Gecko puede escalar elementos usando exes con un poco más de precisión que aquellos que usan ems. El tamaño "sin estilo" predeterminado de un em es 10.06667px mientras que el tamaño de un ex es 6px. Esto significa que al escalar ems, Firefox tiene que redondear píxeles parciales con más frecuencia que al escalar ex.

— Benrifkah

1

Aunque en general no es correcto, es válido imaginar que 2ex tiene aproximadamente el mismo tamaño que 1em (aunque la altura de una letra mayúscula normalmente sería algo menor que 1em). La especificación CSS incluso establece "cuando es imposible o poco práctico determinar la altura x, se debe suponer un valor de 0.5em".

— natevw

20

@JonathanFingland @RexM diferencia en la tipografía de impresión, en el CSS, la emunidad no no medir un ancho - se mide la altura de la fuente. 1 emes el font-sizevalor calculado y font-sizeespecifica "la altura deseada de los glifos" . Así que ambos emy exmiden una altura. ( chSin embargo, mide un ancho.)

— Rory O'Kane

19

Para responder a la pregunta, un uso es con superíndice y subíndice. Ejemplo:

sup {
    font-size: 75%;
    height: 0;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    bottom: 1ex;
}

— jbs
fuente

1

Sin embargo, no creo que eso ayude a explicar qué es un "ex".

— anochecer-inactivo-

11

La pregunta es "¿Qué valor le da la unidad 'ex' al diseño web?". No "¿qué es una ex unidad?" Joel hace un muy buen trabajo al definir una ex unidad en la pregunta original. Estoy proporcionando un ejemplo práctico de cómo se puede utilizar para colocar un superíndice.

— jbs

1

Buen ejemplo práctico que responde directamente a la pregunta. Bien hecho.

— Basil Bourque

2

Otra cosa a considerar aquí es cómo se escala su página cuando un usuario sube o baja el tamaño de la fuente (tal vez usando ctrl + rueda del mouse (Windows)).

Los he usado con .. padding-left: 2 em; padding-right: 2 em;

y ex con fondo acolchado: 2 ex; acolchado superior: 2 ex;

Por lo tanto, se usa una unidad de medida vertical para una propiedad de escala vertical y una unidad de medida horizontal para una propiedad de escala horizontal.

5

Tanto em como ex son unidades verticales, ya que se definen como la altura de la "M" mayúscula y la "x" minúscula, respectivamente. Ambos se pueden utilizar para longitudes verticales y horizontales.

— JacquesB

Para agregar a esto, ches una unidad horizontal que mide el ancho del número cero ("0").

— Matt F.

1

El valor de tenerlo en la especificación CSS, si eso es lo que realmente está preguntando, es exactamente el mismo que el valor de tener la unidad em.

Le permite establecer fuentes en tamaños relativos .

No sabes cuál es mi tamaño de fuente base. Así que una buena estrategia para el diseño web es establecer tamaños de fuente que sean relativos, en lugar de absolutos; el equivalente a "el doble de su tamaño normal" o "un poco más pequeño que su tamaño normal" en lugar de un tamaño fijo como "diez píxeles".

— AmbrosioCapilla
fuente

Estoy de acuerdo con ésto. ¿Pero no es la especificación em suficiente para esto y más confiable?

— Joel

@JoelPotter sí, pero solo para anchos; para las alturas, exparece ser el equivalente.

— ANeves piensa que SE es malvado

5

@ANeves Incorrecto. En CSS, un em es la altura de una fuente (aproximadamente), no el ancho . En tipografía impresa, la idea de una em surgió del ancho de una mayúscula M. Pero CSS refinado em. Ver Wikipedia .

— Basil Bourque

2

Si desea ancho, use la chunidad como se menciona en otra respuesta.

— Basil Bourque

1

Tenga en cuenta que términos como "espaciado de línea simple / doble" en realidad significan el desplazamiento entre dos líneas adyacentes, medido por em . Entonces, "doble espacio entre líneas" significa que cada línea tiene una altura de 2 cm .

Por lo tanto, si desea especificar una distancia vertical que sea proporcional a las "líneas", use em. Solo use ex si desea la altura real de la letra minúscula, que es, me atrevo a decir, una instancia mucho más rara.

ACTUALIZACIÓN: El estándar web permite al navegador usar 0.5em como ex o derivar de la fuente.

Sin embargo, no hay forma de incrustar de manera confiable cualquier información de "altura x" en una fuente (OpenType o fuente web).

Por lo tanto, la primera posibilidad hace que la ex unidad sea redundante y la segunda carece de cualquier medio confiable para suceder. Y el hecho de que sea posible lo hace aún menos confiable.

Por tanto, defiendo la falta de valor de la ex-unidad.

— Yì Yáng
fuente

Esta pregunta pide específicamente su valor, no su significado.

— Matt F.