• Strona główna
  • Curriculum Vitae
  • O mnie
  • Przykład: Gramatyka w PHP
  • Przykład: Kompresja CSS
  • Przykład: Kompresja JavaScript
  • Przykład: Skracanie linków
  • Przykład: Wykrywanie serwera HTTP
  • Przykład: Własna bramka SMS
  • Mapa strony
  • Kontakt
Niebieski Pomarańczowy Zielony Różowy Fioletowy

Gramatyka w HTML i CSS

Opublikowane 1 lutego 2012. Autor: Kamil Brenk. Wizyt: 10 941.

Kategorie: HTML5 & CSS3
Tematyka: Cross Browser Polyfills, CSS3, gramatyka i programowanie, typografia

lut 01

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):

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.:

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
    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/.

Komentarze (9)

  1. Michal Wachowski 4 lutego 2012

    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 &shy; trafiłem może kilka razy w życiu..

  2. Kamil Brenk 4 lutego 2012

    @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

  3. Dexterxx 11 lutego 2012

    Mhmm… Maxthon 3 z najnowszym webkitem i nikomu nie chciało się poprawnie &shy; zaimplementować.

    Dobrze wiedzieć, ale pewnie w realiach nieprędko wykorzystam to.

  4. miniman 12 grudnia 2012

    @Michał / @Kamil – właśnie implementuję rozwiązanie w korporacyjnym CMS :)

    Zdecydowanie przydatna technologia.

  5. ppp 28 stycznia 2013

    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.

  6. Kamil Brenk 28 stycznia 2013

    @ppp: już walczyłem z jednoliterowymi sierotami na końcu zdania na tym blogu :) http://blog.kamilbrenk.pl/gramatyka-w-php-czesc-1/

  7. dzooma 12 lipca 2013

    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

  8. ksywa 12 lipca 2013

    @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)

  9. Kamil Brenk 12 lipca 2013

    @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).



Kamil Brenk Blog

PHP, JavaScript, SQL, HTML

  • Informacje o blogu

    Kamil Brenk

    Blog o tworzeniu aplikacji na potrzeby sieci Web.

    Praktyczne przykłady, porady i sztuczki. PHP, SQL, AJAX, JavaScript, HTML i pochodne.

    Kanał RSS

    • Najnowsze
    • Komentarze
    • Popularne
    • Liczniki w CSS
    • Wyprzedaż książek o programowaniu!
    • Niestandardowy placeholder
    • JavaScript w modułach
    • Co dalej z blogiem?
    • Interaktywna mapa w HTML i CSS
    • Olsztyn: Jak wyseparować zawartość zassaną przez file_get_content?
    • ERMLAB: Od czegoś trzeba zacząć :) Wiele osób właśnie stawia na...
    • david: co nalezy wkleić na stronę aby plik ze stylami był ladowany...
    • krynicz: Nie jestem pewien czy dobrze to rozumiem: wpisujemy OG w...
    • yaro: Jak zmienić re_write znak "_" na "-"?
    • Piotr: stworzyłem prostą stronkę w PHP, czy jest możliwość aby...
    • MichalR: Super sprawa... bardzo przydatne.. dzieki i pozdrawiam..
    • Niestandardowe czcionki na stronie
    • Sposoby wczytywania JavaScript
    • Gramatyka w PHP, część 1
    • Umowa i zaliczka dla freelancera
    • Wysyłanie wiadomości SMS w PHP
    • Projekt aplikacji po stronie klienta
    • Własny mechanizm Feed
  • Szukajka
    Wpisz co chcesz wyszukać na stronie…
  • Kategorie
    • Apache
    • Freelancer
    • Front-end Development
    • HTML5 & CSS3
    • Inne
    • JavaScript
    • Książki
    • PHP
    • Po godzinach
    • Pozycjonowanie
    • Protokół HTTP
    • SQL
    • Wyrażenia regularne
  • Moje serwisy
    • Testy zawodowe
    • Miłość, uczucia i seks
  • Czytane blogi
    • Wojciech Sznapka
    • Wojciech Soczyński
    • Michał Wachowski
    • Tomasz Kowalczyk
    • Filip Górczyński
  • Strona główna
  • Curriculum Vitae
  • O mnie
  • Przykład: Gramatyka w PHP
  • Przykład: Kompresja CSS
  • Przykład: Kompresja JavaScript
  • Przykład: Skracanie linków
  • Przykład: Wykrywanie serwera HTTP
  • Przykład: Własna bramka SMS
  • Mapa strony
  • Kontakt

Kamil Brenk © 2010. All rights reserved.

Designed by FTL Wordpress Themes brought to you by Smashing Magazine.

Do góry ∧