Hyphenate Stackhyphenate 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 for many years. 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 perfect 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.
DemoBoth 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…
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.
Since version 1.2.0 of this stack, advanced options are included to hyphenate text in page elements outside the stack (like the sidebar), and/or exclude text in certain elements from being hyphenated*. These options are meant for advanced users only and the use of it is not supported.
* because the
* because the
:notselector does not seem to work properly with hyphenation
Need help using it on a non-stacks page? Here’s a tutorial.
The maximum number of lines that can be hyphenated in a row is only supported in IE10 and Safari, not in Firefox.
In Preview mode in RapidWeaver, hyphenation may differ from that in Safari. Preview your page in Safari to see how it will look for your visitor.
In Edit mode, the effect will not always be shown correctly.
Hyphenation in a website depends on the libraries provided by the browser or operating system. Those libraries are not always perfect. The only way to force hyhenation on a particular word is to insert a discretionary hyphen (often called soft hyphen in html, written as
­at the point between characters that may be broken, e.g.
coun­ter-rev­o­lu­tion. You will need to select each
­and apply Format > Apply Formatting to it. It's a bit tedious, so I would only use it when really necessary.
fig. 1: ‘rivers’ of white space without hyphenation.
fig. 2: no more ‘rivers’ without hyphenation.
Pay what you wantBuy this stack and pay for it what you think is reasonable. In the shopping cart, just change the suggested price to the amount you are willing to pay.
Of course, you are free to set the price to zero resulting in a free download but (especially when you intend to use it in a project) consider the following:
I do my best to deliver professional quality, so I spend a lot of time developing, updating and supporting these stacks.
A little income from my work will motivate me to continue and develop more useful RapidWeaver stuff.
Paying a reasonable price will make you feel better, knowing you’re supporting an indie developer.