Which JavaScript library should I use for client-side hyphenation?

Question

I would like to implement client-side hyphenation via JavaScript on some large texts on my site. (I know about CSS3 hyphenation and will use it instead when available, but it's usually not available.)

I have been using Hyphenator.js, and it works well but is very large (my optimized, compiled build with just English comes out to 106 KB) and pretty slow. It's large and slow enough that I'm considering dropping hyphenation altogether. It's just a luxury anyway.

But recently I came across what seems to be an alternative: Hypher. What baffles me is how Hypher can me so much smaller and do the same thing. I'm wondering if anybody can explain this.

Does Hypher work just as well? Is there any reason to use Hyphenator.js instead? Hypher's readme has a link to Hyphenator.js at the bottom of the page, but none of the text explains the connection between these projects.

Does anybody have an opinion about the most efficient client-side hyphenation?

Answer 1

I had a look at hyphenation in JavaScript and found the following four libraries:

• hy-phen: Is a pure JavaScript library developed by Yevhen Tiurin since 2016 using the MIT license. You are offered a JavaScript function that you can call to hyphenate strings. You only need to include the main JavaScript file and the desired language file to use it.
• Hypher: Is a pure JavaScript library developed by Bram Stein since 2011 using the "Three Clause BSD" license. You are offered two JavaScript methods that you can call to hyphenate strings. It can only be installed using Node.js or jQuery.
• Hyphenator.js: Is a JavaScript/HTML implementation developed by Mathias Nater since 2008 using the MIT license. The project is discontinued since 2018. It is not so simple to include into your project - you need to use the Merge&Pack tool first to create a JavaScript file that you can then include. It automatically scans the HTML page and adds hyphenation to selected HTML elements. There is no JavaScript function that you can call to manually hyphenate strings.
• Hyphenopoly.js: Is the follow-up project of Hyphenator.js and developed since 2016 by Mathias Nater using the MIT license. It dropped some features of Hyphenator.js and is a bit simpler to use. Nevertheless it works the same way meaning there is no JavaScript function that you can call to manually hyphenate strings.

All four libraries are using the hyphenation algorithm developed by Franklin M. Liang that uses matching patterns to find hyphenation points in words. This algorithm does not provide 100% correct hyphenations as stated by Liang in his thesis:

These patterns find 89% of the hyphens in a pocket dictionary word list, with essentially no error.

Answer 2

The primary reason Hypher's so small, comparatively, is that it relies on an externally-loaded jQuery for page integration. Hyphenator.js is completely standalone and thus has to include way more boilerplate for manipulating HTML across browsers. (They even re-implement some jQuery functionality.)

To be fair, Hyphenator.js is a relatively old project that hasn't been completely rewritten along the way to take advantage of substantial browser improvements. (Note that they proudly support Firefox 3.0.) And, more charitably, Hyphenator.js has many more finely-grained settings.

If you're already using jQuery, and don't use Hyphenator.js's advanced API, switching to Hypher may be a worthwhile improvement.