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 znacznie poprawić układy tekstu.

Bez: text-wrap: balance; projektanci, edytujący treści i wydawcy kilka narzędzi aby zmienić sposób balansowania linii. Najlepszymi dostępnymi opcjami <wbr> lub ­ nakierować układy tekstu na lepsze decyzje o tym, gdzie dzielić wiersze i słowa.

Programiści nie znają ostatecznego rozmiaru, czcionki ani języka nagłówek lub akapit. Wszystkie zmienne niezbędne do skutecznego i estetycznego funkcji zawijania tekstu. Dlatego widzimy nagłówek zawijanie w ten sposób:

.

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

Dzięki text-wrap: balance z CSS Text 4 możesz poprosić przeglądarkę, aby wybierz najlepsze rozwiązanie do zawijania wierszy. 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ć bardziej zadowolony z równowagi. Chwyta i lepiej je czytać.

Jak znaleźć równowagę

Nagłówki to pierwsza rzecz, jaką widzą czytelnicy. powinny być atrakcyjne wizualnie. łatwe do odczytania. Przyciąga to uwagę użytkownika i daje poczucie jakości z całego świata. Dobra typografia daje czytelnikom pewność siebie, zachęcając ich do czytaj dalej.

Tradycyjnie projektant wykonywał je ręcznie lub optycznie. zrównoważenie tekstu chce przyciągnąć uwagę, a nie matematykę. Ten temat jest często to tzw. dopasowanie metryczne z dopasowaniem optycznym. W przypadku dużych publikacji, takich jak New York Times, zrównoważenie nagłówków jest bardzo ważną kwestią dotyczącą wygody użytkownika.

Równowaga tekstu w typografii sięga początków druku, gdy drukarki ręcznie rozmieszczone litery. Wraz z rozwojem narzędzi i technik zmieniły się też wyniki. Obecnie projektanci wykorzystują m.in. kolor, wagę, rozmiar i inne elementy, i ich projekty.

W internecie dostępna jest jednak mniejsza kontrola, ponieważ dokument zmienia się rozmiarów i kolorów w zależności od użytkowników. text-wrap: balance łączy sztukę równoważenie obciążenia tekstu w internecie i umożliwianie automatycznej pracy jak tradycyjni projektanci z branży drukarskiej.

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

To i powinno być głównym przypadkiem użycia funkcji text-wrap: balance. Rysowanie dbają o rozmiar i sprawiają, że są symetryczne i czytelne dla oka. Ustaw aż po zrównoważone zawijanie tekstu przy użyciu takiego kodu CSS:

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

Samo zastosowanie tego stylu może nie przynieść spodziewanych wyników, ponieważ tekst musi się zawijać i dlatego maksymalna długość wiersza wynosi w dowolnym miejscu. Zobaczysz ikonę max-inline-size jest ustawiony na przykładach w tym poście, ten styl ma format 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ć się i wykonania iteracji w celu znalezienia najlepszego, zrównoważonego rozwiązania. To działanie koszt jest ograniczony przez regułę, działa on 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. To z powodu limitu 6 wierszy 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 można zawijać tekst. równoważenie obciążenia z wczytywaniem czcionek, jak to jest obecnie w języku JavaScript. przeglądarka poradzi sobie z tym!

Interakcje z usługą white-space

Równoważenie tekstu konkuruje z white-space usłudze, ponieważ jedna prosi o brak zawijania, a druga – zrównoważone zawijanie tekstu. Aby tego uniknąć, anuluj ustawienie właściwości pustej przestrzeni, a następnie: zrównoważone zawijanie może zostać zastosowane ponownie.

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

Równoważenie nie zmieni rozmiaru wbudowanego elementu.

Niektóre rozwiązania JavaScriptu mają swoje zalety w przypadku zrównoważonego tekstu o pakiecie, ponieważ zmieniają one właściwość max-width samego elementu. Ten ma dodatkową zaletę: to, że można je zmniejszyć. 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. Z powodu jest kilka scenariuszy, w których text-wrap: balance nie jest zbyt dobry, a przynajmniej moim zdaniem. Na przykład nagłówki na karcie (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 dla najmniejszej szerokości nie powoduje tworzenia dodatkowych wierszy i kończy się na jednym pikselu CSS (nie jest wyświetlany piksel). Aby jeszcze bardziej zminimalizować liczbę kroków wyszukiwania binarnego, przeglądarka zaczyna od 80% średniej szerokości linii.