In CSS è disponibile una tecnica tipografica classica di creazione manuale di interruzioni di riga per blocchi di testo bilanciati.
Il valore balance di text-wrap fa parte del livello testo CSS 4. Dai un'occhiata agli esempi di questo post per scoprire come
questa riga di CSS può migliorare notevolmente i layout dei tuoi testi.
Senza text-wrap: balance; designer, editor di contenuti ed editori hanno
pochi strumenti
per modificare il modo in cui vengono bilanciati i confini. Le migliori opzioni disponibili sono l'utilizzo di
<wbr> o
­ per guidare i layout di testo in decisioni più intelligenti su dove spezzare righe e parole.
In qualità di sviluppatore, non conosci le dimensioni finali, la dimensione del carattere o persino la lingua di un titolo o di un paragrafo. Tutte le variabili necessarie per un trattamento efficace ed estetico del testo a capo si trovano nel browser. Questo è il motivo per cui vediamo a capo, come nell'immagine seguente:
.unbalanced {
max-inline-size: 50ch;
}
Con text-wrap: balance di CSS Text 4, puoi richiedere al browser di
determinare la soluzione di a capo automatico più bilanciata per il testo. Il browser
conosce tutti i fattori, come la dimensione del carattere, la lingua e l'area allocata.
I risultati della funzione di testo a capo con bilanciamento del browser oggi sono i seguenti:
.balanced {
max-inline-size: 50ch;
text-wrap: balance;
}
È utile vederli affiancati, immobili e senza sovrapposizioni di informazioni di debug.
Il tuo occhio dovrebbe essere molto più soddisfatto del blocco di testo bilanciato. Attira meglio l'attenzione e, nel complesso, è più facile da leggere.
Trovare il giusto equilibrio
I titoli sono il primo elemento visualizzato dai lettori; devono essere visivamente accattivanti e facili da leggere. In questo modo, attira l'attenzione degli utenti e dà un senso di qualità e sicurezza. Una tipografia efficace dà sicurezza ai lettori, incoraggiandoli a continuare a leggere.
Tradizionalmente, questa attività veniva svolta a mano o in modo ottico, perché il designer che bilancia il testo vuole piacere agli occhi e non alla matematica. Questo argomento viene spesso definito con il confronto tra metrica e allineamento ottico. Per le grandi pubblicazioni come il New York Times, il bilanciamento dei titoli è un dettaglio molto importante dell'esperienza utente.
Bilanciare il testo nella tipografia risale ai primi giorni della stampa, quando le stampanti posizionavano a mano le lettere. I risultati si sono evoluti con l'evoluzione degli strumenti e delle tecniche. Oggi i designer hanno colore, peso, dimensioni e altro ancora per bilanciare il testo nei loro progetti.
Sul Web, tuttavia, è disponibile meno controllo perché il documento cambia dimensioni e colori 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 bilanciati
Questo sarà e dovrebbe essere il caso d'uso principale di text-wrap: balance. Disegna l'occhio con dimensioni e rendilo simmetrico e leggibile. Imposta
tutti i titoli in modo che il testo a capo sia 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 attesi, in quanto il testo deve andare a capo e pertanto applicare una lunghezza massima della riga da qualche parte. Vedrai un elemento
max-inline-size
sugli esempi in questo post; questo stile è simile a max-width ma può essere impostato
una volta per qualsiasi lingua.
Limitazioni
L'attività di bilanciamento del testo non è senza costi. Il browser deve eseguire il loop delle iterazioni per trovare la soluzione di wrapping bilanciata. Questo costo delle prestazioni è ridotto da una regola, funziona solo per sei righe con wrapping e al di sotto.
Considerazioni sul rendimento
Non è consigliabile applicare il bilanciamento del testo a capo all'intero progetto. Si tratta di una richiesta inutile, 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 è che non è necessario attendere e dedicare tempo al bilanciamento del testo a capo durante il caricamento dei caratteri, come è possibile fare oggi con JavaScript. Il browser se ne occupa.
Interazioni con la proprietà white-space
Il testo di bilanciamento compete con la proprietà white-space perché una non richiede il wrapping, mentre l'altra richiede il wrapping bilanciato. Per risolvere questo problema, annulla la configurazione della proprietà dello spazio vuoto, quindi
il wrapping bilanciato può essere applicato di nuovo.
.balanced {
white-space: unset;
text-wrap: balance;
}
Il bilanciamento non modifica le dimensioni incorporate dell'elemento
Alcune soluzioni JavaScript offrono un vantaggio per il wrapping di testo bilanciato, in quanto modificano il valore max-width dell'elemento contenitore stesso. Ciò ha un ulteriore vantaggio, ovvero essere "restringiti" al blocco bilanciato. text-wrap:
balance non ha questo effetto e può essere visto in questo esempio:
Hai notato che alla fine della larghezza mostrata da DevTools c'è molto spazio in più?
Questo perché si tratta solo di un avvolgimento e non di uno stile che cambia dimensione. Per questo motivo, ci sono alcuni scenari in cui text-wrap: balance non è molto efficace, almeno secondo me. ad esempio le intestazioni all'interno di una scheda (o di qualsiasi contenitore
con bordi o ombre).
Il testo a capo bilanciato crea ironicamente squilibrio con l'elemento contenuto.
Una breve spiegazione della tecnica utilizzata dal browser
Il browser esegue in modo efficace una ricerca binaria per la larghezza minima, che non causa righe aggiuntive, terminando a un pixel CSS (non il pixel di visualizzazione). Per ridurre ulteriormente al minimo i passaggi nella ricerca binaria, il browser inizia con l'80% della larghezza di riga media.