Wprawdzie gdzieś ten temat był na liście „do opracowania”, ale raczej jego priorytet był dość niski, i pewnie jeszcze długo by sobie czekał, gdyby nie to, że rano dostałem link od znajomego do jednego z serwisów o „czasem podobnej tematyce”, gdzie jeden z komentujących „miał prośbę, by zrobić coś z justowaniem na mniejszych urządzeniach”.

Sam z justowania tekstu korzystam chętnie, choć przyznaje, że na mniejszych ekranach (w mniejszych rozdzielczościach) sprawuje się ono średnio, i często w kolumnie tekstu mamy dziury, których pozazdrościłby niejeden ser żółty.

Bez justowania na urządzeniach mobilnych

Przeczytałem wymianę komentarzy, z której poza jakby wzajemną irytacją obu stron (komentujący, i autor) nic sensownego nie wniknęło, nawet jakiejś próby ratowania sytuacji przez jednego z czytelników (i komentatorów) udzielającego się również i na naszej stronie (pozdrawiam, mam nadzieje, że przeczyta, i będzie wiedział, że chodzi o niego bez zbytecznego „naprowadzania”) niewiele chyba w temacie pomogły.

W każdym razie – o ile za justowaniem jestem (ale wiem, że są tacy, co go nie cierpią w żadnej postaci), to dla urządzeń o mniejszej przekątnej ekranu (i/lub rozdzielczości) warto rozważyć zastosowanie klasycznego wyrównania do lewej strony, zwłaszcza że nie trzeba do tego jakiejś wielkiej „aktualizacji szablonu”, choć też nie wystarczy „dosłownie jedna linijka”… ;-)

Poniżej przykład takiego „serowego” justowania na urządzeniach mobilnych, choć akurat tutaj i tak nie trafiło się najgorzej:

Pewnie można by napisać jakiś wyspecjalizowany skrypt (np. w JavaScript), ale bądźmy poważni –  kto chciałby się w takie coś bawić, zwłaszcza że skuteczność takiego rozwiązania i tak mogłaby być niezadowalająca, a przeciętnemu użytkownikowi w zupełności wystarczy jak wyłączymy justowanie na urządzeniach z mniejszym ekranem, co zrobimy w prosty sposób – za pomocą kilku linijek w pliku CSS:

@media screen w CSS

Wystarczy do strony (nieważne, czy to będzie strona w czystym HTMLu, czy oparta o jakiś CMS, np. WordPress) dodać np. taki fragment w pliku odpowiedzialnym za style CSS:

body {
    text-align: left;
}
@media screen and (min-width: 640px){
    body {
        text-align: justify;
        text-justify: inter-word;
    }
}

Choć w przypadku motywu wykorzystywanego na potrzeby Webinsider.pl justujemy tylko zawartość obiektu o klasie „entry-content”, stąd kod wygląda trochę inaczej:

.entry-content {
    text-align: left;
}
@media screen and (min-width: 640px){
    .entry-content {
        text-align: justify;
        text-justify: inter-word;
    }
}

Co, po co i dlaczego

Z racji tego, że zawsze może trafić się jakaś „bardziej egzotyczna przeglądarka”, która nie obsłuży dyrektywy „@media”, to w standardzie dla każdego serwujemy wyrównanie do lewej strony – trudno, najwyżej ktoś przegapi justowanie, przynajmniej do czasu, aż rozpowszechnia się nowe reguły/komendy związane z justowaniem, i nie trzeba będzie go wyłączać całkowicie dla tych urządzeń…

W następnym kroku zwracamy się z informacją do tych „bardziej współczesnym przeglądarek”, że jeśli rozmiar okna przeglądarki jest większy niż 640px, to prosimy zastosować justowanie tekstu, dzięki czemu tekst zostanie ładnie wyrównany z obu stron.

Dlaczego 640px?

Pewną wątpliwość może budzić wybranie minimalnej rozdzielczości, od której na stronie będzie justowanie tekstów – w naszym przypadku jest to 640px.

Nie ma jakiejś magicznej wartości, po prostu przeglądając różne wpisy/strony za pomocą emulatora/symulatora ekranów o różnej rozdzielczości sprawdzam przy jakim rozmiarze okna (w poziomie) większość teksów zaczyna się już ładnie układać przy aktywnym justowaniu…