Wskazówka: Jak automatycznie dzielić wyrazy w CSS?


14 kwietnia 2014 / Michał Kortas


Jeszcze jakiś czas temu automatyczne dzielenie wyrazów na stronach internetowych było właściwie niemożliwe. Sytuacja ta uległa nieznacznej zmianie. Dzisiaj – co prawda na tę chwilę musimy korzystać z przedrostków i to w nie wszystkich przeglądarkach – możemy zaprzęgnąć do działania nasz arkusz CSS. Jest to funkcja dopiero rozwijana, ale należy wierzyć, że w niedługim czasie zostanie ona poprawnie zaimplementowana i możliwa do wykorzystywania.

Kod HTML

Deklaracja CSS

Informacje

Wartość auto dla właściwości hyphens spowoduje, że przeglądarka automatycznie wykorzysta zaimplementowany mechanizm dzielenia wyrazów i wstawi łącznik na końcu linii.

Aby ręcznie wprowadzić znacznik łącznika, możemy użyć poniższego kodu:

Jeżeli natomiast chcemy sami dopasować dzielenie wyrazów w akapicie, wartość auto należy zamienić na manual.

Jak zauważyłem, język polski na razie nie jest wspierany przez przodujące przeglądarki. Dodatkowo tekst musimy oznaczyć parametrem lang, o wartości będącej kodem języka (np. en).

Przykład użycia

Po lewej dzielenie zostało włączone, a po prawej wyłączone.

Dzielenie wyrazów CSS

 


Tagi:


6 odpowiedzi na “Wskazówka: Jak automatycznie dzielić wyrazy w CSS?”

  1. MiGoo pisze:

    Szkoda, że Chrome jeszcze tej funkcjonalności nie wspiera, nie wspominając już o obsłudze języka polskiego… Niestety, dalej jest to tylko przyszłość, może za rok już się coś zmieni :)

    PS. Na blogu ChemikPil też znajdziecie artykuł na ten temat, z omówieniem dodatkowych właściwości wykorzystywanych podczas dzielenia wyrazów. Link: http://chemikpil.pl/css-hyphen-czyli-dzielenie-wyrazow/

    • Dzięki za link. Przyda się w przyszłości. Mam nadzieję – tak jak mówisz – że w przeciągu roku język polski będzie już poprawnie obsługiwany. Typografia na www stałaby się jeszcze lepiej kontrolowana.

  2. Artur Rychlewicz pisze:

    Mi mimo wszystko wydaje się, że czytanie słów całych jest znacznie szybsze – i wygodniejsze. Większość stron i tak korzysta z linii o długości 55-75 znaków i wtedy podzielenie wyrazu nie ma praktycznie żadnego pozytywnego (wg mnie, dla jasności) skutku. Natomiast zupełnie innym przykładem są magazyny online. Tutaj można to ładnie zgrać i na takim tablecie można podziałać naprawdę zacnie.

    Innymi słowy – fajnie, że jest i na pewno niejednej osobie się przyda (zarówno przy tworzeniu jak i konsumowaniu treści).

    @michalkortas:disqus , co do roku, hmm… Raczej mała szansa (z racji tego, że sama „technologia” musi być dopracowana, a dopiero później znajdą się ochotnicy do wprowadzania „wersji językowych”), ale lepiej, żeby poczekać więcej i się nie zawieść niż dostać pół działajace dzielenie :)

    • @arturrychlewicz:disqus, masz rację. Ja myślę jednak głównie o zastosowaniu dzielenia wyrazów raczej w przypadku tekstów kolumnowych – jak ma to miejsce w gazetach. Zwykłe, szerokie akapity raczej nie będą potrzebowały właściwości hyphens. Tak jak wspomniałeś, ta funkcja otworzy wiele możliwości dla różnego rodzaju magazynów online.

    • > Większość stron i tak korzysta z linii o długości 55-75 znaków
      Taką długość wygodnie się czyta, ale to, że większość stron używa takiej długości to fikcja, średnio ok 90.

  3. Freja Draco pisze:

    Dla pewności warto zapodać coś w stylu:

    word-wrap:break-word; /* łam wyrazy (starsze przeglądarki) */
    overflow-wrap:break-word; /* łam wyrazy */
    -webkit-hyphens:auto;
    -moz-hyphens:auto;
    -ms-hyphens: auto;
    hyphens:auto; /* dodaj myślnik po przełamanym wyrazie */
    -ms-hyphenate-limit-line:2;
    hyphenate-limit-line:2; /* najwyżej dwa łamane wiersze z rzędu */

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *