CSS text-box-trim

Recupera lo spazio sopra e sotto i contenuti di testo e ottieni un equilibrio ottico.

Adam Argyle

Data di pubblicazione: 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 libera:

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

Scrittura abbreviata:

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 da controllare 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 al rientro, divide questo tratto in due e distribuisce un tratto sopra e uno sotto i contenuti.

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

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

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 viene visualizzato 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.

Fonte

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à. I 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 esploratore

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 menu a discesa per scegliere un carattere diverso. Un&#39;anteprima della sintassi con la casella di testo: la sintassi alfabetica con i due trim evidenziata e mostrata. Infine, sono disponibili altri tre menu a discesa per scegliere i valori di taglio.

Da provare:

  1. Ispezione visiva del funzionamento di text-box-trim nelle varianti di testo a una e più righe.
  2. Passa il mouse sopra una variante per visualizzare i valori di taglio utilizzati per ottenere l'effetto.
  3. Modificare il 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 questo strumento 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 a metà, il secondo ha spazi iniziali tagliati. Il risultato è che il secondo gruppo è più stretto.
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 nella parte superiore e inferiore (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. Potrebbe avere un bell'aspetto su uno schermo 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;
}
Vengono 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 il taglio dello spazio con text-box rende padding: 10px uguale su tutti i lati in un pratico elemento interattivo. Notare come il carattere alternativo possa produrre spazi interlinea 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 su 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 a metà, il secondo ha spazi iniziali tagliati. Il risultato è che il secondo gruppo è più stretto 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 riportati di seguito mostrano quando la spaziatura interlinea ridotta può rendere difficile l'allineamento e come il taglio dei 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 al contenuto del 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, osserva 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 a rimanere 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.