CSS Hyphen czyli dzielenie wyrazów

Poprawna justyfikacja tekstu w przeglądarce od zawsze była sporym wyzwaniem. Albo w tekście powstają nienaturalne odstępy między wyrazami, albo na końcach linii pozostają pojedyncze litery. Innym problemem są tzw. kanaliki (ang. rivers), czyli białe miejsca, składające się ze spacji, układające się w pionie. Aby poprawić czytelność takiego tekstu, CSS3 wprowadza właściwość hyphens.

Czym jest hyphens

To nic innego jak specjalna właściwość w CSS Text Module, która pozwala nam dzielić wyrazy w tekście. Żeby jej użyć wystarczy poniższa deklaracja:

p {
    text-align: justify;
    			    			
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

Przykład działania (obsługa przeglądarek: caniuse.com)

Jako wartość hyphens możemy podać:

  • none – wyrazy nie będą dzielone
  • auto – wyrazy będą dzielone automatycznie według ustawień przeglądarki dla danego języka
  • manual – wyrazy będą dzielone tylko w przypadku gdy wewnątrz nich znajdzie tzw. znak miękkiego łamania ­ np.: ex­ample

Więcej kontroli w CSS4

Niestety jak to czasem bywa, ta właściwość rozwiązując jeden problem, generuje inne. Poniżej prezentuje możliwości, które mają zostać wprowadzone w CSS4, dzięki czemu mamy zyskać większą kontrolę nad tym, w jaki sposób przeglądarka będzie dzielić wyrazy.

hyphenate-limit-lines

Dzięki hyphenate-limit-lines mamy możliwość określić w ilu maksymalnie liniach pod rząd wyrazy mogą być dzielone. Zapobiegamy tym samym sytuacji, w której np. 5 kolejnych linii posiada na końcu znak łącznika. Powstaje wtedy coś w rodzaju drabinki, która znacząco utrudnia czytanie tekstu, i wygląda nieestetycznie. Poniższa deklaracja ogranicza liczbę takich linii do maksymalnie dwóch:

hyphenate-limit-lines: 2
Efekt bez użycia hyphenate-limit-lines
Efekt z użyciem hyphenate-limit-lines

Po za liczbą linii, przewidziana jest jeszcze wartość no-limit, która myślę, że rozumie się sama przez się.

hyphenate-limit-chars

Dzięki tej właściwości będziemy w stanie zapobiec sytuacjom w którym dzielimy zbyt małe wyrazy, lub przenosimy do nowej linii ostatnią literę. hyphenate-limit-chars przyjmuje trzy wartości. Pierwsza z nich to minimalna ilość znaków w wyrazie, druga określa minimum znaków po których może nastąpić dzielenie a ostatnia ile minimum znaków powinno być przenoszonych do nowej linii. Dla przykładu:

hyphenate-limit-chars: auto 3

… nie ustawiliśmy minimalnej wielkości wyrazu, ale przeglądarka podzieli wyraz tylko wtedy, gdy przed i po łączniku znajdą się minimum 3 znaki.

Efekt bez użycia hyphenate-limit-chars
Efekt z użyciem hyphenate-chars-lines

hyphenate-limit-zone

Zasada działania hyphenate-limit-zone jest taka, że każdy wyraz który zaczyna się w wyznaczonej przez nas strefie jest automatycznie przenoszony do nowej linii a nie dzielony (jeżeli coś nakręciłem to mnie poprawcie).

hyphenate-limit-zone: 40px
Efekt bez użycia hyphenate-limit-zone
Efekt z użyciem hyphenate-chars-zone

Jak widać na pierwszym obrazku, np. wyraz alias jest dzielony normalnie, podczas gdy na drugim, po zastosowaniu hyphenate-limit-zone został przeniesiony do nowej linii.

Coś jeszcze?

Po za wymienionymi właściwościami, w standardzie znajdują się informacje o jeszcze dwóch możliwościach. Pierwsza z nich to hyphenate-limit-last, który opisuje w jaki sposób przeglądarka ma się zachować w przypadku ostatnich linii tekstu w danym paragrafie.
Przewidziana też została właściwość hyphenate-character, która definiuje znak pojawiający się jako łącznik, ale umówmy się, będzie to raczej mało popularne.

Podsumowanie

To co tutaj opisałem to oczywiście śpiew przyszłości, choć dla posiadaczy IE 10 ta przyszłość nie jest taka odległa. Wszystkie obrazki pochodzą bowiem z testów przeprowadzonych właśnie na tej przeglądarce. Sporo czasu jednak minie zanim będziemy mogli tego używać swobodnie w naszych projektach bez wykorzystania JS (np. hyphenator) jako zamiennika.