text-box-trim de CSS

Recupera espacio por encima y por debajo del contenido de texto para lograr un equilibrio óptico.

Adam Argyle

Fecha de publicación: 14 de enero de 2025

A partir de Chrome 133, text-box permite que los desarrolladores y diseñadores adapten el espacio sobre y debajo del texto.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: 18.2.

Longhand:

text-box-trim: trim-start | trim-end | trim-both | none;
text-box-edge: cap | ex | text | leading;
line-fit-edge: alphabetic | text;

Siglas:

text-box: trim-both cap alphabetic;

Esta propiedad te permite controlar el espacio sobre y debajo del texto, por ejemplo, <h1>, <button> y <p>. Cada fuente produce una cantidad diferente de este espacio direccional de bloque que contribuye al tamaño del elemento. Esta contribución caótica de espacio no se mide fácilmente y hasta ahora era imposible controlarla.

La fuente lo sabe, ahora CSS también.

https://codepen.io/web-dot-dev/pen/xbKjRxL

El espacio sobre y debajo de una fuente se debe a la forma en que la Web organiza el texto, llamado "media línea". Esto se explica de forma experta en una publicación de Matthias Ott llamada The Thing With Leading In CSS. En esencia, cuando el texto se escribía a mano, se usaban trozos de plomo metálico para separar las líneas de texto. La Web, inspirada en el texto al principio, divide esa parte de texto al principio en dos y distribuye una parte por encima y otra por debajo del contenido.

Se muestra un título con una barra rosa intenso arriba y debajo del texto para mostrar la mitad de la línea.
Fuente

Este historial es significativo porque text-box nos brinda nombres para cada mitad: superior e inferior. Además, puedes recortarlo.

También hay antecedentes de text-box. Es posible que recuerdes la emocionante publicación de Ethan Wang llamada Leading-Trim: The Future Of Digital Typesetting, en la que se presentó por primera vez leading-trim (el nombre que tenía text-box anteriormente).

Se muestra un título con exceso de espacio arriba y abajo que parece haberse cortado con tijeras y quitado.

Tu punto de entrada para el recorte de texto puede ser Figma y sus controles de “recorte vertical” para diseñadores. En esta publicación de X, se muestra dónde se encuentra esta opción de recorte vertical y cómo es útil para los botones.

Fuente

Independientemente de cómo hayas llegado hasta aquí, este control de tipografía que parece pequeño puede marcar una gran diferencia.

Descripción general de las funciones y la sintaxis

En mi opinión, estas son las dos instrucciones de una sola línea más comunes que necesitarás cuando trabajes con text-box:

h1 {
  /* trim both sides to the capital letters */
  text-box: trim-both cap alphabetic;

  /* trim both sides to the lowercase letter x */
  text-box: trim-both ex alphabetic;
}

El uso más común de esta función será recortar ambos a cap alphabetic. En las siguientes demostraciones, se usa esto muchas veces. Sin embargo, el ejemplo anterior también muestra ex alphabetic porque es útil para el equilibrio óptico de sus propias maneras únicas.

Zona de juegos de Explorer

La siguiente demostración te permite explorar la sintaxis y ver los resultados con menús desplegables. Puedes cambiar las fuentes, los valores de recorte superior e inferior, y seguir las imágenes y etiquetas con códigos de colores.

Captura de pantalla de la demostración del explorador de sintaxis. Muestra la fuente y una lista desplegable para elegir otra. Vista previa de sintaxis con cuadro de texto: Se destaca y muestra la sintaxis alfabética de trim-both cap. Por último, hay 3 menús desplegables más para elegir los valores de recorte.

Soluciones:

  1. Inspeccionar visualmente cómo funciona text-box-trim en variantes de texto de una o varias líneas
  2. Colocar el cursor sobre una variante y ver los valores de recorte que se usaron para lograr ese efecto
  3. Cambiar la fuente
  4. Recortar solo un lado de un cuadro de texto
  5. Revisa la sintaxis mientras juegas.
https://codepen.io/web-dot-dev/pen/RNbyooE

