CSS text-wrap: ładne

Wyraź zgodę na optymalizowany zawijanie tekstu, aby uzyskać lepszy wygląd kosztem szybkości.

Adam Argyle

Od wersji 117 Chrome możesz korzystać z nowej funkcji zawijania tekstu – text-wrap: prettyz CSS Text Level 4.

p {
  text-wrap: pretty;
}

https://codepen.io/web-dot-dev/pen/yLGmzLJ

Widoczne typograficznie wdowy i sieroty to pojedyncze słowa, które znajdują się na końcu akapitu lub bloku tekstu. Wdoły to słowa samotnie stojące na początku bloku tekstu, a dzieci to słowa samotnie stojące na końcu bloku tekstu. Mogą one zakłócać sposób, w jaki nasze oczy skanują tekst, przez co treści stają się trudniejsze do przeczytania. Niektórzy projektanci unikają ich za wszelką cenę i znajdują sposoby, aby ich uniknąć.

Zdjęcie pochodzące z Czcionek Google – znaki samotne i osierocielone

Od wersji 117 Chrome można uniknąć elementów bez rodzica, używając 1 wiersza kodu CSS: text-wrap: pretty.

Uwaga: text-wrap: pretty różni się od właściwości orphans w CSS, która jest przydatna podczas korzystania z układu wielokolumnowego w CSS. Ponadto pretty obsługuje tylko wiersze bez sąsiednich wierszy, a nie wiersze bez poprzednich wierszy.

Ta funkcja nie tylko sprawia, że akapity nie kończą się pojedynczym słowem, ale też dostosowuje podział wyrazów, jeśli na końcu akapitu występują kolejne odstępy, lub dostosowuje poprzednie wiersze, aby zrobić miejsce. Dopasuje ona tekst do krawędzi. text-wrap: pretty służy do ogólnego ulepszania zawinięcia linii i łamania tekstu, obecnie skupia się na osieroconych wierszach. W przyszłości text-wrap: pretty może wprowadzić więcej ulepszeń.

Zdjęcie pochodzące z artykułu Dlaczego należy usunąć akapity bez tekstu

Dostępna jest też opcja text-wrap: balance, która nie zapobiega występowaniu znaków na końcu wiersza, ale zapewnia, że tekst jest przenoszony w sposób, który tworzy harmonijny blok tekstu. Osobiście używam balance do nagłówków, a pretty do akapitów.

Jeśli interesują Cię szczegóły algorytmu używanego do określania optymalnej liczby linii lub kwestie związane z wydajnością, kliknij ten link do dokumentu projektowego stworzonego przez inżyniera Kojiego Ishii, który odpowiada za tę funkcję.

Jeśli masz inne sugestie dotyczące podziału wierszy, daj nam znać. Zgłoś problem w systemie śledzenia błędów Chromium, podając szczegóły i przykłady dobrych i złych znaków końca wiersza. Skontaktujemy się z Tobą.