Alineación precisa del texto

El problema

Los navegadores agregan automáticamente espacios en blanco adicionales por encima y por debajo de los caracteres de texto para adaptarse a la altura de la línea y a las métricas específicas de la fuente, como las astas ascendentes y descendentes. Este "espacio fantasma" hace que sea imposible lograr una alineación vertical perfecta de los píxeles con CSS estándar.

Estos son algunos de los problemas habituales:

• Íconos desalineados: El texto aparece visualmente más abajo o más arriba que un ícono adyacente, incluso cuando se usa align-items: center.
• Padding impreciso: Un botón con padding: 12px parece tener más espacio en la parte superior o inferior debido al interlineado interno de la fuente.
• Alineación al ras: No puedes alinear la parte superior de una letra mayúscula exactamente con la parte superior de un contenedor o una imagen adyacente sin usar márgenes negativos de "número mágico".

La solución

Las propiedades text-box-trim y text-box-edge (abreviatura text-box) te permiten recortar este interlineado interno en función de métricas de fuentes específicas. Si recortas el cuadro de texto a la altura de las mayúsculas (parte superior de las letras mayúsculas) y la línea de base alfabética (parte inferior de la mayoría de las letras), puedes asegurarte de que el cuadro delimitador del elemento coincida con su contenido visual.

Estrategia de implementación

1. OBLIGATORIO: Aplica text-box-trim: trim-both (o la abreviatura text-box) al elemento que contiene el texto.
2. OBLIGATORIO: Especifica qué métricas usar para el recorte con text-box-edge. Para la mayor parte de la alineación de la IU, usa cap alphabetic.
3. SÍ usa esta opción para lograr un centrado vertical visual en contenedores flexibles o de cuadrícula.
4. SÍ úsala para asegurarte de que los valores de padding de CSS coincidan con el espacio visual entre el texto y el borde del contenedor.
5. NO lo uses en textos de formato largo en los que se necesite un interlineado tradicional para facilitar la lectura. Es más adecuado para encabezados, botones y etiquetas de IU.

Guía de implementación

Caso de uso 1: Recorta el interlineado interno para las insignias

Las diferentes fuentes tienen distintas cantidades de espaciado integrado por encima y por debajo del texto. Esto puede generar desafíos a la hora de hacer coincidir un diseño o centrar visualmente el texto en una insignia. Cuando quieras que el padding de un contenedor se ajuste exactamente al texto, usa text-box: trim-both cap alphabetic. Esto es especialmente útil para componentes de la IU densos, como insignias o etiquetas. Esto permite que el padding comience justo en el borde del texto en todos los lados.

.badge {
  padding: 10px;
  background: hotpink;
  border-radius: 10px;
  /* 
    Trims the top to the cap-height and 
    the bottom to the alphabetic baseline.
  */
  text-box: trim-both cap alphabetic;
}

Caso de uso 2: Centra el texto con íconos

Cuando se usa Flexbox para alinear texto e íconos, el "espacio fantasma" suele hacer que el texto se vea un poco descentrado. Recortar el cuadro garantiza que el motor de diseño use la altura real de la letra visible para la alineación.

.button {
  display: inline-flex;
  align-items: center;
  gap: 8px; 
}
/* 
  text-box does NOT inherit, and must be applied directly to the text element.
*/
.button-text{
  /* 
    The flex container now centers against the 
    visible letters, not the invisible font box.
  */
  text-box: trim-both cap alphabetic;
}

Caso de uso 3: Alinea el texto con los bordes superiores

Para alinear un encabezado perfectamente con la parte superior de una imagen o un elemento decorativo adyacente, usa trim-start cap alphabetic. Aunque no se recortará el final, se debe definir el borde final.

.hero {
  display: flex;
  align-items: flex-start;
}

h1 {
  /* MANDATORY: The bottom edge must also be defined, even though only the top is trimmed. */
  text-box: trim-start cap alphabetic;
}

Prácticas recomendadas

• SÍ usa la abreviatura text-box para que sea más conciso: text-box: <trim-direction> <edges>.
• SÍ especifica siempre ambos bordes, incluso si solo se recorta uno (a menos que uses el borde text predeterminado).
• SÍ combínalo con line-height para obtener un espaciado controlado. El recorte quita el interlineado antes de la primera y la última línea de texto, pero line-height sigue afectando la distancia entre las líneas en el texto de varias líneas.
• NO se aplican a todos los elementos. Úsala solo cuando se requiera una alineación precisa.

Estrategias de resguardo

text-box es una mejora progresiva. En los navegadores que no lo admiten, el texto simplemente se renderizará con su interlineado predeterminado. Tu diseño seguirá siendo funcional, aunque un poco menos preciso. No se requiere ningún código de resguardo especial, ya que los navegadores más antiguos ignoran las propiedades de forma segura.

Otros factores que considerar

1. Métricas de fuentes: Las diferentes fuentes tienen distintas métricas internas. cap alphabetic es un valor predeterminado confiable, pero algunas fuentes o casos de uso pueden requerir ex (altura de x) para una mejor alineación de las minúsculas.
2. Texto de varias líneas: El recorte se aplica a la primera y última línea del bloque. Las líneas internas no se ven afectadas.