CSS è una tecnica tipografica classica di creazione a mano delle interruzioni di riga per blocchi di testo bilanciati.
Il valore balance di text-wrap fa parte del testo CSS 4. Dai un'occhiata agli esempi di questo post per scoprire come
questa riga di CSS può migliorare notevolmente i tuoi layout di testo.
Senza text-wrap: balance, i designer, gli editor di contenuti e gli editori hanno pochi strumenti per modificare il modo di bilanciare le linee. Le migliori opzioni disponibili sono l'utilizzo di <wbr> o ­ per aiutare i layout di testo a prendere decisioni più intelligenti su dove spezzare righe e parole.
In qualità di sviluppatore, non conosci le dimensioni finali, le dimensioni dei caratteri o persino la lingua di un titolo o paragrafo. Tutte le variabili necessarie per un trattamento efficace ed estetico del testo a capo si trovano nel browser. Ecco perché vediamo il wrapping dei titoli come nell'immagine seguente:
.unbalanced {
max-inline-size: 50ch;
}
Con text-wrap: balance di CSS Text 4, puoi richiedere al browser di
trovare la soluzione migliore per il ritorno a capo automatico bilanciato per il testo. Il browser conosce tutti i fattori, come le dimensioni del carattere, la lingua e l'area allocata.
I risultati del testo a capo bilanciato del browser oggi hanno il seguente aspetto:
.balanced {
max-inline-size: 50ch;
text-wrap: balance;
}
È utile vederli uno accanto all'altro, comunque 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 l'equilibrio
I titoli sono la prima cosa che vedono i lettori; devono essere visivamente accattivanti e facili da leggere. Ciò attira l'attenzione degli utenti e fornisce un senso di qualità e sicurezza. Una buona grafica tipografia dà fiducia ai lettori, incoraggiandoli a continuare a leggere.
Tradizionalmente questa attività veniva svolta a mano, o visivamente, perché il designer che bilancia il testo vuole attirare l'attenzione, non i calcoli. Questo argomento viene spesso definito come allineamento metrica e allineamento ottico. Per pubblicazioni di grandi dimensioni come il New York Times, il bilanciamento dei titoli è un dettaglio molto importante relativo all'esperienza utente.
Il bilanciamento del testo tipografico risale agli albori della stampa, quando le stampanti mettevano le lettere. Con l'evoluzione degli strumenti e delle tecniche, sono aumentati anche i risultati. Oggi, i designer sono in grado di colore, peso, dimensione e molto altro per bilanciare il testo nei design.
Sul web, tuttavia, è disponibile un minore controllo perché il documento cambia dimensioni e colori in base agli utenti. text-wrap: balance introduce l'arte del bilanciamento del testo sul web in modo automatizzato, basandosi sul lavoro e sulle tradizioni dei designer del settore della stampa.
Trova il giusto equilibrio tra i titoli
Questo sarà e dovrebbe essere il caso d'uso principale per text-wrap: balance. Disegna
l'occhio con dimensioni e rendilo simmetrico e leggibile per l'occhio da leggere. Imposta
tutti i titoli sul testo a capo bilanciato con il seguente CSS:
h1,h2,h3,h4,h5,h6 {
text-wrap: balance;
}
La sola applicazione di questo stile potrebbe non restituire i risultati previsti, perché il testo deve andare a capo e quindi avere una lunghezza massima della riga applicata da qualche parte. Negli esempi di questo post vedrai un
max-inline-size
impostato. 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 ripetere continuamente iterazioni per trovare la soluzione di wrapping migliore. Questo costo per le prestazioni è mitigato da una regola, funziona solo per sei righe aggregate o inferiori.
Considerazioni sulle prestazioni
Non è una buona idea applicare il bilanciamento del testo a capo all'intero progetto. È 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 di questa funzionalità è che non è necessario attendere e cronometrare il bilanciamento del testo a capo con il caricamento del carattere, come è accaduto oggi con JavaScript. Il browser se ne occupa.
Interazioni con la proprietà white-space
Il testo sul bilanciamento compete con la proprietà white-space perché una richiede l'assenza di wrapping e l'altra richiede un wrapping bilanciato. Per risolvere il problema, annulli la proprietà dello spazio bianco.
In questo modo, sarà possibile applicare di nuovo il wrapping bilanciato.
.balanced {
white-space: unset;
text-wrap: balance;
}
Il bilanciamento non modifica le dimensioni in linea dell'elemento
Alcune soluzioni JavaScript presentano un vantaggio per il wrapping di testo bilanciato, in quanto modificano il max-width dell'elemento contenitore stesso. Questo
ha un ulteriore vantaggio di essere "shrink wrap" per il blocco bilanciato. text-wrap:
balance non ha questo effetto ed è visibile in questo esempio:
Vedi come la larghezza mostrata da DevTools presenta molto spazio in più alla fine?
Il motivo è che si tratta solo di uno stile di wrapping, non di uno stile che cambia taglia. 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 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, fermandosi a un pixel CSS (non a quello di visualizzazione). Per ridurre ulteriormente al minimo i passaggi della ricerca binaria, il browser inizia con l'80% della larghezza media delle linee.