Temat gramatyki na potrzeby sieci Web był już poruszany na tym blogu we wpisie: Gramatyka w PHP. Udało się wtedy stworzyć narzędzie do poprawy pisowni w języku polskim, które wymagałoby dopracowania, ale generalnie spełnia swoje wymagania ;)

Dzisiaj znów wracam do tematu gramatyki, tym razem od strony CSS3 i HTML (a także JavaScript w pewnym stopniu, bowiem będziemy potrzebowali cross browser polyfill).

Dzielenie wyrazów przy pomocy ­

Encja ­ pozwala na wstawienie do wyrazu znaku soft-hypen, który wskazuje miejsce podziału wyrazu w razie takiej konieczności. Znak ten wstawiamy w wyrazach, dla których przewidujemy potrzebę podzielenia. Szybki przykład wyrazu używającego znaku soft-hypen:

Encja ­ dla powyższego wyrazu będzie widoczna tylko w razie potrzeby (w zależności od tego, czy wyraz się mieści w aktualnym akapicie):

za­de­cy­do­wać

W innym zaś przypadku:

za­de­cy­do­wać

Kilka uwag:

• powyższy przykład wykorzystuje encje ­ – jeśli go nie widzisz poprawnie to zaktualizuj przeglądarkę ;),
• encja ­ jest już obsługiwana przez wszystkie nowoczesne przeglądarki, a nawet przez przestarzałe IE (od wersji 5.0),
• wady używania ­, automatyzacja wstawiania, dodatkowe uwagi,
• Use of Soft Hyphen.

CSS3: Hyphenation

Dotychczas musieliśmy sobie radzić z wykorzystaniem znaku soft-hypen i nie było to najprzyjemniejsze i najlepsze rozwiązanie. Na szczęście problem został dostrzeżony i CSS3 przynosi solucję – proste do implementacji, automatyczne dzielenie wyrazów. CSS3 Hyphenation jest częścią standardu, który wkrótce będzie implementowany przez przeglądarki, dlatego jego użycie jest najlepszym rozwiązaniem.

Dzielenie wyrazów w tekście możemy kontrolować dzięki właściwości hyphens, która przybiera jedną z następujących wartości:

• none
  dla wybranego elementu wyrazy nigdy nie będą przenoszone do nowej linii
• manual
  jest to wartość domyślna dla wszystkich elementów (w miejscach, w których nie ustawiono właściwości hyphens); oznacza, że wyrazy będą przenoszone tylko i wyłącznie w miejscach użycia znaku soft-hypen (patrz akapit wyżej)
• auto
  dzielenie wyrazów w całości przerzucamy na przeglądarkę – nawet jeśli w wyrazie użyliśmy znaku soft-hypen to przeglądarka samodzielnie podejmie decyzję wg własnego uznania (a raczej słowników i algorytmów) czy dzielić wyraz i w którym miejscu

W przypadku ustawienia właściwości hyphens na wartość auto musimy jeszcze zadeklarować odpowiedni język, np.:

czy bardziej lokalnie:

CSS3 Hyphenation – obsługa w przeglądarkach

Właściwość hyphens została obecnie zaimplementowana w następujących przeglądarkach:

• Firefox 6+
• Safari 5.1+
• Internet Explorer 10+

Co ciekawe, właściwość nie jest jeszcze obsługiwana przez Chrome, ani (co mniej zaskakujące) przez Operę. Natomiast do powyższych przeglądarek konieczne jest dodanie vendor-prefixed, np. :

Ps. dzielenie wyrazów w języku polskim jest zaimplementowane w Firefox 10+. Sprawdź wsparcie przy dzieleniu wyrazów dla innych języków (Firefox) lub przykład użycia Hyphenation (przykład 2).

Cross Browser Polyfills

CSS3 Hyphenation to nowy standard, nad którym wciąż się pracuje i w którym wciąż mogą pojawić się zmiany. Niemniej już dzisiaj technologia ta jest częściowo implementowana przez kolejne przeglądarki i kusi web developerów swoją prostotą. Wygodniej bowiem czytać tekstem ciągłym wyjustowanym, w którym zastosowano dzielenie wyrazów (na wzór książek, które wciąż w moim odczuciu są niezastąpione).

Co w takim razie z przeglądarkami nieobsługującymi jeszcze CSS3 Hyphenation? Na szczęście jest na to rozwiązanie – biblioteka hyphenator, która pełni rolę cross browser polyfill.

Kilka zalet tej biblioteki:

• prosta i automatyczna obsługa:

  1 2 3 4

  <script src="Hyphenator.js" type="text/javascript"></script> <script type="text/javascript">     Hyphenator.run(); </script>

• dodaje obsługę CSS3 Hyphenation w przeglądarkach, które nie zaimplementowały tego standardu we własnym zakresie:

  1 2 3 4

  Hyphenator.config({     useCSS3hyphenation: true }); Hyphenator.run();

• obsługa wielu języków (w tym polskiego), a także łatwa możliwość dodawania nowych języków,
• bardzo rozbudowane API ze sporą ilością opcji konfiguracyjnych,
• niekomercyjna licencja: LGPL v3.

Oczywiście są też wady:

• zwiększa obciążenie procesora przy wykonywaniu kodu i modyfikacji drzewa DOM w dokumencie (zwłaszcza dużym, jak książka),
• powoduje wczytanie dodatkowej biblioteki (i to niemałej, bo w wersji z komentarzami zajmuje 72 KB).

Podsumowanie

Gramatyka na potrzeby sieci Web jest istotnym tematem, który wraz z rozwojem CSS3 będzie często wracał. Wynika to m. in. z coraz większej popularności czytników książek elektronicznych, przy których gramatyka czy typografia są kluczowym elementem.

W niniejszym poście skupiłem się głównie na dzieleniu wyrazów, choć CSS3 wniosło już sporo innych właściwości i zmian do specyfikacji (w zakresie gramatyki i typografii), do których być może niebawem wrócę.

Zainteresowanych tematem odsyłam do innego, ciekawego i przede wszystkim darmowego źródła wiedzy: http://webtypography.net/.