The Hyphenator package is a single hyphenator.js file that we run on each web page and that is it. It looks after itself.
We can tell Hyphenator what to do: if we give an element the class hyp, Hyphenator will hyphenate it. If we give an element the class nohyp (or just don’t give it the class hyp), Hyphenator will do nothing, it won’t hyphenate the text.
If you have downloaded the website template, you will already have a copy of the hyphenator.js file installed in the correct folder (you don’t need to do what follows).
Hyphenator has a configuration web page that allows us to pick certain options before downloading the file. We need to do this so go to the following website:
It takes you to the Hyphenator merge and pack web page. This page allows us to set various options.
We are going to create an empty file called hyphenator.js in the directory:
This is the same place we put the Waypoints file (see Figure 18.6).
In Brackets, navigate to the 21-global/05-js directory and create a new file. Rename the file hyphenator.js and leave it open in Brackets.
Go to the Hyphenator Merge and Pack page:
And set the following options:
Leave the first box unticked, we don’t want the loader
The next bit selects the language we want, I want British English (because I am British and English). If you are American, you will want American English. Both of these will work if the lang attribute is set to en, e.g.:
If you want some other language, you will have to change this attribute; for example, if you have the misfortune to be French, use lang="fr", alternatively just surrender and use English.
The language is selected on the next bit, this is what I selected:
The next set of selections remain at their default values:
This is followed by the bit that we do have to change, the class names, the names I want are hyp and nohyp, enter them as shown here:
There are no changes to the rest of it:
The next thing is to click thebutton (highlighted above) to generate the code, it gives us this:
We want everything in the box, it is already selected, either right click and selector press to copy it.
Now go to the empty hyphenator.js file in Brackets and paste it in.
Save the file and that is it.