`text-wrap: balance și pretty (Tipografie Fără Cuvinte Orfane)` în CSS

Culori, fundaluri și text CSS Text Level 4

Echilibrarea automată a liniilor de text în titluri cu text-wrap: balance și prevenirea cuvintelor singure pe ultimul rând cu text-wrap: pretty.

Sintaxă CSS

h1, h2 { text-wrap: balance; } p { text-wrap: pretty; }

În designul editorial clasic, un rând frânt la capăt care lasă un singur cuvânt scurt izolat pe ultimul rând poartă denumirea de „cuvânt orfan” (orphan/widow) și este considerat un defect vizual grav. Proprietatea text-wrap rezolvă această problemă în mod complet algoritmic direct în browser, fără a fi nevoie de inserarea manuală de spații non-breaking ( ) sau scripturi JavaScript de ajustare a textului.

Optimizarea automată a titlurilor și paragrafelor

/* 1. Pentru Titluri (Headings): text-wrap: balance
   Browserul calculează numărul optim de caractere pe fiecare rând,
   astfel încât toate liniile titlului să aibă lungimi aproximativ egale */
h1, h2, h3, h4 {
    text-wrap: balance;
    max-width: 25ch; /* Recomandat pentru titluri compacte */
}

/* 2. Pentru Corpul de Text (Paragrafe lungi): text-wrap: pretty
   Algoritm mai rapid care formatează textul fluid, dar garantează că
   ultimul rând va conține cel puțin două cuvinte */
p {
    text-wrap: pretty;
}

Diferența dintre balance și pretty

Valoare	Unde se utilizează	Comportament & Performanță
`balance`	Titluri scurte (sub 4–6 linii de text).	Rulează o căutare binară pentru a egala lungimea rândurilor. Este limitat automat de browser la maxim 6 rânduri pentru a evita încetinirea randării.
`pretty`	Paragrafe lungi, articole de blog.	Optimizează doar ultimele rânduri pentru a împiedica un cuvânt solitar să cadă singur pe linie, fără a re-evalua întreg blocul de text.