CSS text-box-trim

Adam Argyle

Pubblicato il 14 gennaio 2025

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

Forma estesa:

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

Forma abbreviata:

text-box: trim-both cap alphabetic;

Questa proprietà 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 di spazio caotico non è facilmente misurabile ed è stato impossibile da controllare fino ad ora.

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

Lo spazio sopra e sotto un carattere esiste a causa del modo in cui il web imposta il testo, chiamato "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 tipografica veniva eseguita a mano, venivano utilizzati pezzi di piombo metallico per separare le righe di testo. Il web, ispirato all'interlinea, divide il piombo in due pezzi e distribuisce un pezzo sopra e un pezzo sotto il contenuto.

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

Esiste anche una tecnica precedente a text-box. Ricorderai il post entusiasmante di Ethan Wang intitolato Leading-Trim: The Future Of Digital Typesetting, in cui è stato introdotto per la prima volta leading-trim (il nome che text-box aveva in precedenza).

Il punto di partenza per il taglio del testo potrebbe essere da Figma e i relativi controlli di "taglio verticale" per i designer. Questo post di X mostra dove si trova questa opzione di taglio verticale e in che modo è utile per i pulsanti.

Indipendentemente da come sei arrivato qui, questo piccolo controllo tipografico può fare una grande differenza.

Funzionalità e sintassi

A mio parere, ecco 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 i valori su cap alphabetic sarà l'utilizzo più comune di questa funzionalità. Le seguenti demo lo utilizzano più volte. Tuttavia, l'esempio precedente mostra anche ex alphabetic perché è utile per l'equilibrio ottico in modi unici.

Playground di Explorer

Esplora la sintassi nel nostro playground, e visualizza i risultati utilizzando i menu a discesa. Puoi modificare i caratteri, i valori di taglio sopra e sotto e seguire le immagini e le etichette con codice colore.

Cose da provare:

1. Ispezionare visivamente il funzionamento di text-box-trim nelle varianti di testo a riga singola e a più righe.
2. Passare il mouse sopra una variante per visualizzare i valori di taglio utilizzati per ottenere l'effetto.
3. Modificare il carattere.
4. Tagliare solo un lato di una casella di testo.
5. Esaminare la sintassi durante la riproduzione.

Cosa posso creare e quali problemi risolve?

Da questa funzionalità di taglio emergono alcune soluzioni di centratura e allineamento molto più semplici. Puoi persino avvicinarti all'interlinea corretta, dove è possibile utilizzare qualcosa come gap tra i contenuti.

Centratura più semplice

Per i componenti più piccoli, più in linea e intrinseci al contenuto, padding: 10px è uno stile ragionevole da specificare per un elemento per una spaziatura uniforme su tutti i lati. Tuttavia, il risultato può confondere le persone, in quanto spesso presenta uno spazio aggiuntivo nella parte superiore e inferiore.

Per ovviare a questo problema, gli sviluppatori spesso inseriscono esplicitamente meno padding nella parte superiore e inferiore (blocco) per compensare gli effetti dell'interlinea.

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

A questo punto, non ci resta che provare le combinazioni di valori finché gli elementi non sono centrati otticamente. Questo potrebbe avere un aspetto ottimale su uno schermo e un sistema operativo, ma non su un altro.

text-box ci consente di tagliare lo spazio dell'interlinea dal testo, rendendo utili i valori di padding uguali come 10px:

button {
  text-box: trim-both cap alphabetic;
  padding: 10px;
}

Ecco alcuni elementi <button> che mostrano come il taglio dello spazio con text-box renda padding: 10px uguale su tutti i lati in un elemento interattivo pratico. Tieni presente che il carattere alternativo può produrre uno spazio di interlinea molto diverso.

Ecco gli elementi <span>, spesso utilizzati per mostrare categorie o badge. Un altro momento in cui il padding con lati uguali dovrebbe essere la soluzione migliore, ma fino a text-box abbiamo dovuto aggirare il problema.

Allineamento più semplice

Lo spazio di interlinea aggiuntivo e incontrollabile sopra (over) e sotto (under) una casella di testo rende difficile anche l'allineamento. Gli esempi seguenti mostrano quando l'interlinea 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 viene posizionata accanto al testo. L'immagine aumenta fino all'altezza necessaria per il testo. Senza text-box, l'immagine è sempre un po' più alta. Con text-box, l'immagine può allinearsi perfettamente al contenuto del testo.

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 ritorno a capo.

Nell'esempio seguente, tieni presente che la funzionalità si adatta logicamente a una modifica di writing-mode. Prova a modificare il testo e osserva come il layout rimane allineato.

Continua a studiare

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

• Raccolta di Codepen di tutte le demo.
• Ottime ricerche e demo di Jan Nicklas.
• Due proprietà CSS per tagliare lo spazio vuoto della casella di testo su CSS Tricks.
• Layout in linea CSS sui bordi del testo.
• Da non confondere con size-adjust o ascent-override
• CSS Baseline: The Good, The Bad And The Ugly.
• Applicato a molti elementi HTML: CodePen.
• Post del blog di Safari.
• Perché sono entusiasta di text-box-trim come designer.