CSS text-wrap: balance

Una tecnica tipografica classica di creazione manuale di interruzioni di riga per blocchi di testo bilanciati arriva in CSS.

Adam Argyle

Il valore balance per text-wrap fa parte di CSS Text Level 4. Dai un'occhiata agli esempi in questo post per scoprire come questa riga di CSS può migliorare notevolmente i layout di testo.

Senza text-wrap: balance, i designer, gli editor di contenuti e gli editori hanno pochi strumenti per modificare il modo in cui le righe vengono bilanciate. Le migliori opzioni disponibili sono l'utilizzo di <wbr> o ­ per aiutare i layout di testo a prendere decisioni più intelligenti su dove interrompere righe e parole.

In qualità di sviluppatore, non conosci le dimensioni finali, le dimensioni del carattere o persino la lingua di un titolo o di un paragrafo. Tutte le variabili necessarie per un trattamento efficace ed estetico del ritorno a capo del testo si trovano nel browser. Per questo motivo, il ritorno a capo del titolo viene visualizzato come nell'immagine seguente:

.unbalanced {
  max-inline-size: 50ch;
}

Con text-wrap: balance di CSS Text 4, puoi chiedere al browser di trovare la soluzione di wrapping delle righe più equilibrata per il testo. Il browser conosce tutti i fattori, come le dimensioni del carattere, la lingua e l'area allocata. Oggi i risultati del wrapping del testo bilanciato del browser hanno questo aspetto:

.balanced {
  max-inline-size: 50ch;
  text-wrap: balance;
}

È utile vederli uno accanto all'altro, fermi e senza informazioni di debug sovrapposte.

Il tuo occhio dovrebbe essere molto più soddisfatto del blocco di testo bilanciato. Attira maggiormente l'attenzione ed è più facile da leggere.

Trovare l'equilibrio

I titoli sono la prima cosa che vedono i lettori, quindi devono essere visivamente accattivanti e facili da leggere. In questo modo si cattura l'attenzione degli utenti e si trasmette un senso di qualità e affidabilità. Una buona tipografia infonde fiducia nei lettori, incoraggiandoli a continuare a leggere.

Tradizionalmente, questo compito veniva svolto a mano o otticamente, poiché il designer che bilancia il testo vuole soddisfare l'occhio, non la matematica. Questo argomento viene spesso definito allineamento metrico rispetto a quello ottico. Per le grandi pubblicazioni come il New York Times, il bilanciamento dei titoli è un dettaglio molto importante dell'esperienza utente.

Il bilanciamento del testo nella tipografia risale ai primi giorni della stampa, quando i tipografi posizionavano le lettere a mano. Con l'evoluzione di strumenti e tecniche, sono cambiati anche i risultati. Oggi i designer hanno a disposizione colore, peso, dimensione e altro ancora per bilanciare il testo nei loro progetti.

Sul web, tuttavia, è disponibile un controllo minore perché le dimensioni e i colori del documento cambiano in base agli utenti. text-wrap: balance porta l'arte di bilanciare il testo sul web in modo automatizzato, basandosi sul lavoro e sulle tradizioni dei designer del settore della stampa.

Titoli del saldo

Questo sarà, e dovrebbe essere, il caso d'uso principale per text-wrap: balance. Disegna l'occhio con le dimensioni giuste e rendilo simmetrico e leggibile. Imposta tutti i titoli sul testo a capo bilanciato con il seguente CSS:

h1,h2,h3,h4,h5,h6 {
  text-wrap: balance;
}

La semplice applicazione di questo stile potrebbe non fornire i risultati previsti, in quanto il testo deve essere a capo e quindi avere una lunghezza massima della riga applicata da qualche parte. Vedrai un max-inline-size set sugli esempi di questo post. Questo stile è simile a max-width, ma può essere impostato una sola volta per qualsiasi lingua.

Limitazioni

L'attività di bilanciamento del testo non è senza costi. Il browser deve scorrere le iterazioni per scoprire la soluzione di wrapping più equilibrata. Questo costo delle prestazioni è mitigato da una regola che funziona solo per sei righe di testo e meno.

Considerazioni sulle prestazioni

Non è una buona idea applicare il bilanciamento del wrapping del testo all'intero progetto. Si tratta di una richiesta sprecata, a causa del limite di sei righe, e potrebbe influire sulla velocità di rendering della pagina.

* {
  text-wrap: balance;
}

h1, h2, h3, h4, h5, h6, blockquote {
  text-wrap: balance;
}

Un grande vantaggio di questa funzionalità è che non devi attendere e bilanciare la disposizione del testo con il caricamento dei caratteri, come potresti fare oggi con JavaScript. Il browser si occupa di tutto.

Interazioni con la proprietà white-space

Il bilanciamento del testo è in conflitto con la proprietà white-space perché una richiede l'assenza di wrapping e l'altra richiede un wrapping bilanciato. Per risolvere il problema, annulla l'impostazione della proprietà dello spazio bianco, quindi il wrapping bilanciato può essere applicato di nuovo.

.balanced {
  white-space: unset;
  text-wrap: balance;
}

Il bilanciamento non modificherà la dimensione in linea dell'elemento

Alcune soluzioni JavaScript per il wrapping del testo bilanciato presentano un vantaggio, in quanto modificano l'max-width dell'elemento contenitore stesso. Questo ha il vantaggio aggiuntivo di essere "incapsulato" nel blocco bilanciato. text-wrap: balance non ha questo effetto e può essere visto in questo esempio:

Vedi come la larghezza mostrata da DevTools ha un sacco di spazio extra alla fine? Questo perché è solo uno stile di wrapping, non uno stile di modifica delle dimensioni. Per questo motivo, ci sono alcuni scenari in cui text-wrap: balance non è il massimo, almeno secondo me. Ad esempio, le intestazioni all'interno di una scheda (o di qualsiasi contenitore con bordi o ombre).

Il ritorno a capo bilanciato crea paradossalmente uno squilibrio nell'elemento contenuto.

Una breve spiegazione della tecnica utilizzata dal browser

Il browser esegue una ricerca binaria della larghezza più piccola che non causa righe aggiuntive, fermandosi a un pixel CSS (non pixel di visualizzazione). Per ridurre ulteriormente i passaggi della ricerca binaria, il browser inizia con l'80% della larghezza media della riga.