Migliora il layout e la leggibilità del testo

Il layout del testo, in particolare alla fine delle righe e dei paragrafi, può influire sulla leggibilità e sull'aspetto estetico di una pagina. CSS offre diverse opzioni di testo a capo che possono migliorare casi d'uso specifici.

Per blocchi di testo brevi come le intestazioni, utilizza text-wrap: balance. Questa proprietà indica al browser di distribuire il testo nel modo più uniforme possibile tra le righe, creando un aspetto più simmetrico.

La proprietà CSS text-wrap: pretty consente di migliorare la qualità tipografica del corpo del testo attivando un algoritmo di ritorno a capo più sofisticato. È progettato specificamente per evitare le "orfane" (parole singole nell'ultima riga di un paragrafo) e creare un "rag" visivo più gradevole per i blocchi di testo lunghi.

Implementazione

1. Identifica gli elementi di testo:

Per text-wrap: balance, seleziona blocchi di testo brevi come intestazioni e intestazioni di tabella. Evita elementi con riquadri visibili, come bordi o sfondi, in quanto ciò può creare aree visivamente vuote impreviste nel layout.

Per text-wrap: pretty, seleziona gli elementi che potrebbero contenere lunghe sequenze di testo in cui le parole orfane (runt) o le interruzioni di riga errate sono più evidenti. Sono inclusi i seguenti elementi:

• <p>
• <blockquote>
• <li>
• Qualsiasi altro elemento che potrebbe contenere lunghe sequenze di testo.

Scegliere il metodo di wrapping giusto

2. Applica il wrapping scelto:

Applica text-wrap: balance in modo specifico a elementi brevi su più righe, come intestazioni (h1-h6), sottotitoli o citazioni.

/* Target specific heading elements for balanced wrapping */
h1, h2, h3, h4, h5, h6 {
  /* Enables balanced line-breaking logic */
  text-wrap: balance;
}

Utilizza text-wrap: pretty per attivare un algoritmo ottimizzato che valuta le ultime righe di un paragrafo per trovare i punti di interruzione migliori.

/* Apply to multi-line text blocks to prevent orphaned words */
p, blockquote, li, .pretty-text {
  /* Enables pretty line-breaking logic for body copy */
  text-wrap: pretty;
}

Vincoli e prestazioni critici

text-wrap: balance

• Limite di righe: i browser impongono un limite al numero di righe che tenteranno di bilanciare per mantenere le prestazioni (in genere 6 righe in Chromium e 10 righe in Firefox). Se il testo supera questo limite, il browser torna al comportamento standard di wrap. Evita di utilizzare text-wrap: balance su blocchi di testo che potrebbero superare questi limiti.
• Applicazione mirata: NON applicare text-wrap: balance a livello globale (ad es. * { text-wrap: balance; }). L'algoritmo iterativo di "ricerca binaria" utilizzato dai browser è oneroso dal punto di vista computazionale. Limita l'utilizzo a elementi di testo specifici e brevi.
• Interazione con la larghezza: text-wrap: balance non modifica la larghezza del contenitore (inline-size), ma influisce solo sul modo in cui il testo va a capo all'interno di questa larghezza. Questo può lasciare uno spazio vuoto alla fine del contenitore, il che potrebbe influire sui layout che si basano su blocchi di testo a larghezza intera.

text-wrap: pretty

• Prestazioni e qualità: OBBLIGATORIO: text-wrap: pretty è più oneroso dal punto di vista computazionale rispetto all'algoritmo wrap (greedy) predefinito perché valuta più righe (in genere le ultime quattro) per ottimizzare i punti di interruzione. Evita di applicarlo globalmente a ogni elemento se la pagina contiene una quantità eccessiva di contenuti di testo.
• Ideale per il testo su più righe: i vantaggi di pretty sono più evidenti nei paragrafi di tre o più righe. Ha un effetto minimo o nullo sul testo breve su una sola riga.
• Comportamento specifico del browser: tieni presente che i dettagli di implementazione variano. I browser basati su Chromium in genere si concentrano sulle ultime quattro righe, mentre altri motori potrebbero valutare l'intero paragrafo.

Strategie di riserva

Nei browser che non supportano text-wrap: balance o text-wrap: pretty, la proprietà viene ignorata e il testo viene mandato a capo utilizzando il comportamento predefinito wrap. Si tratta di un potenziamento progressivo che si riduce in modo controllato alla tipografia standard. In questo modo, i tuoi contenuti rimangono perfettamente leggibili su tutti i browser, offrendo al contempo un'esperienza superiore a quelli che li supportano.

Per i layout critici in cui è richiesto un layout di testo perfezionato, utilizza una libreria JavaScript, ma tieni presente che questa operazione potrebbe essere lenta e causare problemi di prestazioni.