Hyphens - Breaker of Words

A hyphen (-) is a punctuation mark used to join words or separate syllables within a word. The latter comes in handy when a word is just too long, and we need to break it into smaller pieces. In CSS, we control it with the property hyphens.

Hyphens has three possible values manual, auto and none, that specify how words should be hyphenated when they are too long for its parent container.

The initial value for hyphen is manual. When it is used we have to give the browser suggestions about where a word may be able to break. If we do not give any suggestions, a word to long for the box will overflow. By using special unicode characters inside a word, we can suggest line break opportunities for the browser. We have two line break characters.

This is the hard hyphen. It indicates a line break opportunity for the browser, but it will always render, even though the line is not broken. To insert it into our HTML, we can use ‐, but it will have the same effect as hitting dash on your keyboard.

The second option is the soft hyphen. It is not rendered visibly, but instead marks where the browser may hyphenate a word not fitting its container. Use ­ in HTML, to insert a soft hyphen.

If none is used as value, words will no longer break when we use the soft hyphen ­ to suggest line breaks. Lines will only wrap at whitespace or the hard hyphen, ‐.

With the value auto, the browser identifies appropriate hyphenation points, where it will break the words. By specifying the language of an element, <p lang="en">, we can help the browser pick better points. Be aware that hyphenation points may vary with different browsers and languages. The browsers hyphenation points can be overridden with the line break character ­.

If you are still not happy with how the browsers hyphenates your words, there is some extras snacks available. Here are four CSS properties introduced in CSS Text Module Level 4, that gives us almost an inDesign level of control.

hyphenate-limit-chars takes three values. The first sets the minimum length of a word that can be hyphenated. The second is the minimum amount of characters a word can have before the hyphenation. The third and finale value limits amount of characters after the hyphen. This can help in the case of the browser hyphenating short words in a manner which makes them hard to read.

hyphenate-limit-lines limits how many consecutive lines that the browser can hyphenate. If three or more consecutive lines are hyphenated, it forms what is called a ladder. In some languages, e.g. English, it is common to avoid ladders because of aesthetic reasons.

hyphenate-limit-last can be given the value always to make the browser never hyphenate the last line. This is to avoid having a part of the word sitting alone on the last line.

Hyphens is pretty simple to use when you combine auto with correct language to enhance your browsers hyphenation. If you also try to master it with the extra properties and line break characters, there's not a star in heaven
that you can't reach.