text-box-trim de CSS

Adam Argyle

Publicado: 14 de enero de 2025

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

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: behind a flag.
  • Safari: 18.2.

Source

Escritura a mano:

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

Taquigrafía:

text-box: trim-both cap alphabetic;

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

La fuente lo sabe y ahora CSS también.

Probar en CodePen

El espacio sobre y debajo de una fuente existe debido a la forma en que la Web diseña el texto, lo que se denomina "interlineado". Matthias Ott explica esto de manera experta en una publicación llamada The Thing With Leading In CSS. Básicamente, cuando la composición se hacía a mano, se usaban piezas de plomo para separar las líneas de texto. La Web, inspirada en el interlineado, divide el plomo en dos partes y distribuye una parte sobre y otra debajo del contenido.

Se muestra un título con una barra de color rosa intenso arriba y debajo del texto para demostrar el interlineado medio. Fuente

Este historial es significativo porque text-box nos da nombres para cada mitad: por encima y por debajo. Además, puedes recortarlo.

También hay conocimiento anterior de text-box. Quizás 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).

Un título con exceso de espacio arriba y abajo parece cortado con tijeras y quitado.

Tu punto de entrada en el recorte de texto podría ser desde Figma y sus controles de "recorte vertical" para diseñadores. Esta publicación en X muestra dónde se encuentra esta opción de recorte vertical y cómo puede ser útil para los botones.

Fuente

Independientemente de cómo llegaste aquí, este pequeño control de tipografía puede marcar una gran diferencia.

Función y sintaxis

En mi opinión, estas son las dos frases 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;
}

Recortar ambos a cap alphabetic será el uso más común de esta función. Las siguientes demostraciones lo usan muchas veces. Sin embargo, el ejemplo anterior también muestra ex alphabetic porque es útil para el equilibrio óptico de formas únicas.

Zona de pruebas de Explorer

Explora la sintaxis en nuestro espacio de pruebas y consulta los resultados con los menús desplegables. Puedes cambiar las fuentes, los valores de corte superior e inferior, y seguir los elementos visuales y las etiquetas codificados por color.

La vista previa de la sintaxis con el cuadro de texto: Se destaca y se muestra la sintaxis alfabética de cap-trim-both. Hay 3 menús desplegables más para elegir valores de recorte.

Prueba lo siguiente:

  1. Inspeccionar visualmente cómo funciona text-box-trim en variantes de texto de una sola línea y de varias líneas
  2. Colocar el cursor sobre una variante para 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.
Pruébalo en CodePen

¿Qué puedo crear y qué problemas resuelve?

Esta capacidad de recorte ofrece algunas soluciones de centrado y alineación mucho más sencillas. Incluso puedes acercarte al interlineado adecuado, en el que se puede usar algo como gap entre contenidos.

Comparación entre 2 grupos de contenido.
El primer grupo tiene un interlineado medio, y el segundo, un interlineado recortado. El resultado es que el segundo grupo está más unido. Probar en CodePen

Centrado más fácil

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

Para evitar este problema, los desarrolladores suelen agregar menos padding en la parte superior e inferior (bloque) para compensar los efectos del interlineado medio.

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

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

text-box nos permite quitar el espacio inicial de la mitad 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 relleno: 10 px y medio interlineado. El segundo muestra el mismo elemento con text-box: trim-both cap alphabetic. El resultado es que el segundo botón está centrado ópticamente. Pruébalo en CodePen

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 medio interlineado muy diferente.

Tres grupos de botones. El primero usa una fuente sans serif normal, el segundo usa una fuente elegante o divertida, y el tercero usa el mismo efecto con una fuente de escritura a mano.
Cada fuente tiene un espacio de medio interlineado diferente, pero los valores de recorte son los mismos y pueden normalizar el espacio. Probar en CodePen

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 que text-box tuvimos que encontrar una solución alternativa.

Las etiquetas se muestran comparadas una al lado de la otra. El primer grupo tiene medio espacio entre líneas, y el segundo tiene espacio entre líneas recortado.
El segundo grupo de etiquetas es más compacto y está centrado ópticamente gracias al recorte del espacio inicial.

Alineación más sencilla

El espacio adicional, incontrolable, de medio interlineado arriba (over) y abajo (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 del bloque de un cuadro de texto puede crear mejores alineaciones.

Aquí, se coloca una imagen junto al texto. La imagen crece hasta la altura que necesita el texto. Sin text-box, la imagen siempre es un poco más alta. Con text-box, la imagen se puede alinear perfectamente con el contenido del texto.

Pruébalo en CodePen

Observa que el espacio en blanco se encuentra arriba de la primera línea de texto con formato y debajo de la última línea de texto con formato en situaciones con ajuste de línea.

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.

Pruébalo en CodePen

Sigue estudiando

¿Quieres obtener más información? En la siguiente lista de vínculos, se ofrece diversa información adicional y casos de uso.