Poprawianie układu i czytelności tekstu

Funkcje internetowe: text-wrap: balance text-wrap: pretty

Układ tekstu, zwłaszcza na końcach wierszy i akapitów, może wpływać na czytelność i estetykę strony. CSS udostępnia kilka opcji zawijania tekstu, które mogą być przydatne w określonych przypadkach.

W przypadku krótkich bloków tekstu, takich jak nagłówki, użyj text-wrap: balance. Ta właściwość instruuje przeglądarkę, aby rozłożyła tekst jak najbardziej równomiernie w wierszach, co zapewnia bardziej symetryczny wygląd.

Właściwość CSS text-wrap: pretty pozwala poprawić jakość typograficzną tekstu podstawowego dzięki zastosowaniu bardziej zaawansowanego algorytmu zawijania. Została zaprojektowana specjalnie po to, aby zapobiegać „sierotom” (pojedynczym słowom w ostatnim wierszu akapitu) i tworzyć bardziej estetyczne „szorstkie” krawędzie w długich blokach tekstu.

Implementacja

1. Identyfikowanie elementów tekstowych:

W przypadku text-wrap: balance wybierz krótkie bloki tekstu, takie jak nagłówki i nagłówki tabel. Unikaj elementów, które mają widoczne pola, takie jak obramowania lub tła, ponieważ może to spowodować powstanie nieoczekiwanych, pustych obszarów w układzie.

W przypadku text-wrap: pretty wybierz elementy, które mogą zawierać długie ciągi tekstu, w których najbardziej widoczne są osierocone słowa (bękarty) lub nieprawidłowe podziały wierszy. Są to między innymi:

  • <p>
  • <blockquote>
  • <li>
  • każdy inny element, który może zawierać długie fragmenty tekstu.

Wybór odpowiedniej metody zawijania

Kryteria text-wrap: balance text-wrap: pretty text-wrap: wrap (wartość domyślna)
Najlepsze zastosowanie Krótkie bloki (nagłówki, tytuły) Długie bloki (akapity, listy) Treści kluczowe z punktu widzenia wydajności
Cel wizualny Symetryczne długości linii Unikanie osieroconych wierszy („bękartów”) Szybkie, standardowe zawijanie
Ograniczenia dotyczące linii Do 6–10 wierszy (limit algorytmu) Najlepszy w przypadku co najmniej 3 linii Brak limitu
Koszt skuteczności Wysoki: algorytm wyszukiwania binarnego Średnia: algorytm Look-back Niska: standardowy algorytm zachłanny.

2. Zastosuj wybrane zawijanie:

Stosuj text-wrap: balance zwłaszcza do krótkich, wielowierszowych elementów, takich jak nagłówki (h1–h6), podnagłówki lub cytaty.

/* Target specific heading elements for balanced wrapping */
h1, h2, h3, h4, h5, h6 {
  /* Enables balanced line-breaking logic */
  text-wrap: balance;
}

Użyj text-wrap: pretty, aby włączyć zoptymalizowany algorytm, który ocenia kilka ostatnich wierszy akapitu, aby znaleźć najlepsze punkty podziału.

/* Apply to multi-line text blocks to prevent orphaned words */
p, blockquote, li, .pretty-text {
  /* Enables pretty line-breaking logic for body copy */
  text-wrap: pretty;
}

Krytyczne ograniczenia i wydajność

text-wrap: balance

  • Limit wierszy: przeglądarki nakładają limit na liczbę wierszy, które będą próbowały zrównoważyć, aby utrzymać wydajność (zwykle 6 wierszy w Chromium i 10 wierszy w Firefoksie). Jeśli tekst przekroczy ten limit, przeglądarka powróci do standardowego działania wrap. Unikaj używania text-wrap: balance w blokach tekstu, które mogą przekroczyć te limity.
  • Kierowanie: NIE stosuj text-wrap: balance globalnie (np. * { text-wrap: balance; }). Iteracyjny algorytm „wyszukiwania binarnego” używany przez przeglądarki jest kosztowny pod względem obliczeniowym. Ogranicz jego użycie do konkretnych, krótkich elementów tekstowych.
  • Interakcja z szerokością: text-wrap: balance nie zmienia szerokości kontenera (inline-size). Wpływa tylko na sposób zawijania tekstu w ramach tej szerokości. Może to spowodować pozostawienie pustego miejsca na końcu kontenera, co może mieć wpływ na układy, które opierają się na blokach tekstu o pełnej szerokości.

text-wrap: pretty

  • Wydajność a jakość: OBOWIĄZKOWE: algorytm text-wrap: pretty jest bardziej wymagający pod względem obliczeniowym niż domyślny algorytm wrap (zachłanny), ponieważ ocenia wiele wierszy (zwykle ostatnie 4), aby zoptymalizować punkty podziału. Jeśli na stronie jest bardzo dużo tekstu, nie stosuj go globalnie do każdego elementu.
  • Najlepsze rozwiązanie w przypadku tekstu wielowierszowego: zalety funkcji pretty są najbardziej widoczne w akapitach składających się z co najmniej 3 wierszy. Nie ma to wpływu na krótki, jednolinijkowy tekst.
  • Działanie zależne od przeglądarki: pamiętaj, że szczegóły implementacji mogą się różnić. Przeglądarki oparte na Chromium zwykle skupiają się na ostatnich 4 wierszach, podczas gdy inne silniki mogą oceniać cały akapit.

Strategie zastępcze

W przeglądarkach, które nie obsługują wartości text-wrap: balance ani text-wrap: pretty, właściwość jest ignorowana, a tekst jest zawijany zgodnie z domyślnym działaniem wrap. Jest to progresywne ulepszanie, które płynnie przechodzi w standardową typografię. Dzięki temu Twoje treści będą zawsze czytelne we wszystkich przeglądarkach, a użytkownicy przeglądarek obsługujących tę funkcję będą mogli korzystać z niej w pełni.

W przypadku układów krytycznych, w których wymagany jest dopracowany układ tekstu, użyj biblioteki JavaScript, ale pamiętaj, że może to działać wolno i powodować problemy z wydajnością.