Jak już wspominałem w niejednym artykule, ludzkie oko (a właściwie mózg i szlaki neuronów odpowiedzialne za przeżywanie wizualnej estetyki) lubi symetrię, wyrównanie do krawędzi i szeroko rozumiany porządek. Choć justowanie jest terminem zecerskim i oznacza ogólnie formowanie bloku, w języku potocznym justowanie to wyrównanie składu do obu marginesów jednocześnie.
Większość z nas justowanie poznała podczas pierwszego kontaktu z nowoczesnym edytorem dokumentów tekstowych (Word, Writer). Tam, justowanie jest jedną z dostępnych opcji wyrównania zaraz obok wyrównania do lewej krawędzi, środka, i do prawej krawędzi. Z biegiem czasu nauczyliśmy się, że opcję tę powinno się wykorzystywać w dokumentach przeznaczonych do druku, tym bardziej, jeżeli jest to coś oficjalnego jak podanie, umowa, praca dyplomowa itp…
Do tekstu, który jest wyjustowany można też przywyknąć czytając książki i czasopisma. Chyba we wszystkich książkach tekst jest wyjustowany. W czasopismach często widzimy równe kolumny tekstu, których szerokość i wysokość została dopasowana na przykład do ilustracji. Można też czasem znaleźć „popisy” DTP polegające na tym, że tekst przyjmuje kształt równiutkiego koła.
Czy należy justować tekst na stronie WWW?
W dużym skrócie: nie. Jest to bardzo popularna zasada, o której wiedzą nawet bardzo początkujący twórcy stron internetowych. Tutaj nie trzeba żadnych szczegółowych analiz i wywodów. Wystarczy wejść na dowolną stronę internetową, co do której wiadomo, że jej autorem jest profesjonalista. Może to być strona internetowa popularnej marki bądź jakakolwiek inna witryna o większym autorytecie.
Na próżno szukać tekstu wyjustowanego na stronach Google, w regulaminie Amazona czy na dowolnej podstronie firmy Apple. Szybciej znajdziemy wyrównanie do środka lub inne rozwiązania jak wyrównanie do prawej. Okazuje się, że tak samo jak młody chemik nie wlewa kwasu do wody i „nie” z czasownikami piszemy oddzielnie tak twórca stron nie justuje tekstu.
Dlaczego nie powinno się justować tekstu na stronie internetowej?
Zasada zasadą, ale czy są jakieś racjonalne argumenty przemawiające za tym aby nie justować tekstu w polu roboczym przeglądarki internetowej? Tak, i jest ich kilka.
Po pierwsze: strona nie ma stałej szerokości. Te punkty, w których tekst jest łamany u każdego użytkownika mogą wyglądać inaczej i projektant zwyczajnie nie ma nad tym pełnej kontroli. Nie dość, że użytkownicy korzystają z różnych wielkości i rozdzielczości ekranów, to na dodatek ustawienia systemowe oraz ustawienia samej przeglądarki pozwalają dostosowywać wielkość fontu do preferencji użytkownika. Co więcej, na komputerze użytkownik ma możliwość zmiany szerokości okna przeglądarki z dokładnością co do piksela a to jeszcze bardziej komplikuje sprawę.
Dlaczego to jest takie ważne? Bez stałej szerokości „kartki” na której zapisany jest tekst nie można zapanować nad poprawnym składem tekstu. Wyjustowany tekst bez eliminowania sierotek i wdów wygląda po prostu źle lub wręcz komicznie. Tekst wyjustowany ze spójnikami „i” lub „w” na końcu wiersza wygląda jak parodia poprawnego składu tekstu. Dodawanie twardych spacji za pomocą do wszystkich wystąpień spójników: i, o, w, z, a jest nadmiarowe i wygląda nienaturalnie w kodzie źródłowym. Nie można pominąć, że znacząco wzrasta ilość kodu HTML a crawlery internetowe mogą mieć problemy z ich interpretowaniem.
Brak justowania jest zatem świetnym przykładem zastosowania zasady KISS (ang. Keep It Simple, Stupid), która często jest stosowana w web designie. Jeżeli jakiś problem jest bardzo trudny do rozwiązania to niejako od początku nie próbuje się z nim mierzyć a szuka się sprytnego i kompromisowego rozwiązania. Stawiając na szali estetykę i funkcjonalność zawsze powinniśmy wybierać funkcjonalność i tym sposobem wyrównanie tekstu do lewej zdominowało strony internetowe.
W retoryce krytykującej justowanie na stronach internetowych często się mówi o dużych przestrzeniach między słowami i faktycznie taki efekt często powstaje. Jest to widoczne na mniejszych ekranach w zdaniach z długimi słowami. Tekst niby jest wyjustowany ale wygląda to niekorzystnie na małym ekranie. Zresztą, wystarczy spojrzeć na przykład:
W prawdziwym DTP, specjalista od składu tekstu wie jak odpowiednio „ponaciągać” poszczególne słowa aby nie dochodziło do powstania tak licznych dziur. Do tego trzeba mieć stałe wymiary obszaru na którym umieszcza się tekst a tego na stronach internetowych właśnie nie mamy.
Kolejny, często przytaczany argument odnosi się do dostępności. Rzekomo dyslektykom trudniej jest czytać wyjustowany tekst. Argument ten jest przytaczany w wielu tekstach na temat UX i dostępności. Więcej na ten temat można przeczytać w źródłach.
Czy jest możliwe justowanie tekstu w przeglądarce?
Oczywiście że tak. Jeżeli chcemy świadomie tę zasadę złamać dla jakichś innych wyższych celów np. kreatywnych kompozycji lub wywołania konkretnego efektu wizualnego na stronie internetowej to możemy skutecznie justować tekst, co więcej w CSS3 możemy wykorzystać wiele opcji dodatkowych aby justowanie szczegółowo dostosować do własnych potrzeb.
Justowanie tekstu CSS
Prawdopodobnie dlatego aby nie przyczynić się do rozpowszechniania błędnych praktyk, justowanie nie jest dostępne w znanych frameworkach CSS takich jak Bootstrap za pomocą jednej klasy. Justowanie trzeba napisać sobie samodzielnie ale jest to bardzo łatwe:
.text-justify {
text-align: justify;
text-justify: inter-word;
}
Właściwość text-justify może przyjmować następujące wartości:
- auto – przeglądarka determinuje algorytm justowania,
- inter-word – justowanie polega na zwiększaniu lub zmniejszaniu odległości pomiędzy słowami,
- inter-character – justowanie polega na zwiększaniu lub zmniejszaniu odległości pomiędzy znakami,
- none – wyłącza mechanizmy justowania,
- initial – ustawia metodę justowania do wartości domyślnej,
- inherit – ustawia wartość właściwości według elementu nadrzędnego.
Trzeba jednak wspomnieć o tym, że wsparcie tej właściwości CSS na ten moment jest nieco słabe:
Twarda spacja na stronie internetowej w HTML
Ponieważ dość ostro pisałem o justowaniu bez eliminowania sierotek i wdów, a w tej sekcji „zachęcam” do justowania, pokażę jak zrobić twardą spację (ang. no-break space) na stronie internetowej. Ilustracja tekstu z pierwszego testu dzielenia inter-word wygląda kiepsko bo nie wyeliminowaliśmy sierotek. Twarda spacja ma swój odpowiednik w HTML w postaci znaku specjalnego. Encja twardej spacji to można też użyć nieco dłuższego  . Tak samo jak encji można używać kodu HTML czyli   Twarda spacja w kodowaniu Unicode to U+00A0. Czytaj więcej co to wszystko oznacza w osobnym artykule: znaki specjalne HTML. Tekst z twardymi spacjami wygląda wówczas tak:
Kod HTML paragrafu wygląda tak:
Jak już wspominałem w niejednym artykule, ludzkie oko (a właściwie mózg i szlaki neuronów odpowiedzialne za przeżywanie wizualnej estetyki) lubi symetrię, wyrównanie do krawędzi i szeroko rozumiany porządek. Choć justowanie jest terminem zecerskim i oznacza ogólnie formowanie bloku, w języku potocznym justowanie to wyrównanie składu do obu marginesów jednocześnie.
Dzielenie wyrazów za pomocą ­ i <wbr>
Sprawdźmy czy następny zabieg pozwoli uzyskać lepszy efekt w naszym przykładowym bloku wyjustowanego tekstu. Aby uzyskać wygodny do czytania tekst, długie słowa muszą być czasem podzielone pomiędzy wierszami. Służy do tego dywiz, który w naszym przypadku będzie dodawany automatycznie, kiedy algorytm justowania uzna że dzielenie słowa będzie miało sens. Miejsca gdzie zgadzamy się podzielić tekst zaznaczamy kolejnym znakiem specjalnym ­ Sprawdźmy:
Nie znam się na składaniu tekstu ale wydaje mi się, że ten blok wygląda w miarę OK. Zobaczmy jak wygląda kod HTML takiego tekstu:
Jak już wspominałem w nieje­dnym ar­tykule, ludzkie oko (a właściwie mózg i szlaki neuro­nów odpowie­dzialne za prze­ży­wa­nie wizual­nej este­tyki) lubi symetrię, wy­rów­na­nie do krawędzi i szeroko ro­zu­miany porzą­dek. Choć justowanie jest terminem zecerskim i oznacza ogólnie for­mo­wa­nie bloku, w języku potocznym jus­to­wanie to wyrów­nanie składu do obu margi­ne­sów jednocześnie.
Istny dramat… no ale cel został osiągnięty. Jest justowanie, jest wąski blok i nie ma dziur.
Istnieje jeszcze tag <wbr>, który pozwala dzielić wyrazy na kilka wierszy ale nie dodaje on dywizu, czyli tego krótkiego myślnika, który jest wymagany aby tekst był zgodny z zasadami ortografii.
Podsumowanie (wyjustowane)
To prawda, że nie powinno się justować tekstu na stronach internetowych ale z drugiej strony, po coś te właściwości CSS powstały. Jeżeli mamy pomysł na kreatywne użycie tej opcji lub chcemy nadać stronie unikalnej stylistyki lub potrafimy poradzić sobie z wadami justowania poruszonymi w tym artykule to nie powinniśmy się ograniczać. Niektórzy powtarzają, że zasady są w końcu po to aby je łamać…
Na upartego, dziury w tekście da się naprawić za pomocą łamania znanego z DTP. Co prawda, nie mamy takich narzędzi jak w profesjonalnych programach ale przy odrobinie samozaparcia twarde spacje powinny być wystarczające. Problem stałej szerokości też da się ominąć stosując podział na wąskie bloki lub popularny ostatnio scroll w bok. Jeżeli przeglądarki będą wyposażone w lepsze algorytmy justowania tekstu a inter-character będzie szerzej wspierany w przeglądarkach, wyrównane bloki tekstów będą częściej stosowane na stronach internetowych.
Odpowiedz lub skomentuj