Testo a capo in CSS: piuttosto

Attiva la funzione di testo a capo ottimizzato per la bellezza anziché la velocità.

Adam Argyle
Adam Argyle

Da Chrome 117 puoi utilizzare una nuova funzionalità di testo a capo: text-wrap: pretty del testo CSS 4.

p {
  text-wrap: pretty;
}
https://codepen.io/web-dot-dev/pen/yLGmzLJ

Le vedove e gli orfani tipografici sono single parole da sole alla fine di un paragrafo o di un blocco di testo. Le vedove sono parole da soli in cima a un blocco di testo, mentre gli orfani sono soli alla fine di un testo bloccare. Possono interrompere il modo in cui i nostri occhi scorrono il testo, rendendo i contenuti più difficili. per leggere. Alcuni designer li evitano a tutti i costi e fanno di tutto per evitarli.

Un paragrafo viene mostrato con una vedova all'inizio e un'orfana alla fine, rispetto allo stesso paragrafo senza orfani o vedove.
. Immagine proveniente da Google Fonts—Widows & Orfani

A partire da Chrome 117, è possibile evitare gli orfani utilizzando una riga di CSS: text-wrap: pretty.

Questa funzione non si limita a garantire che i paragrafi non terminino con un singola parola, regola anche la sillabazione in caso di presenza di righe con trattino consecutivi alla fine di un paragrafo o regola le righe precedenti per fare spazio. Inoltre, e regolare in modo appropriato la giustificazione del testo. text-wrap: pretty è per il ritorno a capo automatico e il testo con interruzioni migliori, attualmente incentrato sugli orfani. In futuro, text-wrap: pretty potrebbe offrire ulteriori miglioramenti.

Un confronto di un paragrafo con orfani e uno senza orfani, ciascuno con il badge del male o del male.
. Immagine proveniente da Perché dovresti rimuovere gli orfani dal corpo del testo.

C'è anche text-wrap: balance, che non evita gli orfani, ma assicura che il testo venga a capo in modo da creare un un blocco di testo armonioso. Utilizzo personalmente balance per i titoli e pretty per e paragrafi.

Se ti interessano i dettagli dell'algoritmo utilizzato per determinare numero ottimale di righe o considerazioni sulle prestazioni, ecco un link al documento di progettazione creato dal tecnico dietro l'elemento Koji Ishii.

Se hai altri miglioramenti o suggerimenti per l'interruzione di riga, ci piacerebbe conoscere la tua opinione loro! Segnala un problema nello strumento di segnalazione dei bug di Chromium con i dettagli, esempi di le interruzioni di riga positive e negative, e ti ricontatteremo.