CSS text-wrap: saldo

Klasyczna technika typograficzna polegająca na ręcznym umieszczaniu znaków końca wiersza w celu wyrównania bloków tekstu została wprowadzona do CSS.

Adam Argyle

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

Bez text-wrap: balance projektanci, redaktorzy treści i wydawcy mają niewiele narzędzi do zmiany sposobu równoważenia 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 potrzebne do skutecznego i estetycznego łamania tekstu znajdują się w przeglądarce. Dlatego widzimy nagłówek z opakowaniem, jak na tym obrazku:

.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 te czynniki, takie jak rozmiar czcionki, język i przydzielone miejsce. 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 uwagę użytkowników i buduje poczucie jakości. Dobra typografia buduje zaufanie czytelników i zachęca ich do dalszego czytania.

Tradycyjnie projektant wykonywał je ręcznie lub optycznie. zrównoważenie tekstu chce przyciągnąć uwagę, a nie matematykę. Ten temat jest często określany jako dopasowanie metryczne i optyczne. 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ównoważenie tekstu w typografii sięga początków drukarstwa, gdy drukarze ręcznie umieszczali litery. Wraz z rozwojem narzędzi i technik zmieniały się też wyniki. Obecnie projektanci mogą stosować kolor, wagę, rozmiar i inne elementy, aby zrównoważyć tekst w swoich projektach.

W przeglądarce masz jednak mniej opcji, ponieważ dokument zmienia rozmiary i kolory w zależności od użytkowników. text-wrap: balance wprowadza sztukę równoważenia tekstu w internecie w sposób zautomatyzowany, bazując na pracy i tradycjach projektantów z branży poligraficznej.

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

To będzie i powinno być główne zastosowanie środowiska text-wrap: balance. Narysuj oko o odpowiednim rozmiarze, symetryczne i czytelne. Ustaw wszystkie nagłówki na zrównoważony tekst 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ę łamać, a dlatego musi mieć określoną maksymalną długość wiersza. W przykładach w tym poście zobaczysz styl max-inline-size. Jest on podobny do stylu max-width, ale można go ustawić raz dla dowolnego języka.

Ograniczenia

Dostosowanie tekstu do obrazu nie jest bezpłatne. Przeglądarka musi wykonać kilka iteracji, aby znaleźć najlepsze rozwiązanie do sformatowania. 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

Nie zalecamy stosowania wyrównania tekstu do całego projektu. Jest to niepotrzebne żądanie ze względu na limit 6 wierszy i może mieć wpływ 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. O to zadba przeglądarka.

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 rozwiązać ten problem, odznacz właściwość biała przestrzeń, a następnie ponownie zastosuj wyważony układ.

.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. text-wrap: balance nie ma takiego efektu i można to zobaczyć w tym przykładzie:

Widzisz, że szerokość wyświetlana w Narzędziach deweloperskich ma na końcu dużo dodatkowego miejsca? Dzieje się tak, ponieważ jest to tylko styl zawinięcia, a nie styl zmiany rozmiaru. 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 w wyszukiwaniu binarnym, przeglądarka zaczyna od 80% średniej szerokości linii.