publikacja: 22 lipca 2009, 9:15; autor: Szymon Skulimowski http://wpninja.pl/lepszy-sposob-na-obustronne-justowanie-tekstu/

Lepszy sposób na obustronne justowanie tekstu

Lepszy sposób na obustronne justowanie tekstu fot. Andy Field (Hubmedia)

Specjaliści od użyteczności stron internetowych mówią, że wyrównany do obu krawędzi tekst (obustronnie wyjustowany) ssie bo obniża czytelność.

Może więc warto zainteresować się techniką, która niweluje negatywne skutki tak sformatowanego tekstu? :-)

Krótkie przypomnienie czyli jak wyjustować tekst?

Zanim przejdę do konkretów chciałbym przypomnieć początkującym użytkownikom, że tekst można wyrównać do obu krawędzi na dwa sposoby:

  • zaznaczając tekst i klikając na przycisk „Wyjustuj” w edytorze WYSIWYG:

    Edytor WYSIWYG

  • dopisując do określonego elementu własność text-align:justify:

    Plik CSS

Wracając do tematu…

Dlaczego obustronne justowanie tekstu ssie?

Przeglądarki internetowe nie są jeszcze przystosowane do poprawnego wyświetlania tak sformatowanego tekstu. Nie potrafią one bowiem dzielić wyrazów i przenosić ich do nowej linii.

Powstają więc nienaturalne przerwy pomiędzy wyrazami (szczególnie widoczne są w małych blokach). Czytelność jest znacząco obniżona ponieważ oko musi nieustannie szukać kolejnych elementów zdań.

A gdyby tak nasza strona sama umiała dynamicznie dzielić wyrazy?

wp-Typography – na ratunek typografii

Wtyczka wp-Typography posiada ogrom funkcji mających na celu poprawę typografii. Główną z nich jest dzielenie wyrazów i właśnie na niej się skupimy.

Po poprawnej instalacji i aktywacji wtyczki należy wejść w „ustawienia” / „wp-Typography„. Sekcja, która nas interesuje to „hyphenation” (czyli po polsku dywiz – kreseczka służąca do przenoszenia wyrazów):

lepszy-sposob-na-obustronne-justowanie-tekstu-5

Fragment panelu zarządzania wtyczką wp-Typography

Znajdziemy tutaj m.in. główny włącznik dzielenia wyrazów i możliwość ustawienia preferowanego języka. Dobra wiadomość, że wśród 40 obsługiwanych języków jest też polski :-).

Wymagania:

  • PHP w wersji 5+,
  • kodowanie znaków w UTF-8,
  • przechodzący walidację kod XHTML.

Przeglądarki, które obsługują skrypt prawidłowo:

  • Firefox 3+,
  • Opera 8+,
  • Internet Explorer 6 +,
  • Safari 2 +.

wp-Typography istnieje także jako zwykły kod PHP, który można przystosować do własnych potrzeb (np. w innych niż WordPress CMS-ach). Szczegółowe informacje na ten temat dostępne są na stronie internetowej autora (PHP Typography).

Aktualizacja (23.07.2009):

Wszystkim zainteresowanym kwestią typografii polecam lekturę artykułu z GRAFIKOMANII:
„10 tekstów o typografii na stronach WWW, które warto przeczytać”.

