Allineamento preciso del testo

Il problema

I browser aggiungono automaticamente spazi vuoti aggiuntivi sopra e sotto i caratteri di testo per adattarsi all'altezza della riga e alle metriche specifiche del carattere, come ascendenti e discendenti. Questo "spazio fantasma" rende impossibile ottenere un allineamento verticale perfetto al pixel utilizzando il CSS standard.

Tra i problemi più comuni sono inclusi i seguenti:

• Icone non allineate: il testo appare visivamente più in basso o più in alto rispetto a un'icona adiacente, anche quando si utilizza align-items: center.
• Spaziatura interna imprecisa: un pulsante con padding: 12px sembra avere visivamente più spazio in alto o in basso a causa dell'interlinea interna del carattere.
• Allineamento a filo: non puoi allineare la parte superiore di una lettera maiuscola esattamente con la parte superiore di un contenitore o di un'immagine adiacente senza utilizzare margini negativi "magic number".

La soluzione

Le proprietà text-box-trim e text-box-edge (abbreviazione text-box) ti consentono di tagliare questa spaziatura interna in base a metriche dei caratteri specifiche. Se ritagli la casella di testo in base all'altezza delle lettere maiuscole (parte superiore delle lettere maiuscole) e alla linea di base alfabetica (parte inferiore della maggior parte delle lettere), puoi assicurarti che il riquadro di delimitazione dell'elemento corrisponda ai suoi contenuti visivi.

Strategia di implementazione

1. OBBLIGATORIO: applica text-box-trim: trim-both (o la forma abbreviata text-box) all'elemento contenente il testo.
2. OBBLIGATORIO: specifica quali metriche utilizzare per il trimming con text-box-edge. Per la maggior parte degli allineamenti della UI, utilizza cap alphabetic.
3. SÌ: utilizza questa proprietà per ottenere un allineamento verticale visivo nei container flex o grid.
4. SÌ: utilizzalo per assicurarti che i valori CSS padding corrispondano allo spazio visivo tra il testo e il bordo del contenitore.
5. NON utilizzarlo nel corpo del testo di formato lungo, dove l'interlinea tradizionale è necessaria per la leggibilità. È più adatto per intestazioni, pulsanti ed etichette della UI.

Guida all'implementazione

Caso d'uso 1: tagliare l'interlinea interna per i badge

I diversi caratteri hanno quantità diverse di spaziatura integrata sopra e sotto il testo. Questo può creare difficoltà nell'abbinare un design o nel centrare visivamente il testo in un badge. Quando vuoi che il padding di un contenitore si adatti esattamente al testo, utilizza text-box: trim-both cap alphabetic. Questo è particolarmente utile per i componenti UI densi come badge o tag. In questo modo, il padding inizia esattamente sul bordo del testo su tutti i lati.

.badge {
  padding: 10px;
  background: hotpink;
  border-radius: 10px;
  /* 
    Trims the top to the cap-height and 
    the bottom to the alphabetic baseline.
  */
  text-box: trim-both cap alphabetic;
}

Caso d'uso 2: testo centrato con icone

Quando utilizzi Flexbox per allineare testo e icone, lo "spazio fantasma" spesso fa sembrare il testo leggermente fuori centro. La riduzione della casella garantisce che il motore di layout utilizzi l'altezza effettiva delle lettere visibili per l'allineamento.

.button {
  display: inline-flex;
  align-items: center;
  gap: 8px; 
}
/* 
  text-box does NOT inherit, and must be applied directly to the text element.
*/
.button-text{
  /* 
    The flex container now centers against the 
    visible letters, not the invisible font box.
  */
  text-box: trim-both cap alphabetic;
}

Caso d'uso 3: allineare il testo ai bordi superiori

Per allineare perfettamente un'intestazione alla parte superiore di un'immagine o di un elemento decorativo adiacente, utilizza trim-start cap alphabetic. Anche se la fine non verrà tagliata, è necessario definire il bordo finale.

.hero {
  display: flex;
  align-items: flex-start;
}

h1 {
  /* MANDATORY: The bottom edge must also be defined, even though only the top is trimmed. */
  text-box: trim-start cap alphabetic;
}

Best practice

• PUOI usare la forma abbreviata text-box per essere più conciso: text-box: <trim-direction> <edges>.
• SÌ: specifica sempre entrambi i bordi, anche se ne viene tagliato solo uno (a meno che non utilizzi il bordo text predefinito).
• SÌ: combina con line-height per una spaziatura controllata. Il ritaglio rimuove l'interlinea prima della prima e dell'ultima riga di testo, ma line-height influisce comunque sulla distanza tra le righe nel testo su più righe.
• NON applicare a ogni elemento. Utilizzalo solo se è richiesto un allineamento di precisione.

Strategie di riserva

text-box è un potenziamento progressivo. Nei browser che non lo supportano, il testo verrà semplicemente visualizzato con l'interlinea predefinita. Il layout sarà comunque funzionale, anche se leggermente meno preciso. Non è necessario un codice di fallback speciale, poiché le proprietà vengono ignorate in modo sicuro dai browser meno recenti.

Altre considerazioni

1. Metriche dei caratteri: caratteri diversi hanno metriche interne diverse. cap alphabetic è un valore predefinito affidabile, ma alcuni caratteri o casi d'uso potrebbero richiedere ex (altezza x) per un migliore allineamento delle lettere minuscole.
2. Testo su più righe: il trimming viene applicato alla prima e all'ultima riga del blocco. Le linee interne non sono interessate.