CSS text-box-trim

Recupera spazio sopra e sotto i contenuti di testo per ottenere un equilibrio ottico.

Adam Argyle

Pubblicata: 14 gennaio 2025

A partire da Chrome 133, text-box consente a sviluppatori e designer di personalizzare lo spazio sopra e sotto il testo.

Browser Support

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

Scrittura a mano:

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

Scrittura stenografica:

text-box: trim-both cap alphabetic;

Questa proprietà ti consente di controllare lo spazio sopra e sotto il testo, ad esempio <h1>, <button> e <p>. Ogni carattere produce una quantità diversa di questo spazio direzionale del blocco che contribuisce alle dimensioni dell'elemento. Questo contributo caotico dello spazio non è facilmente misurabile ed è stato impossibile controllarlo fino ad ora.

Il carattere lo sa, ora lo sa anche il CSS.

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

Lo spazio sopra e sotto un carattere è dovuto alla modalità di impaginazione del testo sul web, chiamata "mezza interlinea". Questo argomento è trattato in modo esperto in un post di Matthias Ott intitolato The Thing With Leading In CSS. In sostanza, quando la composizione veniva eseguita a mano, venivano utilizzati pezzi di piombo per separare le righe di testo. Il web, ispirato ai rientri, divide questo tratto in due e distribuisce un tratto sopra e uno sotto i contenuti.

Un titolo viene mostrato con una barra rosa acceso sopra e sotto il testo per mostrare la spaziatura interlinea.
Origine

Questa cronologia è significativa perché text-box ci fornisce i nomi per ogni metà: sopra e sotto. Inoltre, puoi tagliarli.

Esistono anche precedenti di text-box. Potresti ricordare l'entusiasmante post di Ethan Wang intitolato Leading-Trim: The Future Of Digital Typesetting, in cui è stato introdotto per la prima volta leading-trim (il nome precedente di text-box).

Un titolo è mostrato con uno spazio in eccesso sopra e sotto che sembra essere stato tagliato con le forbici e rimosso.

Il punto di contatto per il taglio del testo potrebbe essere Figma e i suoi controlli di "taglio verticale" per i designer. Questo post X mostra dove si trova questa opzione di ritaglio verticale e come è utile per i pulsanti.

Origine

Indipendentemente da come ci sei arrivato, questo piccolo controllo della tipografia può fare una grande differenza.

Panoramica delle funzionalità e della sintassi

Ecco, a mio avviso, le due righe più comuni di cui avrai bisogno quando lavori 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;
}

Il taglio di entrambi a cap alphabetic sarà l'utilizzo più comune di questa funzionalità. Le seguenti demo lo utilizzano molte volte. Tuttavia, nell'esempio precedente viene mostrato anche ex alphabetic perché è utile per l'equilibrio ottico in modi unici.

Playground di esplorazione

La seguente demo ti consente di esplorare la sintassi e visualizzare i risultati utilizzando i menu a discesa. Puoi modificare i caratteri, i valori di taglio superiore e inferiore e seguire le immagini e le etichette codificate a colori.

Uno screenshot della demo di Esploratore della sintassi. Mostra il carattere e un elenco a discesa per scegliere un carattere diverso. Un&#39;anteprima della sintassi con la casella di testo: la sintassi alfabetica trim-both cap evidenziata e mostrata. Infine, sono disponibili altri tre menu a discesa per scegliere i valori di taglio.

Cosa provare:

  1. Ispezione visiva del funzionamento di text-box-trim nelle varianti di testo a una e più righe.
  2. Se passi il mouse sopra una variante, vedrai i valori di taglio utilizzati per ottenere l'effetto.
  3. Modifica del carattere.
  4. Taglia solo un lato di una casella di testo.
  5. Controlla la sintassi durante la riproduzione.
https://codepen.io/web-dot-dev/pen/RNbyooE

Cosa posso creare con questa funzionalità o quali problemi risolve?