¿Qué puedo crear con ella o qué problemas resuelve?

Esta función de recorte permite obtener soluciones de alineación y centrado mucho más simples. Incluso puedes acercarte más al espacio en blanco adecuado, en el que se puede usar algo como gap entre el contenido.

Se muestra una comparación entre 2 grupos de contenido. El primer grupo tiene medio espacio al principio, y el segundo tiene espacio al principio recortado. El resultado es que el segundo grupo está más unido.
https://codepen.io/web-dot-dev/pen/RNbyoKE

Centrado más fácil

Para componentes más pequeños, más intercalados y con contenido intrínseco, padding: 10px es un estilo razonable para especificar un elemento con el mismo espaciado en todos los lados. Sin embargo, el resultado puede confundir a las personas, ya que a menudo tiene espacio adicional en la parte superior e inferior.

Para solucionar este problema, los desarrolladores suelen colocar menos relleno de forma explícita en la parte superior e inferior (bloque) para compensar los efectos de la mitad de la sangría.

button {
  padding-block: 5px;
  padding-inline: 10px;
}

En este punto, solo queda probar combinaciones de valores hasta que todo esté centrado ópticamente. Esto puede verse bien en una pantalla y un sistema operativo, pero no en otro.

text-box nos permite recortar la mitad del espacio inicial del texto, lo que hace que los valores de padding iguales como 10px sean útiles:

button {
  text-box: trim-both cap alphabetic;
  padding: 10px;
}
Se muestran dos ejemplos. El primero muestra un elemento con padding: 10 px y medio espacio en blanco. El segundo muestra el mismo elemento con text-box: trim-both cap alphabetic. El resultado es que el segundo botón está centrado ópticamente.
https://codepen.io/web-dot-dev/pen/NPKMbgq

Estos son algunos elementos <button> que muestran cómo recortar el espacio con text-box hace que padding: 10px se vea igual en todos los lados en un elemento interactivo práctico. Observa cómo la fuente alternativa puede producir un espacio de interlineado medio muy diferente.

Se muestran tres grupos de botones. El primer grupo muestra una fuente sans serif normal. El segundo grupo muestra una fuente elegante o divertida. El tercer grupo muestra el mismo efecto, pero con una fuente de escritura a mano. El objetivo es mostrar que cada fuente tiene un espacio de medio interlineado diferente, pero los valores de corte son los mismos y pueden normalizar el espacio.
https://codepen.io/web-dot-dev/pen/mybLOMg

Estos son elementos <span>, que suelen usarse para mostrar categorías o insignias. Otro momento en el que el padding de lados iguales debería ser la mejor solución, pero hasta text-box tuvimos que solucionarlo.

Las etiquetas se muestran en comparación una al lado de la otra. El primer grupo tiene medio espacio al principio, y el segundo tiene espacio al principio recortado. El resultado es que el segundo grupo está más unido y centrado ópticamente.
https://codepen.io/web-dot-dev/pen/mybLOMg

Alineación más sencilla

El espacio medio adicional y no controlable por encima (over) y por debajo (under) de un cuadro de texto también dificulta la alineación. En los siguientes ejemplos, se muestra cuándo el medio interlineado puede dificultar la alineación y cómo recortar los lados de un bloque de un cuadro de texto puede crear mejores alineaciones.

Aquí, se coloca una imagen junto al texto. La imagen crecerá hasta la altura que necesite el texto, pero sin text-box, la imagen siempre será un poco más alta. Con text-box, la imagen se puede alinear perfectamente con el contenido de texto.

https://codepen.io/web-dot-dev/pen/yyBjVpg

Observa que el espacio en blanco está sobre la primera línea de texto con formato y debajo de la última línea de texto con formato en situaciones con unión de líneas.

En el siguiente ejemplo, observa cómo la función se adapta lógicamente a un cambio en writing-mode. Intenta cambiar el texto y observa cómo el diseño sigue alineado.

https://codepen.io/web-dot-dev/pen/dPbeOJQ

Continuar el estudio

¿Quieres obtener más información? La siguiente lista de vínculos ofrece información adicional y casos de uso variados.