merge+pack Hyphenator logo

This page helps you configure, merge and pack Hyphenator.js, Hyphenator_Loader.js and the pattern files. The information that accompanies each setting should be clear enough. If you need more information you will find some in the wiki on https://code.google.com/p/hyphenator/wiki/en_PublicAPI.

Since this page uses XMLHttpRequests to load the script and pattern files, it will not work if you call it with the file:// protocol. Instead put it on your server or go to http://code.google.com/p/hyphenator/.

The script loads the versions of Hyphenator.js (and Hyphenator_Loader.js and the patterns) that resides in the same directory like this page.

Hyphenator_Loader.js

Hyphenator_Loader.js is a small script that tests if the client supports css3 hyphenation for the given languages. If at least one language isn't supported by the client it loads Hyphenator.js.
If you check this box the language selection below will be hidden and two scripts will be outputted at the end of the page.

Hyphenator_Loader.js needs some information:

Test language(s):

Create an object where the keys are the language codes and the values are a long word in that language (at least 12 characters long). If the website is written in one language only one key/value pair is needed (the example shows the entries for a dual language site: english and armenian).

Path to Hyphenator.js:

Specify the path to Hyphenator.js. This can be absolute or relative. The example implies that Hyphenator.js is in the same directory like Hyphenator_Loader.js
Use the minified version of Hyphenator.js (without any patterns included) that you get at the end of this page.

The settings for Hyphenator.js can be made below. They will be passed by Hyphenator_Loader.js to Hyphenator.js

Languages

Select the language you use on your website. The patterns of the selected languages will be included in the ouputted script for faster page loading. If you select no language, make sure that "enable remote loading" is on (see below)!

Configuration

Make the settings for Hyphenator. Leave empty textfields empty for the default value to be set. If no special configuration is made, there will be no Hyphenator.config(); function in the output.

Show-Info Button

A value lesser than 4 makes no sense. By increasing this value lesser words will be hyphenated, thus, there's a small speed gain.

Show-Info Button

At best you define the language by using the lang-Attribute in your HTML-Document. But sometimes this isn't possible. In this case you can set the language here. Use a two-letter language code (e.g. en for English).

Show-Info Button

Sometimes you like to run the script, prepare everything, but not to hyphenate yet.
Hyphenation can later be executed by calling Hyphenator.toggleHyphenation()

Show-Info Button

By enabling remote loading Hyphenator will automatically load language patterns of supported languages when they are needed.
If you turn off remote loading Hyphenator only hyphenates texts in languages it has the patterns for. Make sure you have them selected!

Show-Info Button

Once a word is hyphenated it is cached, thus a word has only to be hyphenated once. You can turn this mechanism off – mainly for performance-measuring.

Show-Info Button

Browsers don't remove soft hyphens from copied text. By enabling this feature hyphenation is removed on copy. This only works in browsers that support the oncopy-event.

Show-Info Button

By default, hyphenator doesn't hyphenate text in frames. You can turn this on, but it will only work on frames that fullfill the same origin policy!

Show-Info Button

With this option enabled, all configuration options are stored in a object called `Hyphenator_config` in the storage type defined by the property `storagetype` (if `storagetype is none` or storage isn't supported, nothing is stored).
By reloading or going to an other page, those settings remain set. This is very and specially usefull for the toggle-button.
Be carefull with this option!

Show-Info Button

Since Javascript is executed after the page is loaded, the user may see the unhyphenated text for a short time befor it is hyphenated and redrawn. To prevent this all textblocks treated by Hyphenator are set to invisible upon hyphenation (setting: "hidden"). The result is, that only hyphenated text is displayed.
On the other hand – if there's an error in the execution of Hyphenator.js – the text may stay invisible. Turn hiding off for debugging or if you prefer to see the redrawing of the text (setting: "visible").

Show-Info Button

Hyphenation patterns can be stored in DOM-Storage for later reuse. You can define the method (if at all):
'local': patterns are stored locally (they will be there even after a restart)
'session': patterns are removed if the window is closed
'none': DOM-Storage is not used
Degrades gracefully, if the browser does not support DOM-Storage.

Show-Info Button

Elements can either be hyphenated when all necessary patterns are loaded ('wait') or when the patterns for the specified language are loaded ('progressive').
The second option may be useful on multilanguage pages, where one language takes much longer to load.

Show-Info Button

With this option enabled Hyphenator.js checks if the browser supports CSS3-hyphenation. If so, the elements are hyphenated by the browser instead of Hyphenator.js.
For unsupported languages or other browsers Hyphenator.js fills the gap and hyphenates as expected.
Make sure to check this box if you use Hyphenator_Loader.js!

Element Selection

Indicate how to get the elements for hyphenation:

Show-Info Button
Show-Info Button

Using this method Hyphenator.js searches the DOM for elements with the indicated classname. Note: an element can have multiple classnames; separate them with spaces (e.g. <div class="content hyphenate">)
If you want to have more control over the element selection you may define your own selector function. It has to return an HTMLCollection of elements to be hyphenated. Specifially if you use a JavaScript-Framework, this may be very interesting…

Indicate a classname for elements that should NOT be hyphenated:
Show-Info Button

You can turn off hyphenation for elements with the indicated classname. (Note: The following elements are never hyphenated: video, audio, script, code, pre, img, br, samp, kbd, var, abbr, acronym, sub, sup, button, option, label, textarea, input, math, svg, style)

Indicate a classname for elements that should be hyphenated like URLs:
Show-Info Button

If there are elements that are not normal text (e.g. programming code) they can by hyphenated like URLs (using the hyphen character for URLs).
Toggle Box

Indicate how the Togglebox should be displayed:

Show-Info Button

The standard togglebox is a small button in the upper right corner of the page. By clicking on it, the user can turn off/on hyphenation. This is useful for copying or searching text on the site.
Since the standard togglebox may interfere with the design of your page, you can define it on your own.


Special Settings

Show-Info Button

This function is called, when hyphenation of a page is completed. The 'context' paramater gets the href of the document.

Show-Info Button

Most errors (critical problems) are catched and catched errors dipatch the onerror function. By default there's an alert with a predefined text. You can change this function.

Show-Info Button

Most non critical problems are catched and catched problem dipatch the onwarning function. By default there's an console.log with a predefined text. You can change this function.

Show-Info Button

This function is called for each word just before it gets hyphenated. You can change this function.

Show-Info Button

This function is called for each word just after it has been hyphenated. You can change this function
Minify

By minifying the resulting script you can save some bandwith. This page uses the JavaScript-Version of jsmin since it's easy to run on a webpage. You may achieve better results if you pack the resulting script with other minifiers/packers such as YUI Compressor or Google's Closure Compiler.


Copy the merged and packed script from the output field as is to a new text-file, give it a name (e.g. "hyphenate.js") and include it in your website (<script src="hyphenate.js" type="text/javascript"></script>).
It will run automatically.

Note: You are not allowed to remove the licensing at the beginning of the script!

You are using Hyphenator_Loader.js. Therefor you have to create two script files as described below:

Copy the packed script from the first output field below as is to a new text-file, give it a name (e.g. "hyphenator.js". Make sure this is the same name as you configured Hyphenator_Loader.js for.) and include it in your website (<script src="hyphenator.js" type="text/javascript"></script>).

Note: You are not allowed to remove the licensing at the beginning of the script!

Copy the script from the output field as is to a new text-file, give it a name (e.g. "hylo.js") and include it in your website (<script src="hylo.js" type="text/javascript"></script>).
It will run automatically. Make sure that Hyphenator.js and the pattern files are available, too!

Note: You are not allowed to remove the licensing at the beginning of the script!