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

(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).

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).

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;
}

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.

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".

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.