Dość często spotykam się z opinią, że justowanie tekstu na stronach ma negatywny wpływa na ich czytelność. Ponieważ przeglądarki nie potrafią sylabizować, wyjustowany tekst na stronie pełen jest nieregularnych odstępów, które po pierwsze nie wyglądają, po drugie -obniżają tzw. readability. Jestem wielkim zwolennikiem justowania. Uważam, że poszarpany tekst niszczy kompozycję. Uroniłem już parę łez nad projektami zniszczonymi (moim zdaniem) przez tekst równany do lewej, dlatego kiedy odkryłem Hyphenatora, mojej radości nie było końca. Ten wpis poświęcony jest właśnie geniuszowi tego niewielkiego skryptu JS, który na zawsze zmieni oblicze justowania.

Strona domowa projekty znajduje się pod tym adresem. Generalnie skrypt jest bardzo prosty w użyciu i w zasadzie każdy powinien sobie z nim bez problemu poradzić. Pełna instrukcja w języku angielskim, pełna dokumentacja i inne, cenne wskazówki również znajdują się pod wskazanym adresem, a dla mniej obcykanych w angielszczyźnie, zamieszczam krótki instruktaż, jak szybko i bezboleśnie wyjustować tekst na stronie z użyciem Hyphenatora.

Najlepszym i najszybszym sposobem jest skorzystanie z narzędzia mergeAndPack-Tool. Narzędzie pozwala nam w prosty sposób dostosować Hyphenatora do naszych potrzeb. Oprócz wyboru języka, do dyspozycji mamy kilka ciekawych opcji, np.:

Minimalną długość wyrazu

Don’t hyphenate words shorter than this value
Domyślną wartością jest 6, co oznacza, że wyrazy składające się z mniej niź 6 znaków nie będą przerywane, tylko przenoszone do następnej linijki. Wartość tę możemy dowolnie zmieniać, ja myślę, że najbezpieczniej jest ustawić wartość 3-4 znaki na wyraz.

Określenie znaku przeniesienia

The hyphen char for words
Domyślnie jest oczywiście znak „-”, ale możemy go dowolnie zmienić.

Ukrycie tekstu do momentu zakończenia działania skryptu

Define intermediate state
Trwa to dosłownie moment, ale nie pozostaje zauważone – jeśli wartość tego pola ustawimy na „visible”, użytkownik na własne oczy zobaczy działanie skryptu. Dlatego właśnie lepiej pozostawić wartość domyślną, czyli „hidden”. Wprawdzie może się zdarzyć, że użytkownik przez chwilę w ogóle nie zobaczy tekstu, ale pojedyncze mignięcie tekstu jest zdecydowanie bardziej estetyczne, niż przemieszczające się literki.

Określenie klas dla skryptu

Custom: Collecting elements by a custom Selector-Function
Domyślnie Hyphenator stosuje dwie klasy – hyphenate i donthyphenate. Pierwszą z nich przypisujemy elementom, na których skrypt ma działać, drugą tym, an których ma nie działać. Domyślne klasy możemy zastąpić własnymi wedle uznania.

Przycisk wyłączający przenoszenie

Display Toggle Box
Domyślnie opcja ta jest odznaczona. Zaznaczenie jej checkboxa spowoduje, że w prawym górnym rogu zacznie wyświetlać się dyskretny przycisk, za pomocą którego będzie można wyłączyć skrypt lub włączyć go ponownie.

Wywołanie funkcji po wykonaniu skryptu

Trigger callback function when hyphenation is done
Zaznaczenie tej opcji pozwala wywołać dowolną funkcję po zakończeniu działania skryptu.

Obsługa komunikatu błędu

Overwrite onerrorhandler
Hyphenator ma swój własny błąd, który wyświetla się, jeśli coś pójdzie nie tak. Ten komunikat możemy łatwo zmienić – wystarczy zaznaczyć opcję „Overwrite onerrorhandler” i wpisać treść komunikatu.

Kiedy już skonfigurowaliśmy wedle uznania Hyphenator, należ wygenerować kod (przycisk „Create!”), wkleić go do pliku i zapisać. Tak powstały plik trzeba jeszcze tylko podpiąć do strony:

<script type="text/javascript" src="twoja_nazwa_pliku.js"></script>

Na koniec odpalamy Hyphenatora:

Hyphenator.run();

Od tej pory Hyphenator zaczyna swoje działania, dzielnie zmieniając wygląd wyjustowanego tekstu we wszystkich elementach z przypisaną klasą hyphenate. Myślę, że dobrym zwyczajem jest dodawanie tej klasy i justowanie tekstu przy pomocy krótkiej instrukcji jQuery (należy tylko pamiętać o podpięciu biblioteki). Dzięki temu jakiś dziwak z wyłączoną obsługą JS, który jakimś cudem trafi na naszą stronę, zobaczy tekst równany do lewej:

$(function() {
	$('twoje_selektory')
		.addClass('hyphenate')
		.css('text-align','justify')
})

Pod tym adresem możecie zobaczyć działający przykład obrazujący działania skryptu. Chyba każdy przyzna, że różnica jest zasadnicza.

Podobne wpisy:

  • Brak podobnych wpisów.