Komentarze (47)

  1. Paweł Lipiec (22 lipca 2009, 9:45) #:

    Testowałeś? Działa sprawnie? Ciekaw jestem jak to wygląda w praniu, bo ja akurat jestem fanem justowania tekstu ;)

  2. Szymon Skulimowski (22 lipca 2009, 9:55) #:

    Testowałem – działa świetnie więc polecam każdemu kto korzysta z justowania :-).

  3. Paweł Ludwiczak (22 lipca 2009, 11:09) #:

    przechodzący walidację kod XHTML” ?
    dlaczego to jest w wymaganiach? czym to jest ustosunkowane? pytam, bo ten edytor WYSIWYG dostępny w WP czasem ma z tym spore problemy… w sumie moje pytanie powinno brzmieć inaczej: w jakim stopniu kod powinien przechodzić walidację i czy dotyczy to tylko wpisów czy całej konstrukcji strony (to dla tych leniwych, którym nigdy sie nie chce sprawdzać całej strony w walidatorze ;))

  4. GrovMan (22 lipca 2009, 12:03) #:

    Być może, gubi się z błędnym kodem XHTML. Wrzuciłem na bloga do jednego wyjustowanego wpisu, blog w validatorze ma 12 błędów, a wp-Typography co prawda przenosi części wyrazów, ale nie wszędzie. Często zostają odstępy w środku linijek. Zobaczę jak będzie, gdy usunę te błędy i napiszę tutaj. ;-) Taki mały teścik.

  5. Szymon Skulimowski (22 lipca 2009, 12:59) #:

    dlaczego to jest w wymaganiach? czym to jest ustosunkowane?

    Niestety nie wiem od czego uzależniony jest ten warunek. Nie sprawdzałem wtyczki pod tym względem (testowałem na standardowym szablonie WP).

  6. Zacol (22 lipca 2009, 13:27) #:

    Ciekawe. Jak znajdę chwilę to rzucę na to okiem :)

  7. Łukasz Więcek (22 lipca 2009, 14:56) #:

    U mnie działa bezproblemowo. Wielkie dzięki za info o tej wtyczce!

  8. Ravicious (22 lipca 2009, 14:58) #:

    Też mnie ciekawią te wymagania odnośnie XHTML, bo chyba jeszcze nie widziałem bloga na WP, który serwuje ten prawdziwy XHTML – u większości jest to tzw. „htmlowa zupa ze szczyptą XHTML”.

  9. x600 (22 lipca 2009, 15:08) #:

    Testowałem jakiś czas temu. Spisuje się dobrze, ale podczas ładowania strony, zanim wczyta się skrypt tej wtyczki, mija jakas sekunda. Po załadaowaniu treść ‚mryga’ raz – zamienia się na tą wyjustowaną. To bardzo denerwuje.

  10. marsjaninzmarsa (22 lipca 2009, 16:00) #:

    Ciekawy jestem, na jakiej zasadzie działa ten skrypt – po prostu wstawia bezpośrednio do kodu html te dywizje, czy jak? I jak wygląda potem np kopiowanie do schowka tekstu, czy czytanie przez czytniki ekranowe…? Bo bez poprawnej obsługi wyżej wymienionych, skryptu nie instaluję… ;)

  11. Darek (22 lipca 2009, 23:02) #:

    Proszę o info jaka wtyczka jest potrzebna, aby schować dłuższą część wpisu – chodzi mi dokładnie o taki sam link jak umieszczony w tym wpisie – Czytaj ciąg dalszy artykułu »

  12. aniec2 (22 lipca 2009, 23:45) #:

    @x600 może update wtyczki coś dał?

    Ktoś pokaże wyniki? Jestem ciekaw jak „to” się spisuje w akcji.

  13. marsjaninzmarsa (23 lipca 2009, 0:49) #:

    @Darek: Chodzi o to, co na stronie głównej, że tylko początek wpisu? Szymon już wielokrotnie o tym pisał, poszukaj… ;)

  14. Cezary Lech (23 lipca 2009, 0:51) #:

    Problem z justowanym tekstem polega nie tylko na nienaturalnych przerwach w środku ale także na braku postrzępienia prawej krawędzi tekstu. Brak tego elementu powoduje że oko traci punkty zaczepienia, a co za tym idzie wolniej konsumuje tekst.

  15. marsjaninzmarsa (23 lipca 2009, 0:53) #:

    Edit: Sorry, że nowy komentarz, ale zapomniałem dopisać do tamtego, i głupi już klikam „Dodaj komentarz”…
    Chodziło mi o to, że Szymon już wielokrotnie pisał, co dodać w kodzie szablonu, ale najprawdopodobniej już to masz, więc po prostu kliknij w miejscu, w którym chcesz „przepołowić” wpis na „Wstaw tag ‚Więcej’” w edytorze… lub po prostu wpisz w kodzie :)

  16. marsjaninzmarsa (23 lipca 2009, 0:55) #:

    kurcze, i kolejny komentarz… wp mi wycięło kodzik – [nawias ostry otwierający]!–more–[nawias ostry zamykający] ;)

  17. aniec2 (23 lipca 2009, 10:31) #:

    Po komentarzu Czarka, nawet nie instaluje i nie sprawdzam:)

  18. Ravicious (23 lipca 2009, 10:57) #:

    IMO lepiej jest dać większą interlinię (powiedzmy 1.5em) niż justowanie.

  19. Łukasz Więcek (23 lipca 2009, 11:01) #:

    A mi na przykład dużo ciężej czyta się tekst, który z prawej strony jest postrzępiony. Generalnie dla mnie optimum stanowi interlinia 1,5 razem z justowaniem :) A czytanie postrzępionego z prawej strony tekstu jest dla mnie po prostu męczące.

  20. Darek (23 lipca 2009, 11:47) #:

    @marsjaninzmarsa: dzięki serdeczne, dokładnie o to mi chodziło.

  21. Cezary Lech (23 lipca 2009, 11:48) #:

    @Łukasz Więcek, to bardzo dziwne – 90% tekstów w internecie jest justowanych do lewej strony. Może masz mocne przyzwyczajenia z książek ?

    Dla zainteresowanych polecam pracę magisterską Adama Sydora – Badania nad czytelnością tekstu: http://www.sprawnymarketing.pl/materialy_pdf/pismo-6000-lat-ewolucji-czIII.pdf

  22. marsjaninzmarsa (23 lipca 2009, 12:39) #:

    @Darek: Nie ma sprawy. :)

    Jak dla mnie, to tekst wyjustowany jest sporo czytelniejszy przy większych partiach tekstu, a przy mniejszych (czy to na długość czy na szerokość kolumny) totalnie się nie sprawdza, więc wybór powinien być podyktowany ogólnym charakterem strony…

  23. Szymon Skulimowski (23 lipca 2009, 12:44) #:

    Dla zainteresowanych polecam pracę magisterską Adama Sydora – Badania nad czytelnością tekstu (…)

    Dzięki za namiary na publikację.

    Polecam także dział o typografii na Web Style Guide:
    http://webstyleguide.com/wsg3/8-typography/index.html

  24. GrovMan (23 lipca 2009, 13:44) #:

    Co do wymagania poprawności kodu XHTML, wtyczka czasem musi się uporać ze sformatowanym tekstem, jeżeli są błędy w tekście to może go źle zinterpretować i źle podzielić wyrazy. Sprawdziłem jak to wygląda i wyświetla się tak samo z kilko błahymi błędami, jak i bez błędów.

    u większości jest to tzw. „htmlowa zupa ze szczyptą XHTML”.

    Wystarczy, aby spełniać standardy XHTML. Tego „prawdziwego” XHTML nikt nie stosuje, bo microsoft go w ogóle nie wspiera. A jeśli gadam głupoty, to niech mnie ktoś poprawi. ;-)

  25. marsjaninzmarsa (23 lipca 2009, 16:55) #:

    @GrovMan: Niestety masz pełną rację, IE totalnie głupieje przy wysłaniu w nagłówku strony informacji, że to dokument xml… Rozwiązaniem jest negocjacja zawartości, ale to z kolei utrudnia cache’owanie stron.

  26. Piotr Sajnog (23 lipca 2009, 17:53) #:

    @ Szymon
    Dzięki za polecenie artykułu na blogu :-)

  27. Zacol (23 lipca 2009, 23:11) #:

    @marsjaninzmarsa: rozwiązaniem jest jedno i to zupełnie inne. Trzeba po prostu robić strony zgodne z W3C, a Ci co mają IE niech się martwią. Nie widzę powodu by nie stosować się do standardów. Wychodzę przynajmniej z tego założenia :) Wiele większych autorytetów w tej dziedzinie już dawno postawiło na takie rozwiązanie. Zresztą jak patrzę na statystyki mojego bloga to IE ma bardzo mały udział w jego odwiedzinach. BTW. mój blog nigdy nie był sprawdzany pod kontem zgodności z W3C.

  28. aniec2 (23 lipca 2009, 23:20) #:

    IE ma spory udział, problem w tworzeniu stron pod IE6 jest w Polsce (podkreślam!) problemem sporym, nasi sąsiedzi z UE czy z zza wielkiej wody już tego problemu nie mają.

  29. aniec2 (23 lipca 2009, 23:21) #:

    Przepraszam nie dodałem, że chodzi o strony firmowe a takich posiadam kilka (większa część pod IE wyświetla się normalnie natomiast 2 pod iE6 niestety nie;/)

  30. GrovMan (24 lipca 2009, 0:48) #:

    @aniec2:
    Przeglądając statystyki, wydaje mi się, że Polska trzyma się dużo lepiej od zachodnich znajomych. Mówię o ogólnych statystykach, z firmami może być faktycznie problem… Przykładowo mój ojciec w pracy ma IE6 i nadal nie chce zaktualizować, ani zmienić na lepszą alternatywę. :-/

  31. marsjaninzmarsa (24 lipca 2009, 1:42) #:

    Dokładnie, w swoich prywatnych projektach mogę sobie pozwolić na olanie IE6, wyświetlam na nich tylko infobar browsehappy, ale w profesjonalnych projektach… Chociaż wtedy pasek i tak dodaję ;)

  32. Łukasz Więcek (24 lipca 2009, 6:56) #:

    @aniec2: IE6 szybko przepadnie. Ostatnio Digg zablokował część swoich zasobów dla IE6, a teraz podobny ruch wykonał YouTube ;)

  33. SpeX (24 lipca 2009, 18:48) #:

    Pytanie czy ktoś to zastosował w praktyce? Bo na razie jak widzę nikt się tym (przynajmniej w prost) nie chwalił.

  34. aniec2 (24 lipca 2009, 19:02) #:

    @Łukasz jesli chodzi o blogi to jest to kilka % ale strony firmowe to około 33% IE6 – nie rozumiem czemu w firmach nie pozwalają im używać np Opery;/

    @SpeX przyłączam się. Pokażcie jak to wygląda w praktyce.

  35. SpeX (24 lipca 2009, 19:08) #:

    @aniec2: Polityka bezpieczeństwa leniwego admina :P

    A tak poza tym jak niedawno byłem u szefa jednego z większych międzymiastowych przewoźników z Krakowa, to on na komputerze miał IE 5.5 :/ I potem się dziwić iż od webmasterów wymaga się kompatybilności z prehistorią.

  36. Szymon Skulimowski (24 lipca 2009, 19:12) #:

    Pokażcie jak to wygląda w praktyce.

    Łukasz parę komentarzy wyżej przyznał, że korzysta.

  37. SpeX (24 lipca 2009, 19:25) #:

    Byłem tam nawet dzisiaj i nie zauważyłem. Ogólnie wygląda jak by tylko justował, ale już w przed ostatnim wpisie widać 3 podzielone słowa.

  38. marsjaninzmarsa (24 lipca 2009, 21:34) #:

    @Łukasz WięceK: oby – powoli już te wszystkie sztuczki żeby tylko jego użytkownicy nie zobaczyli strony całkowicie do góry nogami, zaczyna mi już wychodzić bokiem… :/

  39. slasho (25 lipca 2009, 14:50) #:

    u mnie dziala :) toin.pl

  40. covalik (27 lipca 2009, 13:37) #:

    Pomysł wtyczki bardzo mi się spodobał, szybko ją ściągnąłem i zainstalowałem do testów a ZONK :|

    „The activated plugin wp-Typography requires PHP 5.0.0 or later. Your server is running PHP 4.4.9. Please deactivate this plugin, or upgrade your server’s installation of PHP.”

    Czas pisać do Administracji :/

  41. Szymon Skulimowski (28 lipca 2009, 11:27) #:

    Coś kiepski hosting skoro jeszcze ciągną na 4-ce :/.
    Chyba już minął rok od zaprzestania prac nad tą wersją.

  42. Zacol (31 lipca 2009, 1:16) #:

    Wypróbowałem, ale nie przypadło mi to do gustu. Bez obustronnego justowania wygląda równie czytelnie :)

  43. Marcin (6 sierpnia 2009, 11:06) #:

    Witam,
    mógłby ktoś opisać wszystkie funkcje tej wtyczki?

    Pozdrawiam

  44. Heniuś (29 listopada 2009, 18:51) #:

    Ściągnąłem i nie wiem jak zainstalować do wordpressa, może mi ktoś pomóc?

  45. covalic (29 listopada 2009, 18:54) #:

    Rozpakować, katalog wrzucić na serwer do katalogu plugins, włączyć. Wszystko.

  46. Heniuś (30 listopada 2009, 11:44) #:

    Nie mam serwera, mój wordpress jest na serwerze wordpressa. Jaką opcję powinienem uruchomić, żeby tego dokonać?

  47. Marcin (30 listopada 2009, 19:31) #:

    Z tego co wiem to na wordpress.com nie można instalować własnych wtyczek.

Dodaj własny komentarz

Odnośniki z innych stron (1)

Lista innych stron, które w jakiś sposób odnoszą się do opublikowanej tutaj treści:

  1. Podsumowanie bloga - lipiec 2009 | toin.pl

    [...] Dodałem nową wtyczkę, dzięki której justowanie tek­stu już nie wygląda tak sztucz­nie. Głownie chodziło o dzielenie wyrazów. Więc teraz nie ma nie­po­trzeb­nych przerw w tekście. Pod­patrzone na WPninja.pl. [...]