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

Question

(que no debe confundirse con Xunit, una biblioteca de prueba de la unidad .Net popular.)

hoy en un ataque de aburrimiento empecé inspección de mensajes de Gmail DOM (sí, yo era muy aburrido).

Todo parecía bastante sencillo hasta que noté una especificación interesante sobre el ancho de ciertos elementos. Los ilustres googlitas habían especificado una serie de columnas usando la rara unidad 'ex'.

width: 22ex; 

Al principio estaba confundido ("¿Qué es un 'ex'"), luego se volvió a mí: Me parece recordar algo de años atrás, cuando primero estaba aprendiendo acerca de CSS. From the CSS3 spec:

[La unidad ex es] igual a la altura de la x se utiliza de la first available font. 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 las fuentes que no contienen una "x".

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

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

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

(Esta pregunta podría ser etiquetada subjetiva, pero voy a dejar esa decisión a SO'ers con más experiencia que yo.)

Answer 1

Es útil cuando se desea tamaño algo en relación a la altura de su letras minúsculas del texto. Por ejemplo, imagina trabajando en un diseño de este modo:

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

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

Answer 2

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

le permite configurar las fuentes de relativos tamaños.

No sabe cuál es el tamaño de mi fuente base. Entonces, una buena estrategia para el diseño web es establecer tamaños de fuente que sean relativos, en lugar de absolutos; el equivalente a "duplicar 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".

Answer 3

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

He usado em con .. relleno-izquierda: 2 em; relleno a la derecha: 2 em;

y ex con almohadilla de fondo: 2 ex; relleno superior: 2 ex;

Utilizando una unidad de medida vertical para una propiedad de escala vertical y una unidad de medida horizontal para una propiedad de escala horizontal.

Answer 4

Tenga en cuenta que términos como "espaciado de línea simple/doble" significan realmente la compensación entre dos líneas adyacentes, medida por en. Por lo tanto, "espaciado de doble línea" significa que cada línea tiene una altura de 2 em.

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

Answer 5

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