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 unica riga di CSS può migliorare enormemente i tuoi layout di testo.
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:
.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:
.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.
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.
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.
* { 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. 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.