Line-height y vertical-align: cómo trabajan y se calcula la línea base del alineamiento en Css 30.4.15

Line-height y vertical-align: cómo trabajan y se calcula la línea base del alineamiento en Css

Las dos propiedades Css del título del artículo line-height y vertical-alignson sencillas y fáciles de usar. Pero creo que todos alguna vez nos hemos sorprendido de su "comportamiento" y hemos dicho algo como "pero qué pasa aquí". Especialmente si alguna vez has utilizado un fondo (ya sea una imagen o un gradiente css) para simular un rayado horizontal y ves que no acaba de acomodarse perfectamente el texto a su línea base.

Siempre toca andar retocando algún píxel arriba o abajo para lograr una alineación perfecta respecto a la línea base. Y sin embargo es el comportamiento lógico según la norma establecida

Cálculo del interlineado en Css

La sorpresa anterior se debe, creo yo, a que inicialmente nuestra lógica es la del impresor de imprenta. Sin embargo, la línea base de la alineación en la web (interlineado) difiere de la utilizada en medios impresos.

El "medio interlineado" o half-leading en Css

La diferencia entre el tamaño de la fuente (font-size) y el valor computado de line-height se llama interlineado.
La mitad del valor del interlineado se llama medio interlineado (half-leading) y es este valor el usado en css como línea base para la alineación vertical.

Los navegadores centran verticalmente los carácteres en una caja a nivel de línea, agregando medio interlineado por encima y otro medio por debajo.

Estoy seguro que con un ejemplo queda más claro. Tengamos el siguiente código Css:

El half-leading sería de 7px:

Así que los navegadores lo que hacen es añadir el "medio interlineado" (los 7px del ejemplo) por abajo y otros tantos por arriba del signo para centrarlo.

Quizás aquí conviene recordar que en las escrituras latinas el valor por defecto de la alineación vertical es baseline.

Ahora ya sabes con la precisión de 1px dónde va a aparecer el texto: a medio interlineado por arriba y medio por abajo. O de otra manera: dónde está la línea imaginaria usada para la alineación (línea base).

Este valor junto a otras propiedades es el responsable del "misterioso" espacio extra que algunas veces aparece en cajas que no tienen declarada altura, como el que ves en la imagen siguiente (franja amarilla bajo las imágenes):

A este particular, sus porqués y cuatro soluciones le dediqué este artículo.

Medio interlineado negativo

Y si el valor del "medio interlineado" es negativo ¿qué ocurre?

Sencillo: los carácteres se sangran. Lo que se traduce en que nos encontramos caracteres que pueden quedar cortados en su parte superior o inferior. La típica letra "g" con su rabito cortado. Amén de apelotonarse las líneas de texto.

Diferentes valores de font-size juntos

Si existen varios valores diferentes de font-size, por ejemplo un span en medio de un párrafo, se toma el valor computado más alto para hacer el cálculo.

Márgenes, bordes y rellenos

Cuando la altura total de una caja de línea (box-model tradicional o modificado con box-sizing) es más corta que los límites externos de las cajas que contiene, el fondo y el color del relleno y los bordes pueden ser "sangrados" dentro de las cajas de línea adyacentes. Pero algunas aplicaciones de usuario pueden "cortar" las zonas del borde y el relleno de las cajas contenidas (es decir, no las procesan).

Documentación oficial y complementaria

1. Leading and half-leading en el W3c
2. Css half-leading en la Wikipedia

Nota del Editor: este artículo fue publicado originalmente en Octubre de 2012.

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso