19
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:
http://mnater.github.io/Hyphenator/mergeAndPack.html
It takes you to the Hyphenator merge and pack web page. This page allows us to set various options.
Now that we have created the hyphenator.js file, the next thing to do is load it into each web page. This is another <script> element in the <head> section:
<html lang="en"> <!-- Declare language --> <head> <!-- Start of head section --> <meta charset="utf-8"> <!-- Use unicode char set--> <!-- ************************************************************************** HEAD SCRIPT AREA ***********************************************************************--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="21-global/05-js/jquery.waypoints.min.js"></script> <script src="21-global/05-js/hyphenator.js"></script> <script src="11-resources/05-js/script.js"></script> <script src="01-pages/99-00-typicals/05-local-js/99-00-scroll.js"></script> <!-- ************************************************************************** HEAD CSS LOAD ***********************************************************************--> <link rel="stylesheet" type="text/css" href="21-global/03-fonts/ps-fonts.css"> <link rel="stylesheet" type="text/css" href="21-global/01-css/normalise.css"> <link rel=" stylesheet" type="text/css" href="11-resources/01-css/grid.css"> <link rel="stylesheet" type="text/css" href="11-resources/01-css/style.css"> <!-- ************************************************************************** TITLE ***********************************************************************--> <title>Website template typicals | PracticalSeries: Web Development</title> </head>
This loads Hyphenator, and Hyphenator will now hyphenate anything on the page that has the class hyp.
The hyp class is not defined in any CSS file; it is purely a trigger class for the hyphenator.js code.
To enable hyphenation on any paragraph in the body text just add the class hyp to it in the HTML, here is an example form the website:
<p class="hyp"><em>This is an additional section row.</em> Additional section rows can follow any other type of section and are generally used to align sidebars with a particular paragraph (if the paragraph is placed in an additional row, the sidebar for that additional row will align with the first line of the paragraph within it).</p> <p class="hyp">additional section rows are constructed with <span class="code"><div></span> elements (rather than <span class="code"><section></span> elements and consequently do not require a heading).</p> <p class="hyp">Additional rows are constructed with <span class="code"><div></span> elements (rather than <span class="code"><section></span> elements) and consequently do not require a heading. Additional rows support both left and right side bars.</p> <p class="hyp">As many additional section rows can be added as are needed. </p> <p class="hyp">Generally, additional rows are not given an ID. If necessary (for navigation purposes), additional rows can be given an ID in the form used for inline sections: in the form <span class="code">js--XXYYZZL</span> (where <span class="code">XX</span> is the chapter number, <span class="code">YY</span> the section number and <span class="code">ZZ</span> the subsection number. L represents the letters a, b, c, d...&c., these are used in sequence).</p>
Each paragraph starts with <p class="hyp"> and this turns on hyphenation for that paragraph.
If you miss out the class, the paragraph will not be hyphenated. Similarly, if you specifically want to label the paragraph as one that should not be hyphenated, use the class nohyp.
This distinction is only cosmetically important, not using either may just indicate that the paragraph should be hyphenated, but you have just forgotten to do so.
Using nohyp means you have thought about it, and decided that hyphenation is not required.