Client Side Hyphenation Library

Hyphenate Your Text!

You’d be surprised how much hyphenation can help improve the appearance of your fully justified text. This library implements automatic text hyphenation for English using javascript. Just drop a script reference into your page, and the script will automatically find all fully justified paragraph elements and hyphenate words to reduce whitespace "rivering". An article describing the motivation and implementation is forthcoming.

Update 3/30/2006: Since I’ve started getting comments and pingbacks on this, I realized that people might actually be using it. So I’ve made a VERY IMPORTANT UPDATE to the code. The update now removes unused hyphenation points, because those unused hyphenation points interfere with the browser’s "find" function. This is now fixed. Another update will be forthcoming which will account for paragraphs of fluid width, so stay tuned for that - but if you’re using a local copy of the script on your site, you should update it now.

Usage

I think it’s preferable to use the script from this site, by adding a script tag such as the following:
<script src="http://www.duckwizard.com/scripts/hyphen.js" type="text/javascript"></script>
This way, users will cache the script and won’t have to download it for every site that uses it. However, if you prefer to serve the script off of your own site, you’re welcome to do so. A warning: the script, including the pattern dictionary, is over 170 KB.

Comment (RSS)  |  Trackback

5 Comments

  1. BlackMacs Stuff:

    Full client-side hyphenation

    There’s already a library, that does client-side JavaScript hyphenation - pretty neat!

    Check it Out!

    March 30, 2006, 12:54 pm

  2. Etc. at Duckwizard.com:

    [...] update a few days ago. If you’re locally hosting the script, you should update it. No Comments // Used for showing and hiding user information in the comment form function ShowUtils() {document.getElementById(”authorinfo”).style.display = “”; document.getElementById(”showinfo”).style.display = “none”; document.getElementById(”hideinfo”).style.display = “”; } function HideUtils() { document.getElementById(”authorinfo”).style.display = “none”; document.getElementById(”showinfo”).style.display = “”; document.getElementById(”hideinfo”).style.display = “none”; } [...]

    April 10, 2006, 11:36 am

  3. Nikos:

    I’ve just discovered your site, and I think that your hyphenation and your source code editor are two wonderfull ideas. about:edit is fine your are right, but it is not open source ! Nobody can not enhance it, adapt it, intergate it, … very bad.

    Anyway, concerning the hyphenation script, how have you build the hyphenation database ? I would be happy to contribute to an other set of rules for my language.

    April 13, 2007, 12:21 am

  4. Jeremy:

    Thanks for the comment, Nikos. The hyphenation dictionary was actually derived from OpenOffice.org’s hyphenation dictionary and encoded into a javascript object. The hyphenation algorithm is derived from TeX’s original algorithm developed by Frank Liang.

    I have actually been meaning to update the hyphenation script as it could use some optimization (There is a noticable delay when hyphenating a page, which is kind of unacceptable). I’ve also done a complete re-imagining of the code editor which I’ve yet to post.

    April 13, 2007, 9:20 am

  5. WDS Day One: Recap-o-rama! at Mad Web Skills - Web design in Melbourne and Shepparton:

    [...] a bad idea, unless you’re awesome like Cameron Moll. A few resources for more information: Duckwizard.com’s client-side hyphenation library, and SmartyPants by John Gruber for smart punctuation on the [...]

    September 28, 2008, 6:08 am

Leave a comment

You must be logged in to post a comment.