Testo a capo del CSS: saldo

CSS è una tecnica tipografica classica di creazione a mano delle interruzioni di riga per blocchi di testo bilanciati.

Adam Argyle

Il valore balance di text-wrap fa parte del testo CSS 4. Dai un'occhiata agli esempi di questo post per scoprire come questa unica riga di CSS può migliorare enormemente i tuoi layout di testo.

Supporto dei browser

• 114
• 114
• 121
• 17,50

Origine

Prova una demo

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

In qualità di sviluppatore, non conosci le dimensioni finali, le dimensioni dei caratteri o persino la lingua di un un titolo o un paragrafo. tutte le variabili necessarie per un'estetica efficace di testo a capo sono nel browser. Ecco perché vediamo il titolo wrapping come nell'immagine seguente:

. Prova una demo

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

Con text-wrap: balance di Testo CSS 4, puoi richiedere al browser di trovare la migliore soluzione di ritorno a capo bilanciata per il testo. Il browser conosce tutti i fattori, come le dimensioni del carattere, la lingua e l'area assegnata. I risultati del testo a capo bilanciato del browser oggi hanno il seguente aspetto:

. Prova una demo

.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. Cattura migliorerà l'attenzione e nel complesso è più facile da leggere.

Trovare l'equilibrio

I titoli sono la prima cosa che i lettori vedono: devono essere visivamente accattivanti facile da leggere. Ciò attira l'attenzione degli utenti, conferisce un senso di qualità e garanzia. Una buona tipografia dà fiducia ai lettori, incoraggiandoli a continua a leggere.

Tradizionalmente questa attività veniva svolta manualmente, o visivamente, come il designer il bilanciamento del testo vuole attirare l'attenzione, non i calcoli. Questo argomento riguarda spesso chiamato "allineamento metrico" o "allineamento ottico". Per pubblicazioni di grandi dimensioni come La Repubblica, il bilanciamento dei titoli è un dettaglio molto importante relativo all'esperienza utente.

Prova una demo

Nota: non è comune trovare il giusto equilibrio con il testo dell'articolo principale distinguersi o attirare l'attenzione di chi legge.

Il bilanciamento del testo nella tipografia risale agli albori della stampa, quando le stampanti posizionare a mano le lettere. Con l'evoluzione degli strumenti e delle tecniche, sono aumentati anche i risultati. Oggi i designer hanno il colore, il peso, la dimensione e altro ancora per bilanciare il testo i loro progetti.

Sul web, però, è disponibile meno controllo perché il documento cambia dimensioni e colori in base agli utenti. text-wrap: balance offre l'arte di bilanciare il testo con il web in modo automatizzato, basarsi sul lavoro e delle tradizioni degli stilisti 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. Pareggio l'occhio con le dimensioni e lo renda simmetrico e leggibile da leggere. Imposta tutti i titoli per bilanciare il testo a capo con il seguente CSS:

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

La semplice applicazione di questo stile potrebbe non restituire i risultati previsti, in quanto il testo deve andare a capo e di conseguenza viene applicata una lunghezza di riga massima da qualche parte. Viene visualizzato un max-inline-size impostato negli 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 per scoprire la migliore soluzione di wrapping bilanciata. Questo rendimento è mitigato da una regola, funziona solo per sei righe aggregate e inferiori.

Prova una demo

Considerazioni sulle prestazioni

Non è una buona idea applicare il bilanciamento del testo a capo all'intero progetto. È un a causa del limite di sei righe e potrebbe influire sulla velocità di rendering della pagina.

Cosa non fare

* {
  text-wrap: balance;
}

VALUTA INVECE

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

Un grande vantaggio di questa funzionalità è che non occorre attendere e cronometrare il testo a capo e il caricamento dei caratteri, come fai oggi con JavaScript. La il browser se ne occupa.

Interazioni con la proprietà white-space

Il testo sul bilanciamento compete con white-space perché una non richiede il wrapping e l'altra richiede avvolgimento bilanciato. Per risolvere il problema, annulli la proprietà dello spazio bianco e il wrapping bilanciato possa essere applicato di nuovo.

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

Il bilanciamento non modifica le dimensioni in linea dell'elemento

Alcune soluzioni JavaScript offrono un vantaggio in termini di bilanciamento del testo wrapping, poiché cambiano il max-width dell'elemento contenitore stesso. Questo ha un ulteriore vantaggio di essere confezionato in termoretraibile" al 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. A causa di ci sono alcuni scenari in cui text-wrap: balance non è il massimo, almeno a mio parere. 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 ottenere la larghezza minima, non genera righe aggiuntive, fermandosi a un pixel CSS (non display pixel). Per ridurre ulteriormente al minimo i passaggi della ricerca binaria, il browser inizia con l'80% della larghezza media della linea.