CSS text-wrap: balance

Klasyczna technika typograficzna ręcznego tworzenia podziałów wierszy w celu uzyskania zrównoważonych bloków tekstu jest dostępna w CSS.

Adam Argyle

Wartość balance dla text-wrap jest częścią CSS Text Level 4. Zapoznaj się z przykładami w tym poście, aby dowiedzieć się, jak ten jeden wiersz kodu CSS może znacznie poprawić układ tekstu.

Bez text-wrap: balance projektanci, redaktorzy treści i wydawcy mają niewiele narzędzi do zmiany sposobu równoważenia wierszy. Najlepsze dostępne opcje to użycie znaków <wbr> lub ­, które pomagają w inteligentnym rozmieszczaniu tekstu, aby podejmować lepsze decyzje dotyczące podziału wierszy i słów.

Jako programista nie znasz ostatecznego rozmiaru, rozmiaru czcionki ani nawet języka nagłówka lub akapitu. Wszystkie zmienne potrzebne do skutecznego i estetycznego zawijania tekstu znajdują się w przeglądarce. Dlatego widzimy zawijanie w przypadku nagłówka, jak na tym obrazie:

.unbalanced {
  max-inline-size: 50ch;
}

Za pomocą wartości text-wrap: balance z właściwości CSS Text 4 możesz poprosić przeglądarkę o znalezienie najlepszego rozwiązania do zawijania wierszy tekstu. Przeglądarka zna wszystkie czynniki, takie jak rozmiar czcionki, język i przydzielony obszar. Wyniki zrównoważonego zawijania tekstu w przeglądarce wyglądają obecnie tak:

.balanced {
  max-inline-size: 50ch;
  text-wrap: balance;
}

Warto zobaczyć je obok siebie, w trybie statycznym i bez nakładania informacji o debugowaniu.

Zrównoważony blok tekstu będzie bardziej przyjazny dla oka. Lepiej przyciąga uwagę i jest łatwiejszy do czytania.

Znajdowanie równowagi

Nagłówki są pierwszą rzeczą, którą widzą czytelnicy. Powinny być atrakcyjne wizualnie i łatwe do odczytania. Przyciąga to uwagę użytkowników i daje poczucie jakości i pewności. Dobra typografia wzbudza zaufanie czytelników i zachęca ich do dalszego czytania.

Tradycyjnie to zadanie było wykonywane ręcznie lub optycznie, ponieważ projektant równoważący tekst chce zadowolić oko, a nie matematykę. Ten temat jest często określany jako wyrównanie metryczne a optyczne. W przypadku dużych wydawnictw, takich jak New York Times, równoważenie nagłówków jest bardzo ważnym szczegółem wpływającym na wrażenia użytkowników.

Równoważenie tekstu w typografii sięga początków druku, kiedy to drukarze ręcznie umieszczali litery. Wraz z rozwojem narzędzi i technik zmieniały się też wyniki. Obecnie projektanci mają do dyspozycji kolor, grubość, rozmiar i inne elementy, które pozwalają im zrównoważyć tekst w projektach.

W przypadku internetu masz jednak mniejszą kontrolę, ponieważ dokument zmienia rozmiar i kolory w zależności od użytkowników. text-wrap: balance automatycznie przenosi sztukę równoważenia tekstu do internetu, opierając się na pracy i tradycjach projektantów z branży poligraficznej.

Zrównoważone nagłówki

To powinno być główne zastosowanie elementu text-wrap: balance. Przyciągaj uwagę rozmiarem i dbaj o symetrię oraz czytelność. Ustaw wszystkie nagłówki na zrównoważone zawijanie tekstu za pomocą tego kodu CSS:

h1,h2,h3,h4,h5,h6 {
  text-wrap: balance;
}

Samo zastosowanie tego stylu może nie przynieść oczekiwanych rezultatów, ponieważ tekst musi się zawijać, a zatem musi mieć gdzieś zastosowaną maksymalną długość wiersza. W przykładach w tym poście zobaczysz ustawienie max-inline-size. Ten styl jest podobny do max-width, ale można go ustawić raz dla dowolnego języka.

Ograniczenia

Zadanie równoważenia tekstu nie jest bezpłatne. Przeglądarka musi wykonać kilka iteracji, aby znaleźć najlepsze rozwiązanie do zawijania. Ten koszt wydajności jest ograniczony przez regułę, która działa tylko w przypadku maksymalnie 6 wierszy.

Możliwe spowolnienie działania witryny

Nie zalecamy stosowania równoważenia zawijania tekstu w całym projekcie. Jest to zmarnowane żądanie ze względu na limit 6 wierszy, co może wpłynąć na szybkość renderowania strony.

* {
  text-wrap: balance;
}

h1, h2, h3, h4, h5, h6, blockquote {
  text-wrap: balance;
}

Dużą zaletą tej funkcji jest to, że nie musisz czekać i dopasowywać zawijania tekstu do ładowania czcionki, jak to może mieć miejsce w przypadku JavaScriptu. Przeglądarka się tym zajmie.

Interakcje z właściwością white-space

Właściwość równoważenia tekstu konkuruje z właściwością white-space, ponieważ jedna z nich wymaga braku zawijania, a druga – zrównoważonego zawijania. Aby to rozwiązać, usuń właściwość spacji, a następnie ponownie zastosuj zrównoważone zawijanie.

.balanced {
  white-space: unset;
  text-wrap: balance;
}

Równoważenie nie zmieni rozmiaru w linii elementu.

Niektóre rozwiązania JavaScript do wyważonego zawijania tekstu mają tę zaletę, że zmieniają max-width elementu zawierającego. Ma to dodatkową zaletę, ponieważ jest „zapakowane” w zrównoważony blok. text-wrap: balance nie ma takiego efektu, co widać na tym przykładzie:

Widzisz, że szerokość wyświetlana w narzędziach deweloperskich ma na końcu sporo dodatkowego miejsca? Dzieje się tak, ponieważ jest to tylko styl zawijania, a nie styl zmiany rozmiaru. Z tego powodu w kilku przypadkach text-wrap: balance nie jest najlepszym rozwiązaniem, przynajmniej moim zdaniem. Na przykład w przypadku nagłówków w karcie (lub w dowolnym kontenerze z obramowaniem lub cieniem).

Zrównoważone zawijanie tekstu paradoksalnie powoduje brak równowagi w przypadku elementu, który zawiera.

Krótkie wyjaśnienie techniki używanej przez przeglądarkę

Przeglądarka przeprowadza wyszukiwanie binarne najmniejszej szerokości, która nie powoduje dodatkowych wierszy, zatrzymując się na 1 pikselu CSS (nie na pikselu wyświetlacza). Aby jeszcze bardziej zminimalizować liczbę kroków w wyszukiwaniu binarnym, przeglądarka zaczyna od 80% średniej szerokości wiersza.