CSS text-box-trim

Adam Argyle

Pubblicato: 14 gen 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.

Source

Longhand:

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

Abbreviazione:

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

Il carattere lo sa, ora lo sa anche CSS.

Prova su CodePen

Lo spazio sopra e sotto un carattere esiste a causa del modo in cui il web dispone il testo, chiamato "interlinea". Questo argomento è trattato in modo approfondito 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 a Leading, divide il lead in due parti e distribuisce una parte sopra e una parte sotto i contenuti.

Viene mostrato un titolo con una barra rosa acceso sopra e sotto il testo per dimostrare la semichiusura. Fonte

Questa storia è significativa perché text-box ci fornisce i nomi per ciascuna metà: sopra e sotto. Inoltre, puoi 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).

Un titolo con spazio in eccesso sopra e sotto sembra essere tagliato con le forbici e rimosso.

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

Fonte

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

Funzionalità e sintassi

A mio parere, ecco le due frasi più comuni che ti serviranno 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 più volte. Tuttavia, l'esempio precedente mostra anche ex alphabetic perché è utile per il bilanciamento 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 superiore e inferiore e seguire le immagini e le etichette codificate per colore.

L'anteprima della sintassi con la casella di testo: la sintassi alfabetica di taglio su entrambi i lati è evidenziata e mostrata. Ci sono altri tre menu a discesa per scegliere i valori di taglio.

Cose da provare:

  1. Ispezionare visivamente il funzionamento di text-box-trim nelle varianti di testo a una riga e multiriga.
  2. Passando il mouse sopra una variante, vengono visualizzati i valori di taglio utilizzati per ottenere l'effetto.
  3. Modificare il carattere.
  4. Taglio di un solo lato di una casella di testo.
  5. Controlla la sintassi mentre giochi.
Prova su CodePen

Che cosa posso creare e quali problemi risolve?

Da questa funzionalità di ritaglio emergono alcune soluzioni di centratura e allineamento molto più semplici. Puoi anche avvicinarti alla spaziatura corretta, in cui è possibile utilizzare un valore come gap tra i contenuti.

Un confronto tra due gruppi di contenuti.
Il primo gruppo ha una spaziatura di metà riga, il secondo una spaziatura ridotta. Il risultato è che il secondo gruppo è più compatto. Provalo su CodePen

Centratura più semplice

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

Per ovviare a questo problema, gli sviluppatori spesso riducono esplicitamente il padding nella parte superiore e inferiore (blocco) per compensare gli effetti della mezza spaziatura.

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. Potrebbe avere un bell'aspetto su uno schermo e un sistema operativo, ma non su un altro.

text-box ci consente di eliminare lo spazio iniziale dal testo, rendendo utili valori di spaziatura interna uguali come 10px:

button {
  text-box: trim-both cap alphabetic;
  padding: 10px;
}
Vengono mostrati due esempi.
Il primo mostra un elemento con spaziatura interna: 10 px e interlinea. Il secondo mostra lo stesso elemento con text-box: trim-both cap alphabetic. Il risultato è che il secondo pulsante è centrato otticamente. Prova su CodePen

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. Nota come il carattere alternativo può produrre uno spazio di interlinea completamente diverso.

Tre gruppi di pulsanti. Il primo utilizza un normale carattere sans serif, il secondo un carattere elegante o divertente e il terzo lo stesso effetto con un carattere di scrittura a mano.
Ogni carattere ha uno spazio di mezza spaziatura diverso, ma i valori di taglio sono gli stessi e possono normalizzare lo spazio. Provalo su CodePen

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

I tag vengono mostrati affiancati. Il primo gruppo ha una spaziatura di metà riga, il secondo una spaziatura ridotta.
Il secondo gruppo di tag è più compatto e centrato otticamente, grazie alla spaziatura iniziale ridotta.

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 la spaziatura a metà può rendere difficile l'allineamento e come tagliare i lati del blocco di una casella di testo può creare allineamenti migliori.

In questo caso, un'immagine è posizionata accanto al testo. L'immagine cresce fino all'altezza necessaria per il testo. Senza text-box, l'immagine è sempre un po' più alta. Con text-box, l'immagine può essere allineata perfettamente al contenuto di testo.

Prova su CodePen

Nota che lo spazio bianco 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, nota come la funzionalità si adatti logicamente a una modifica di writing-mode. Prova a modificare il testo e osserva come il layout rimane allineato.

Prova su CodePen

Continua a studiare

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