Hyphenator.js
- This repository replaces https://code.google.com/p/hyphenator/
- Demo: http://mnater.github.io/Hyphenator/
Note: Hyphenator.js has somewhat grown old. Have a look at its successor: https://github.com/mnater/Hyphenopoly
While there will still be bugfixes for Hyphenator.js, new features will not be added anymore (except new languages).
Overview
Hyphenator.js is a free open source Javascript library that automatically hyphenates text on websites. It comes in handy as a _polyfill_ for legacy browsers that don't support CSS 3 hyphenation at all or for modern browsers that do hyphenation, but do not provide hyphenation dictionaries for a particular language.
Hyphenator.js …
* can be
included by the creator of the website.
* can be used
as bookmarklet on any website.
* is
unobtrusive.
* steps behind CSS 3 hyphenation if supported (
how to use Hyphenator_Loader).
* runs on the client in order that the HTML source of the website may be served clean and svelte and that it can respond to text resizings by the user.
* is highly configurable and has a
well-documented API.
* relies on Franklin M. Liangs hyphenation algorithm (
PDF) commonly known from LaTeX and OpenOffice.
* supports a
large set of different languages.
* provides services for
customizing, merging and packing script and patterns.
* also wraps URLs and Email adresses.
* is free software licensed under
MIT License (Version 5.0.0 and above).
Quick links
*
Code
*
Download
*
Documentation
Quick guide
1.
Download the recent version of Hyphenator.js
2. Use
mergeAndPack.html to configure and minify Hyphenator.js and hyphenation patterns.
3. Prepare your .html documents (i.e. add
hyphenate-classes, set
lang and add Hyphenator.js)
4. Test it!
Get
detailed instructions.
The bad parts
As with most things, there's a downside, too. Consider the following drawbacks before using Hyphenator.js:
* Hyphenator.js and the hyphenation patterns are quite large. Good compression and caching is vital.
* Automatic hyphenation can not be perfect: it may lead to misleading hyphenation like leg-ends (depends on the pattern quality)
* There's no support for special (aka non-standard) hyphenation (e.g. omaatje->oma-tje)
* There's no way for Javascript to influence the algorithm for laying out text in the browser. Thus we can't control how many hyphens occur on subsequent lines nor can we know which words have actually been hyphenated. Hyphenator.js just hyphenates all of them.
Philosophy
$3
This beauty becomes manifest in content and representation. I'm firmly convinced that all written text (well, most of it) deserves fine typography, that we deserve it. While hyphenation is just one of many tesserae that forms the appearance of text, it may be an important one.
$3
In code there is readability, maintainability, performance and genius – and some constraints of technology. As a hobbyist programmer I often feel like a hobbit surrounded by wizards who campaign for these values. But being an agile hobbit gives me the freedom to find my own way through the woods (thankfully free from evil in this area). I'm constantly in search of the most performant path to circumvent the constraints of technology while maintaining readability and maintainability of my code. Sometimes this path is illuminated by a wizard
1.
Issues and Requests
Each release is tested in various browsers with an
automated testsuite. Nevertheless, there will always be bugs. Please don't hesitate to
submit them.
If you have a special use case and Hyphenator.js doesn't provide a solution, feel free to
submit a feature request.
And please, be patient. Hyphenator.js is a hobby of mine and sometimes other things have precedence…
*
(1) Some of my coding wizards are:
* Franklin Mark Liang for his beautiful
hyphenation algorithm
*
Brendan Eich for making JavaScript a programming language (and
Douglas Crockford for finding The Good Parts of it)
* Vyacheslav Egorov for his
deep insights to V8
* Bram Stein for his
initiative on web typography