javascriptperformancehyphenation

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


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?


Solution

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