W CSS wprowadzamy klasyczną technikę typograficzną, czyli ręczne dodawanie podziałów wierszy w przypadku zrównoważonych bloków tekstu.
Wartość balance dla adresu text-wrap jest częścią poziomu tekstu CSS 4. Dzięki przykładom w tym poście dowiesz się, jak ten jeden wiersz kodu CSS może w znacznym stopniu poprawić układ tekstu.
Bez text-wrap: balance projektanci, edytorzy treści i wydawcy mają kilka narzędzi do zmiany sposobu równoważenia linii. Najlepsze dostępne opcje to <wbr> lub ­, które pomagają w podejmowaniu przemyślanych decyzji dotyczących podziału linii i słów w układach tekstu.
Programista nie zna ostatecznego rozmiaru, rozmiaru czcionki, a nawet języka nagłówka czy akapitu. Wszystkie zmienne potrzebne do skutecznego i estetycznego zawijania tekstu są dostępne w przeglądarce. Dlatego właśnie zawijanie nagłówków wygląda tak, jak na ilustracji:
.unbalanced {
max-inline-size: 50ch;
}
Dzięki funkcji text-wrap: balance z tekstu CSS 4 możesz poprosić przeglądarkę, aby znalazła najlepsze zrównoważone rozwiązanie zawijania wierszy w tekście. Przeglądarka zna wszystkie czynniki, takie jak rozmiar czcionki, język i przydzielony obszar.
Wyniki zawijania tekstu zrównoważonego w przeglądarce wyglądają dzisiaj:
.balanced {
max-inline-size: 50ch;
text-wrap: balance;
}
Dobrze jest zobaczyć je obok siebie, bez nałożonych informacji debugowania.
Oko powinno być bardziej zadowolone ze zrównoważonego bloku tekstu. Przykuwa uwagę i jest ogólnie czytelniejsza.
Znajdowanie równowagi
Nagłówki to pierwsza rzecz, jaką widzą czytelnicy. Powinny być atrakcyjne wizualnie i łatwe do odczytania. Przyciąga to uwagę użytkownika, daje poczucie jakości i pewności. Dobra typografia zwiększa zaufanie czytelników i zachęca ich do dalszego czytania.
Tradycyjnie to zadanie było wykonywane ręcznie lub optycznie, ponieważ projektant równoważy tekst, a nie matematykę. Ten temat jest często określany jako wyrównanie metryczne lub optyczne. W przypadku dużych publikacji, takich jak New York Times, równowaga w nagłówkach jest bardzo ważna.
Znalezienie równowagi między tekstem w typografii sięga początków druku, kiedy to drukerzy ręcznie umieszczali litery. Wraz z rozwojem narzędzi i technik zmieniały się również wyniki. Obecnie projektanci wykorzystują kolor, wagę, rozmiar i inne elementy, aby zrównoważyć tekst w swoich projektach.
W przeglądarce masz jednak mniejszą kontrolę, ponieważ dokument zmienia rozmiar i kolor w zależności od użytkowników. text-wrap: balance to rozwiązanie automatyczne, które wprowadza sztukę równowagi między tekstem w internecie, bazując na pracy i tradycjach projektantów z branży drukarskiej.
Nagłówki salda
Jest to i powinno być głównym przypadkiem użycia funkcji text-wrap: balance. Narysuj duże oko, tak aby było ono symetryczne i czytelne. Użyj tego kodu CSS, aby ustawić w nagłówkach zrównoważone zawijanie tekstu:
h1,h2,h3,h4,h5,h6 {
text-wrap: balance;
}
Samo zastosowanie tego stylu może nie przynieść oczekiwanych wyników, ponieważ tekst musi zostać zawinięty, a dlatego mieć ograniczoną długość linii. W przykładach w tym poście zobaczysz 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 wolne. Aby znaleźć najlepsze zrównoważone rozwiązanie pakowania, przeglądarka musi zapętlać iteracje. Ten koszt wydajności jest ograniczony przez regułę i działa tylko w przypadku 6 zawiniętych wierszy i mniej.
Możliwe spowolnienie działania witryny
Nie warto stosować równoważenia zawijania tekstu w całym projekcie. Jest to zmarnowane żądanie z powodu limitu 6 wierszy i może wpływać na szybkość renderowania strony.
* {
text-wrap: balance;
}
h1, h2, h3, h4, h5, h6, blockquote {
text-wrap: balance;
}
Ważną zaletą tej funkcji jest to, że nie trzeba czekać ani poświęcać czasu na równoważenie tekstu przy wczytywaniu czcionki, jak w przypadku JavaScriptu. Przeglądarka zajmuje się tym.
Interakcje z właściwością white-space
Zró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 opakowanie. Aby rozwiązać ten problem, usuń z niego właściwość pustych obszarów. Wtedy będzie można ponownie zastosować zrównoważone zawijanie.
.balanced {
white-space: unset;
text-wrap: balance;
}
Równoważenie nie zmienia rozmiaru wbudowanego elementu.
Niektóre rozwiązania JavaScript umożliwiają zrównoważone zawijanie tekstu, ponieważ zmieniają max-width samego elementu zawierającego treść. Ma to dodatkową zaletę w postaci zwinięcia zwiniętego bloku do zrównoważonego bloku. Działanie text-wrap:
balance nie daje tego efektu i można to zobaczyć w tym przykładzie:
Zobacz, czy na końcu jest informacji o szerokości wyświetlanej w Narzędziach deweloperskich?
Dzieje się tak, ponieważ to tylko styl pakowania, a nie styl zmieniający rozmiar. Z tego względu w pewnych sytuacjach text-wrap: balance nie jest zbyt dobra, a przynajmniej w moim przypadku. Na przykład nagłówki na karcie (lub w dowolnym kontenerze z obramowaniem bądź cieniem).
Zrównoważone zawijanie tekstu powoduje, że elementy w nim nie są zrównoważone.
Krótki opis techniki używanej przez przeglądarkę
Przeglądarka skutecznie wyszukuje plik binarny o najmniejszej szerokości, nie powodując przy tym żadnych dodatkowych wierszy. Zatrzymuje się na jednym pikselu CSS (nie wyświetla piksela). Aby jeszcze bardziej zminimalizować liczbę kroków w wyszukiwaniu binarnym, przeglądarka zaczyna od 80% średniej szerokości linii.