Envato Elements - pobierasz 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.
Młody Szymon dzięki motywowi Divi od Elegant Themes zrobił stronę dla firmy ojca
WebInsider poleca księgowość wFirma
WebInsider korzysta z VPSa w HitMe.pl
WebInsider poleca VPSy DigitalOcean
WebInsider poleca serwis Vindicat
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.
Spodobał Ci się artykuł? Zapisz się do naszego Newslettera!