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 on Windows. Try another browser (preferably Firefox) or operating system (preferably macOS) 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), by default the browser will use the hyphenation dictionary of the language set in Settings > General > Site Language (RapidWeaver 8 only).
- In RapidWeaver 7, or when the text to be hyphenated is in another language than the site language, set the language of the text manually.
- 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 set their selector(s) in the advanced settings area, or use DooBox’ Teleporter Stack
or the PlusKit Plugin by YourHead