CSS text-wrap: ładne

Włącz zoptymalizowane zawijanie tekstu, aby poprawić wygląd filmu, a nie szybkość.

Adam Argyle
Adam Argyle

Od Chrome 117 możesz używać nowej funkcji zawijania tekstutext-wrap: prettyz tekstu CSS – poziom 4.

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

Wdowy i sieroty typograficzne to pojedyncze słowa, które występują samodzielnie na końcu akapitu lub bloku tekstu. Wdowy to słowa samodzielnie na górze bloku tekstowego, a osierocone – same na jego końcu. Mogą przeszkadzać nam w przeglądaniu tekstu, co utrudnia jego czytanie. Niektórzy projektanci za wszelką cenę unikają ich unikania i bardzo starają się im zapobiegać.

Akapit jest widoczny z wdową na początku i sierotą na końcu w porównaniu do tego samego akapitu bez sierot i wd.
Obraz pochodzi z Google Fonts — Widows & Orphans

Od wersji Chrome 117 można unikać sierot dzięki jednemu wierszowi CSS: text-wrap: pretty.

Ta funkcja nie tylko zapewnia, że akapity nie kończą się jednym słowem. Poza tym dostosowuje łącznik, jeśli kolejne wiersze akapitu pojawią się na końcu akapitu, lub dostosowuje poprzednie wiersze, aby zrobić miejsce. Dostosowanie zostanie też odpowiednio dostosowane do uzasadnienia tekstu. text-wrap: pretty służy do ogólnie lepszego zawijania wierszy i łamania tekstu, obecnie głównie dotyczy sieroci. W przyszłości text-wrap: pretty może oferować więcej ulepszeń.

Porównanie akapitu z sierota i drugi bez sierot, każdy z odznaką złego lub dobrego.
Obraz pochodzi z artykułu Dlaczego warto usunąć sierocinie z tekstu głównego.

Dostępna jest też metoda text-wrap: balance, która nie zapobiega zawijaniu tekstu przez sieroty, ale tworzy harmonijny blok tekstu. Używam balance jako nagłówków i pretty dla akapitów.

Jeśli chcesz poznać szczegóły algorytmu używanego do określania optymalnej liczby wierszy lub kwestii związanych z wydajnością, tutaj znajdziesz link do dokumentu projektowego utworzonego przez inżyniera na temat obiektu – Koji Ishii.

Jeśli masz pomysły na podział wierszy lub inne sugestie, chętnie je poznamy. Zgłoś problem w narzędziu do śledzenia błędów Chromium, podając szczegóły oraz przykłady dobrych i nieprawidłowych podziałów wierszy. Skontaktujemy się z Tobą.