hyphenate and/or justify text in browsers that support that
Hyphenation of text has been around at least since the invention of print. In the digital world, word processors and DTP applications have supported this feature as long as I can remember – and that’s a long time, believe me. In browsers however, it was not supported until recently
. That’s strange, because hyphenation is particularly useful when line length is limited: in columns, but especially on mobile devices which have limited screen space.
Another situation where hyphenation is really improving the looks of your site is in combination with justified text. Without hyphenation, justified text frequently causes ugly ‘rivers’ of white space (fig. 1)
. For this reason, it was often advised not to use it
. Now more and more browsers support hyphenation, this advice is becoming obsolete. With hyphenation those ‘rivers’ do not occur (fig. 2)
Personally, I see no reason not to use hyphenation in a web site now. Browser support may not be great yet (see Can I Use
for the latest stats), but I expect that to grow soon. And: nothing goes wrong if a browser doesn’t show any hyphenation – the text will show as it did for many years.Demo
Both this text and that in the sidebar on the right are hyphenated and justified. To see the hyphenation in other languages, visit the demo page
. If you don’t see any hyphenation, I bet you're using Chrome. Try another browser (preferably Safari) to see the magic happen…Usage
Just drag one or more stacks that can contain text in the drop zone of the stack. When selecting hyphenate text (fig. 3)
, set the language of the text so the browser will know which hyphenation dictionary to use. Set the maximum number of lines that can be hyphenated in a row (I suggest 2 or 3). Optionally, you can also set the text to be justified.
To hyphenate and/or justify text in the sidebar or other non-stack areas, you can use DooBox’ Teleporter Stack
or the PlusKit Plugin by YourHead