Testo a capo del CSS: saldo

Una tecnica di tipografia 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 del livello 4 del testo CSS. Dai un'occhiata agli esempi in questo post per scoprire come questa singola riga di CSS può migliorare notevolmente i layout di testo.

Senza text-wrap: balance, i designer, gli editor dei contenuti e gli editori hanno pochi strumenti per modificare il modo in cui le linee sono bilanciate. Le opzioni migliori disponibili sono l'utilizzo di <wbr> o ­ per aiutare a guidare i layout di testo verso 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 un paragrafo. tutte le variabili necessarie per un'estetica efficace di testo a capo sono nel browser. Questo è il motivo per cui vediamo il titolo wrapping 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 a capo più equilibrata per il testo. Il browser conosce tutti i fattori, come le dimensioni dei caratteri, la lingua e l'area allocata. Attualmente, i risultati dell'a capo del testo bilanciato del browser hanno il seguente aspetto:

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

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

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 vedono i lettori; devono essere accattivanti e facili da leggere. Ciò attira l'attenzione degli utenti, conferisce un senso di qualità e garanzia. Una buona grafica dà fiducia ai lettori, incoraggiandoli a continua a leggere.

Tradizionalmente questa attività veniva eseguita a mano o in modo ottico, poiché il designer che bilancia il testo vuole accontentare l'occhio, non la matematica. Questo argomento riguarda spesso chiamato "allineamento metrico" o "allineamento 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 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 porta l'arte del bilanciamento del testo sul web in modo automatico, basandosi sul lavoro e sulle tradizioni dei designer del settore della stampa.

Trova il giusto equilibrio tra i titoli

Questo sarà e deve essere il caso d'uso principale per text-wrap: balance. Disegna l'occhio con dimensioni adeguate e rendilo simmetrico e leggibile. Imposta tutti i titoli per bilanciare il testo a capo 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, in quanto il testo deve andare a capo e di conseguenza viene applicata una lunghezza di riga massima da qualche parte. Viene visualizzata una 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.

Considerazioni sulle prestazioni

Non è consigliabile applicare il bilanciamento del rientro del testo all'intero design. È una 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 occorre attendere e cronometrare il testo a capo e il caricamento dei caratteri, come fai oggi con JavaScript. Il browser si occupa di tutto.

Interazioni con la proprietà white-space

Il bilanciamento del testo è in concorrenza con la proprietà white-space perché una richiede l'assenza di a capo e l'altra richiede un text wrapping 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 per il wrapping del testo bilanciato hanno un vantaggio, in quanto modificano il max-width dell'elemento contenitore stesso. Questo ha un ulteriore vantaggio di essere "shrink wrap" 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 rientro del testo bilanciato crea ironicamente uno squilibrio nell'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.