W CSS pojawia się klasyczna technika typograficzna polegająca na samodzielnym tworzeniu podziałów wierszy w celu uzyskania równoważnych bloków tekstu.
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:
![Nagłówek jest wyróżniony za pomocą Narzędzi deweloperskich, rozciąga się na pełną szerokość obszaru wewnętrznego, a w drugim wierszu znajduje się 2 wiszące słowa.](https://developer.chrome.com/static/docs/css-ui/css-text-wrap-balance/image/headline-is-highlighted-fe0c4a80e307b.png?authuser=9&hl=pl)
.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:
![Nagłówek jest wyróżniony tak jak w poprzednich Narzędziach deweloperskich, ale tym razem nie rozciąga się na pełną szerokość. Zaczyna się on przed końcem wiersza, więc stanowi zrównoważony blok tekstu.](https://developer.chrome.com/static/docs/css-ui/css-text-wrap-balance/image/headline-is-highlighted-0861292a42f0d.png?authuser=9&hl=pl)
.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. Chwyta uwagę i czytelność jest ogólnie łatwiejsza.
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.