Text box trim CSS

Quisiera compartir una de novedad de chrome for developers, para Chrome 133. Esta novedad nos permite recortar el espaciado por encima y debajo de un texto.

La propiedad que nos permite ajustar es: text-box-trim

Soporte

Actualmente lo soporta: Chrome 133, Edge 133 y Safari 18.2.

text-box-trim: trim-start | trim-end | trim-both | none;

text-box-edge: cap | ex | text | leading;

line-fit-edge: alphabetic | text;

Se aplican a las etiquetas: <h1>, <buton> y <p>. Cada fuente tipografica tiene espaciodos diferentes.

Esto nos ayudara a hacer una alineacion de textos de forma mas uniforme.

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

See the Pen text-box-trim fit and spacing by web.dev (@web-dot-dev) on CodePen.

Para mas informacion puedes revizar Google Chrome para desarrolladores: https://developer.chrome.com/docs/devtools/css/text-box-trim/