Hyphenation with CSS

A website has to support different screen dimensions because vistors use computers with different screen dimensions.

That can be tricky if a text contains long words that have to be presented in a narrow column. That can mess up the layout. And it can scare people with Hippopotomonstrosesquippedaliophobia. You may not be able treat the fobia, and you can't scale words the same way you do with images.

For text, the solution is to break up words into syllables. There are several ways to implement this:

1. include hyphens in the words.
2. include soft hyphens in the words.
3. with the CSS property hyphens

Disadvantage of option 1 and 2 is that authors must include the hyphens in the text. Where to put them, between every syllable? And how do you type a soft hyphen?

The simplest solution is to use CSS. Then the designer can determine the way words are hyphenated, and authors can focus on writing. Unfortunaltely not all browsers support the hyphens property (sigh).

Even so, it would be my choice. Hyphens are always visible, which is almost never acceptable. And requiring every writer to include soft hyphens in all text of a site is not realistic.

To let he browser apply the correct rules for hyphenation the language of the text must be set. That is done by setting the attribute lang on the appropriate HTML document or elements if multple languages ar present on a single page.

Future options

Except hyphens, other options related to hyphenation are being discussed, but it's too early to start using them.