CSS text-wrap: saldo

W CSS pojawia się klasyczna technika typograficzna polegająca na samodzielnym tworzeniu podziałów wierszy w celu uzyskania równoważnych bloków tekstu.

Adam Argyle

Wartość balance w polu text-wrap jest częścią tekstu CSS poziomu 4. Zapoznaj się z przykładami z tego posta, aby dowiedzieć się, jak ten jeden wiersz kodu CSS może znacząco poprawić układy tekstu.

Bez text-wrap: balance projektanci, edytujący treści i wydawcy mają niewiele narzędzi do zmiany równowagi między liniami. Najlepszymi dostępnymi opcjami są <wbr> lub ­, które pomagają nakierowywać układy tekstu w celu podejmowania przemyślanych decyzji o miejscach podziału wierszy i słów.

Programiści nie znają ostatecznego rozmiaru, rozmiaru czcionki ani nawet języka nagłówka czy akapitu. Wszystkie zmienne potrzebne do skutecznego i estetycznego zawijania tekstu są dostępne w przeglądarce. Dlatego zawijanie nagłówków jak na ilustracji poniżej:

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

Dzięki text-wrap: balance z CSS Text 4 możesz poprosić przeglądarkę o wybranie najlepszego zrównoważonego rozwiązania zawijania wierszy do tekstu. Przeglądarka zna wszystkie czynniki, takie jak rozmiar czcionki, język i przydzielony obszar. Wyniki zawijania tekstu w przeglądarce wyglądają dzisiaj tak:

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

Warto wyświetlić je obok siebie, bez ruchu i bez nałożonych informacji debugowania.

Twój blok tekstu powinien być znacznie bardziej zadowolony z rozbudowanego bloku tekstu. Przykuwają uwagę i ogólnie są czytelniejsze.

Jak znaleźć równowagę

Nagłówki to pierwsza rzecz, jaką widzą czytelnicy. Powinny być atrakcyjne wizualnie i łatwe w odbiorze. Przyciąga to uwagę użytkowników i daje poczucie jakości i pewności. Dobra typografia daje czytelnikom pewność siebie i zachęca ich do dalszego czytania.

Tradycyjnie trzeba było robić to ręcznie lub optycznie, ponieważ równoważący tekst nie chce odpowiadać na oko, a nie algorytmowi matematycznemu. Ten temat często używa się w odniesieniu do dopasowania wskaźników i optycznego. W przypadku dużych publikacji, takich jak New York Times, równoważenie nagłówków jest bardzo ważnym elementem dbałości o wrażenia użytkownika.

Równowaga tekstu w typografii sięga początków druku, gdy drukarki ręcznie rozmieszczały litery. Wraz z rozwojem narzędzi i technik zmieniły się też wyniki. Obecnie projektanci mają różne kolory, wagę, rozmiar i inne elementy, aby zrównoważyć tekst w swoich projektach.

W internecie kontrola jest jednak mniejsza, ponieważ dokument zmienia rozmiar i kolor w zależności od użytkowników. text-wrap: balance to nowe narzędzie, które w sposób zautomatyzowany pozwala znaleźć w internecie sztukę równowagi między tekstem a pracą oraz tradycjami projektantów z branży drukarskiej.

Znajdź równowagę między nagłówkami

To i powinno być głównym przypadkiem użycia funkcji text-wrap: balance. Narysuj oko rozmiarem, tak aby było symetryczne i czytelne dla oka. 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 wyników, ponieważ tekst musi się zawijać, a w jego przypadku maksymalna długość wiersza może być stosowana w dowolnym miejscu. W przykładach w tym poście zobaczysz symbol max-inline-size. Ten styl wygląda tak: 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 zapętlić iteracje, by znaleźć najlepsze zrównoważone rozwiązanie. Ten koszt wydajności jest ograniczony przez regułę i działa tylko dla 6 zawiniętych wierszy i mniej.

Możliwe spowolnienie działania witryny

Równoważenie zawijania tekstu nie jest dobrym pomysłem w przypadku całego projektu. Ze względu na limit 6 wierszy to żądanie zmarnowane i może wpłynąć na szybkość renderowania strony.

* {
  text-wrap: balance;
}

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

Ogromną zaletą tej funkcji jest to, że nie trzeba czekać i nie trzeba długo czekać na zawijanie tekstu z wczytywaniem czcionek, jak ma to miejsce obecnie w przypadku JavaScriptu. Przeglądarka zajmuje się tym!

Interakcje z usługą white-space

Równoważenie tekstu konkuruje z właściwością white-space, ponieważ jedna z nich prosi o brak zawijania, a druga o zrównoważone zawijanie. Aby tego uniknąć, wyłącz właściwość odstępu, aby można było ponownie zastosować zrównoważone zawijanie.

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

Równoważenie nie zmieni rozmiaru wbudowanego elementu.

Niektóre rozwiązania JavaScriptu mają swoje zalety w zakresie zrównoważonego zawijania tekstu, ponieważ zmieniają właściwości max-width samego elementu. Dodatkową zaletą tego rozwiązania jest „zwinięcie” do zrównoważonego bloku. Pole text-wrap: balance nie ma takiego efektu i można je zobaczyć w tym przykładzie:

Czy w przypadku szerokości wyświetlanej w Narzędziach deweloperskich na końcu jest trochę dodatkowej przestrzeni? Dzieje się tak, ponieważ jest to tylko styl zawijania, a nie styl zmieniający rozmiar. Dlatego jest kilka scenariuszy, w których text-wrap: balance nie jest zbyt dobry (przynajmniej moim zdaniem). Na przykład nagłówki wewnątrz karty (lub w dowolnym kontenerze z obramowaniem lub cieniem).

Zrównoważone zawijanie tekstu ironicznie zakłóca działanie zawartego w nim elementu.

Krótkie wyjaśnienie metody stosowanej przez przeglądarkę

Przeglądarka skutecznie wykonuje wyszukiwanie binarne o najmniejszej szerokości. Nie powoduje to żadnych dodatkowych wierszy. Zatrzymuje się na jednym pikselu CSS (a nie na pikselu wyświetlania). Aby jeszcze bardziej zminimalizować liczbę kroków w wyszukiwaniu binarnym, przeglądarka zaczyna od 80% średniej szerokości linii.