Hyphenate Stack

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 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.
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 with PlusKit, e.g. in the sidebar or on a 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 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.
The following is only meant for those interested in the technical background. There’s no need to understand (or even read) it in order to use the Hyphenate stack.

As suggested by Eric Meyer, code, var, kbd, samp, tt, dir, listing, plaintext, xmp, abbr and acronym are excluded from hyphenation in this stack, but (unlike Eric Meyer suggests) I decided not to exclude blockquote and q.

This version of the stack only uses hyphens and hyphenate-limit-lines. I did not implement hyphenate-character, hyphenate-limit-zone, hyphenate-limit-chars and hyphenate-limit-last yet, because of the lack of browser support and the fact that they are deferred to Level 4. So is hyphenate-limit-lines, but because it is supported by IE10 and Safari, I nonetheless made the decision to include it in this stack.
Support
Please use this form to report all issues, questions and comments.

This stack requires the PlusKit Plugin by YourHead (version 2 or higher).
Do you like this stack? Please consider leaving a review in the RapidWeaver Community’s Addons section [link].
rivers without hyphenation
fig. 1: ‘rivers’ of white space without hyphenation.

no rivers with hyphenation
fig. 2: no more ‘rivers’ without hyphenation.

hyphenate HUD
fig. 3: HUD of the Hyphenate stack.
© 2012-2017 Marathia Web Design | Contact