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:
1 | za­de­cy­do­wać |
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):
zadecydować
W innym zaś przypadku:
zadecydować
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.:
1 | <html lang="pl"> |
czy bardziej lokalnie:
1 | <div lang="en"></div> |
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. :
1 2 3 4 5 6 | article p { -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } |
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
4Hyphenator.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/.
Po pierwsze – tyle czekania i tylko to? A bu! :)
Po drugie – raczej nie skuszę się na używanie polyfills’ów dla tak mało znaczącej rzeczy.
Po trzecie – nawet na ­ trafiłem może kilka razy w życiu..
@Michał:
1) jak już otrzymam dyplom to zrobię serię o robieniu gier z inż., chyba lepszy temat
2) prawda, w większości zleceń to niewiele warta pierdoółka; co innego gdy chcemy np. publikować treść książki on-line do odczytu przez jakieś tablety czy e-readery ;)
3) szczerze? ja ani razu nie spotkałem tego w praktyce :D
Mhmm… Maxthon 3 z najnowszym webkitem i nikomu nie chciało się poprawnie ­ zaimplementować.
Dobrze wiedzieć, ale pewnie w realiach nieprędko wykorzystam to.
@Michał / @Kamil – właśnie implementuję rozwiązanie w korporacyjnym CMS :)
Zdecydowanie przydatna technologia.
Zdecydowanie przydatne. Dla języka polskiego dobrze jest też rozwiązać problem jednoliterowych sierot na końcu wiersza. Można np. zamienić wszystkie poprzedzające je spacje na tak jak zrobiono to np. tutaj.
@ppp: już walczyłem z jednoliterowymi sierotami na końcu zdania na tym blogu :) http://blog.kamilbrenk.pl/gramatyka-w-php-czesc-1/
próbowałem przetestować CSS3 Hyphenation ale dla lang=”pl” nie działa :/
jak przestawiam na lang=”en” to dzieli wyrazy ale z angielskimi wytycznymi i wygląda co najmniej dziwnie
@dzooma: potrzebna jest odpowiednia biblioteka – możesz wygenerować taką z obsługą j. polskiego. Np. tu jest wersja z j. polskim i angielskim. (sama biblioteka)
@dzooma: szczerze mówiąc nie wiem/nie pamiętam jak z obsługą języka polskiego, ale wierzę na słowo. Pozostaje czekać na implementację odpowiednich słowników przez przeglądarki :) Używałem przy stronach z angielskim contentem i działało dobrze.
@ksywa: wspomniałem we wpisie o tej bibliotece, choć osobiście nie zdecydowałbym się na jej użycie w jakimkolwiek projekcie (no może zastanawiałbym się, gdybym tworzył projekt e-książki/e-czasopisma).