Skip to main content

Jak ustawić usprawniony tekst za pomocą CSS

Week 8 (Kwiecień 2025)

Week 8 (Kwiecień 2025)
Anonim

Jedną z właściwości typografii witryny, którą możesz dostosować podczas rozwoju witryny, jest poprawność tekstu witryny. Domyślnie tekst witryny jest wyrównany do lewej strony i to ile stron opuszcza tekst. Jedyne inne opcje są słusznie uzasadnione, czego nikt nie używa na stronach internetowych, ponieważ uczyniłoby to tekst zasadniczo niemożliwym do odczytania w Internecie, lub to, co jest znane jako w pełni uzasadnione.

Usprawiedliwieni tekst to blok tekstu, który jest wyrównany zarówno po lewej, jak i po prawej stronie, w przeciwieństwie do jednego z tych boków (co robią "lewe" i "prawe" uzasadnienie). Efekt podwójnie uzasadniony uzyskuje się poprzez dostosowanie przestrzeni wyrazów i liter w każdym wierszu tekstu, aby zapewnić, że każda linia ma tę samą długość. Ten efekt nazywa się pełnym uzasadnieniem. Uzasadniasz tekst w CSS używając wyrównanie tekstu własność.

Jak działa uzasadnienie?

Powodem, dla którego często widzisz nierówną krawędź po prawej stronie bloku tekstu, jest to, że każdy wiersz tekstu nie ma tej samej długości. Niektóre wiersze zawierają więcej słów lub dłuższych słów, podczas gdy inne mają mniej lub mniej słów. Aby uzasadnić ten blok tekstu, należy dodać dodatkowe spacje do niektórych linii, aby wyrównać wszystkie linie i uczynić je spójnymi.

Każdy twórca przeglądarki internetowej ma swój własny algorytm do zastosowania dodatkowych spacji w obrębie linii. Przeglądarki analizują długość słowa, dzielenie wyrazów i inne czynniki, aby określić, gdzie umieścić spacje. W rezultacie, tekst z uzasadnieniem może nie wyglądać identycznie z jednej przeglądarki do drugiej. Jest to w porządku, ponieważ żaden odwiedzający witrynę nie przeskakuje z jednej przeglądarki do drugiej tylko po to, aby porównać wygląd linii Twojej witryny! Zapewniamy jednak, że obsługa dużych przeglądarek jest dobra do usprawiedliwiania tekstu za pomocą CSS.

Jak uzasadnić tekst

Justowanie tekstu za pomocą CSS wymaga uzasadnienia części tekstu. Zazwyczaj robi się to na akapitach tekstu, ponieważ duże bloki kontekstu tekstowego, które obejmują wiele wierszy, zostaną oznaczone tagami akapitu.

Po bloku tekstu do uzasadnienia, jest to tylko kwestia ustawienia stylu, który ma być uzasadniony właściwością stylu wyrównania tekstu CSS.

text-align: justify;

Musisz zastosować tę regułę CSS do odpowiedniego selektora, aby uzyskać blok tekstu do renderowania zgodnie z przeznaczeniem.

Kiedy usprawiedliwić tekst

Wielu ludzi lubi wygląd tekstu usprawiedliwionego z punktu widzenia projektu, głównie dlatego, że tworzy bardzo spójny, wymierny wygląd, ale istnieją wady w pełni uzasadniające tekst na stronie internetowej.

Po pierwsze, tekst uzasadniony może być trudny do odczytania. Dzieje się tak dlatego, że uzasadniając tekst, można dodać wiele dodatkowych przestrzeni między niektórymi słowami na linii. Te niespójne luki mogą sprawić, że tekst będzie trudniejszy do odczytania. Jest to szczególnie ważne na stronach internetowych, które mogą być trudne do odczytania już ze względu na oświetlenie, rozdzielczość lub inną jakość sprzętu. Dodanie nietypowych spacji do tekstu może pogorszyć sytuację.

Oprócz problemów z czytelnością, puste spacje czasami ustawiają się w jednej linii, tworząc "rzeki" białej przestrzeni w środku tekstu. Te duże luki w białej przestrzeni mogą naprawdę sprawić, że będą niezręczne. Dodatkowo, w przypadku bardzo krótkich linii, uzasadnienie może powodować linie zawierające jedno słowo z dodatkowymi odstępami między literami.

Kiedy zatem należy użyć uzasadnienia tekstu? Najlepszy czas na usprawiedliwienie tekstu ma miejsce, gdy linie są długie, a rozmiar czcionki jest mały (coś, co trudno jest zapewnić w responsywnych witrynach, w których długość linii zmienia się w zależności od rozmiarów ekranu). Nie ma twardej i szybkiej liczby dla długości linii lub rozmiaru tekstu, musisz użyć najlepszego osądu.

Po zastosowaniu stylu wyrównania tekstu w celu usprawiedliwienia tekstu, przetestuj go, aby upewnić się, że tekst nie ma rzek białej przestrzeni - i sprawdź go w różnych rozmiarach. Najłatwiej to zrobić, patrząc na niego zmrużonymi oczami. Rzeki wyróżniają się plamami bieli w szarej bryle tekstu. Jeśli widzisz rzeki, powinieneś wprowadzić zmiany w rozmiarze tekstu lub szerokości bloku tekstu, aby pozbyć się tych brzydkich rzek.

Używaj uzasadnienia tylko wtedy, gdy porównasz go z tekstem wyrównanym do lewej strony, tak jak to opisano w tym artykule. Wyglądasz jak spójność pełnego uzasadnienia, ale standardowy tekst wyrównany do lewej strony jest zwykle bardziej czytelny. Ostatecznie powinieneś usprawiedliwić tekst, ponieważ zdecydowałeś się uzasadnić tekst do celów projektowych i potwierdziłeś, że Twoja strona jest łatwa do odczytania.