Envato Elements - pobieraj co chcesz, ile chcesz

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:

www_css-justify_problem-na-mobile

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…

(!) Zgłoś błąd na stronie
Potrzebujesz profesjonalnej pomocy? Skontaktuj się z nami!
Spodobał Ci się artykuł? Zapisz się do naszego Newslettera - ZERO SPAMu, same konkrety, oraz dostęp do dodatkowych materiałów przeznaczonych dla subskrybentów!
Na podany adres e-mail otrzymasz od nas wiadomość e-mail, w której znajdziesz link do potwierdzenia subskrypcji naszego Newslettera. Dzięki temu mamy pewność, że nikt nie dodał Twojego adresu przez przypadek. Jeśli wiadomość nie przyjdzie w ciągu najbliższej godziny (zazwyczaj jest to maksymalnie kilka minut) sprawdź folder SPAM.

Patryk

CEO Webinsider.pl, a do tego CTO, CIO, CFO, CMO, CSO, COO i CRO ;-)
Pasjonat nowych technologii - od sprzętu po oprogramowanie, od serwerów po smartfony i rozwiązania IoT. Potencjalnie kiepski bloger, bo nie robi zdjęć "talerza" zanim zacznie jeść.

Dumny przyjaciel swoich psów :-)
Envato Elements - pobieraj co chcesz, ile chcesz
Napisz komentarz
wipl_napisz-komentarz_01Jeśli informacje zawarte na tej stronie okazały się pomocne, możesz nam podziękować zostawiając poniżej swój komentarz.

W tej formie możesz również zadać dodatkowe pytania dotyczące wpisu, na które – w miarę możliwości – spróbujemy Ci odpowiedzieć.
Linki partnerskie
Niektóre z linków na tej stronie to tzw. „linki partnerskie”, co oznacza, że jeśli klikniesz na link i dokonasz wymaganej akcji (np. zakup/rejestracja) możemy otrzymać za to prowizję. Pamiętaj, że polecamy tylko te produkty i usługi, z których sami korzystamy, i uważamy, że są tego na prawdę warte… :-)
Znaki towarowe i nazwy marek
W niektórych wpisach (oraz innych miejscach na stronie) mogą być przedstawione/użyte znaki towarowe i/lub nazwy marek, które stanowią własność intelektualną tych podmiotów, a zostały użyte wyłącznie w celach informacyjnych.
Envato Elements - pobierasz co chcesz, ile chcesz