CSS text-wrap: ładne

Włącz zoptymalizowane zawijanie tekstu, aby zwiększyć piękno.

Adam Argyle
Adam Argyle

W Chrome 117 możesz korzystać z nowej funkcji zawijania tekstu – text-wrap: pretty z Tekst CSS poziomu 4.

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

Typograficzna wdowa i sierotki to singiel pojedyncze słowa na końcu akapitu lub bloku tekstowego. Wdowy to słowa są same na górze bloku tekstowego, a sierote same na końcu tekstu blokować. Mogą zakłócać proces przeglądania tekstu przez oczy, utrudniając dostęp do treści aby przeczytać. Niektórzy projektanci unikają ich za wszelką cenę i starają się, aby im zapobiec.

Akapit z oznaczeniem wdowa na początku i sierotą na końcu w porównaniu z tym samym akapitem bez sierot lub wdów.
Obraz pochodzi z Google Fonts—Wdows & Sieroty
.

Od Chrome 117 można unikać sierot przy użyciu jednego wiersza CSS: text-wrap: pretty.

Ta funkcja nie tylko dba o to, by akapity nie kończyły się pojedynczego wyrazu, zmienia też sposób myślenia, jeśli pojawią się następujące po sobie linie na końcu akapitu lub dostosuje poprzednie wiersze, aby zrobić miejsce. Będzie też odpowiednio dostosować pod kątem wyjustowania. text-wrap: pretty jest dla ogólnie lepsze zawijanie wierszy i łamanie tekstu. Obecnie koncentrujemy się na sierotkach. W przyszłości możemy oferować więcej ulepszeń w usłudze text-wrap: pretty.

Porównanie akapitu z postaciami sierot i jednego bez sierot, każdy z odznaką złej lub dobra.
Obraz pochodzi z artykułu Dlaczego należy usunąć sierotki z tekstu głównego.

Jest też text-wrap: balance, który nie zawiera zapobiega powstawaniu sierot, ale zapewnia zawijanie tekstu w taki sposób, harmoniczny blok tekstowy. Osobiście używam balance jako nagłówków i pretty do akapity.

Jeśli interesują Cię szczegóły algorytmu służącego do określania z optymalną liczbą wierszy czy wydajnością, tutaj znajdziesz link do dokumentu projektowego utworzonego przez inżyniera za tę twórczość – Koji Ishii.

Jeśli chcesz podzielić się innymi ulepszeniami lub sugestiami dotyczącymi łamania zasad, chętnie je poznamy. ich! Zgłoś problem w narzędziu do śledzenia błędów w Chromium, podając szczegóły, przykłady zarówno dobre, jak i złe przerwy, a wkrótce się z Tobą skontaktujemy.