Questa funzionalità di ritaglio offre soluzioni di centratura e allineamento molto più semplici. Puoi anche avvicinarti a un a capo corretto, in cui è possibile utilizzare qualcosa come gap tra i contenuti.

Viene mostrato un confronto tra due gruppi di contenuti. Il primo gruppo ha spazi iniziali di metà carattere, il secondo ha spazi iniziali tagliati. Il risultato è che il secondo gruppo è più compatto.
https://codepen.io/web-dot-dev/pen/RNbyoKE

Centratura più facile

Per componenti più piccoli, in linea e intrinseci dei contenuti, padding: 10px è uno stile ragionevole da specificare per un elemento per spaziature uguali su tutti i lati. Tuttavia, il risultato può creare confusione, in quanto spesso presenta spazi aggiuntivi in alto e in basso.

Per ovviare a questo problema, gli sviluppatori spesso inseriscono esplicitamente meno spaziatura in alto e in basso (blocco) per compensare gli effetti del rientro a metà.

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

A questo punto, non ci resta che provare combinazioni di valori finché tutto non è centrato otticamente. L'effetto potrebbe essere buono su una schermata e un sistema operativo, ma non su un altro.

text-box ci consente di tagliare lo spazio iniziale a metà dal testo, rendendo utili valori di spaziatura uguali come 10px:

button {
  text-box: trim-both cap alphabetic;
  padding: 10px;
}
Sono mostrati due esempi. Il primo mostra un elemento con spaziatura interna: 10px e interlinea a metà. Il secondo mostra lo stesso elemento con text-box: trim-both cap alphabetic. Il risultato è che il secondo pulsante è centrato otticamente.
https://codepen.io/web-dot-dev/pen/NPKMbgq

Ecco alcuni elementi <button> che mostrano come l'accorciamento dello spazio con text-box rende padding: 10px uguale su tutti i lati in un pratico elemento interattivo. Nota come il carattere alternativo può produrre spazi interlineari molto diversi.

Vengono visualizzati tre gruppi di pulsanti. Il primo gruppo mostra un carattere sans serif normale. Il secondo gruppo mostra un carattere elaborato o divertente. Il terzo gruppo mostra lo stesso effetto, ma con un carattere scritto a mano. Il punto è mostrare che ogni carattere ha uno spazio interlinea diverso, ma i valori di taglio sono gli stessi e possono normalizzare lo spazio.
https://codepen.io/web-dot-dev/pen/mybLOMg

Ecco gli elementi <span>, spesso utilizzati per mostrare categorie o badge. Un altro caso in cui la spaziatura interna uguale per tutti i lati dovrebbe essere la soluzione migliore, ma fino a text-box abbiamo dovuto trovare una soluzione alternativa.

I tag vengono mostrati uno accanto all&#39;altro. Il primo gruppo ha spazi iniziali di metà carattere, il secondo ha spazi iniziali tagliati. Il risultato è che il secondo gruppo è più compatto e centrato otticamente.
https://codepen.io/web-dot-dev/pen/mybLOMg

Allineamento più semplice

Anche lo spazio aggiuntivo e non controllabile sopra (over) e sotto (under) una casella di testo rende difficile l'allineamento. Gli esempi seguenti mostrano quando la spaziatura interlinea ridotta può rendere difficile l'allineamento e come tagliare i lati del blocco di una casella di testo può creare allineamenti migliori.

Qui un'immagine è posizionata accanto al testo. L'immagine aumenterà fino all'altezza necessaria per il testo, ma senza text-box, l'immagine sarà sempre un po' più alta. Con text-box, l'immagine può essere perfettamente allineata ai contenuti di testo.

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

Tieni presente che lo spazio vuoto si trova sopra la prima riga di testo formattata e sotto l'ultima riga di testo formattata negli scenari con a capo.

Nell'esempio seguente, nota come la funzionalità si adatta in modo logico a una modifica in writing-mode. Prova a modificare il testo e osserva come il layout continua ad essere allineato.

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

Continuare a studiare

Vuoi saperne di più? Il seguente elenco di link offre varie quantità di informazioni aggiuntive e casi d'uso.