Marathia’s Stacks

stacks for the rest of us

stacks for the rest of us

Stacks Image 91039

Hyphenate Stack

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 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.

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.
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 :not selector does not seem to work properly with hyphenation
Need help using it on a non-stacks page? Here’s a tutorial.

Limitations
Hyphenation is currently only supported in Safari, Firefox, IE10+, Edge, Android and iOS. Although it is claimed to be supported in Chrome since version 24 beta, it is only supported since version 55, but not in Windows.
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.

See the Hyphenate support page for more details.

Support
Please use this form to report all issues, questions and comments.

This stack requires RapidWeaver (version 7 or higher) and the Stacks plugin by YourHead (version 3.5 or higher).

Yes, this website uses cookies too. Here’s the annoying but obligatory cookie warning. More info…