|
en_HowToUseHyphenator
How to use Hyphenator on a website
Download and InstallUsing Hyphenator as a BookmarkletAs a normal websurfer you'll have to create a bookmarklet by saving the following line of code as a bookmark: javascript:if(document.createElement){void(head=document.getElementsByTagName('head').item(0));void(script=document.createElement('script'));void(script.src='http://hyphenator.googlecode.com/svn/tags/Version%202.4.0/Hyphenator.js?bm=true');void(script.type='text/javascript');void(head.appendChild(script));}When you're on the website to be hyphenated you click on that bookmarklet to start hyphenating the page. If the pages language isn't set, you will have to edit it manually in a popping-up prompt. Using Hyphenator on your websiteFor a webdeveloper who wishes to hyphenate his website, things are slightly more complicated. You'll need basic knowledge about HTML and JavaScript to do the following steps. Step by Step
<script src="http://yourdomain.com/path/Hyphenator.js" type="text/javascript"> </script> <script type="text/javascript"> Hyphenator.run(); </script> Done. There are many interesting and useful settings you can change before you invoke the script. See Documentation for more details. ExampleWhat could be better than a working example? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Hyphenator.js</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
width:30%;
margin-left:35%;
margin-right:35%;
}
.text {
text-align:justify;
}
</style>
<script src="Hyphenator.js" type="text/javascript"></script>
<script type="text/javascript">
Hyphenator.config({
displaytogglebox : true,
minwordlength : 4
});
Hyphenator.run();
</script>
</head>
<body>
<h1>Example of using Hyphenator.js</h1>
<h2>Deutsch</h2>
<p class="hyphenate text" lang="de">Deutschsprachige Beispieltexte haben natürlicherweise längere Wortzusammensetzungen als englischsprachige. Aber auch <span lang="en">“hyphenation”</span> ist ein ziemlich langes Kompositum.</p>
<p class="hyphenate text" lang="de">Verändern Sie die Fenstergrösse um den Effekt der Silbentrennung zu sehen.</p>
<h2>English</h2>
<p class="hyphenate text" lang="en">English words are shorter in the average then german words. <span lang="de">«Silbentrennungsalgorithmus»</span> for example is quite long.</p>
<p class="hyphenate text" lang="en">Resize the window to see hyphenation in effect.</p>
<h2>Links</h2>
<p class="hyphenate text" lang="en">Not only words but also links like <a href="http://code.google.com/p/hyphenator/">http://code.google.com/p/hyphenator/</a> are processed. But in a special manner (using zero width space).</p>
</body>
</html>LegalHyphenator.js and its documentation are published under the GPL v3: // Hyphenator 2.X.Y - client side hyphenation for webbrowsers // Copyright (C) 2009 Mathias Nater, Zürich (mathias at mnn dot ch) // Project and Source hosted on http://code.google.com/p/hyphenator/ // // This JavaScript code is free software: you can redistribute // it and/or modify it under the terms of the GNU Lesser // General Public License (GNU LGPL) as published by the Free Software // Foundation, either version 3 of the License, or (at your option) // any later version. The code is distributed WITHOUT ANY WARRANTY; // without even the implied warranty of MERCHANTABILITY or FITNESS // FOR A PARTICULAR PURPOSE. See the GNU GPL for more details. // // As additional permission under GNU GPL version 3 section 7, you // may distribute non-source (e.g., minimized or compacted) forms of // that code without the copy of the GNU GPL normally required by // section 4, provided you include this license notice and a URL // through which recipients can access the Corresponding Source. Most of the patterns in the pattern files have different licenses specified in the pattern files. Stay up to dateSubscribe to the RSS on the downloads page to get information about updates of Hyphenator. It's recommended to replace older versions upon release of a new version. |
Sign in to add a comment
As of XHTML 1.1 you should use xml:lang="en" instead of the deprecated lang-attribute.
Yes, but keep in mind that XHTML1.1 is still a "working draft" and that IE sometimes acts buggy when you use xml:lang (e.g. in table-elements).
As of XHTML1.0 use both: lang and xml:lang (see http://www.w3.org/TR/xhtml1/#C_7).
When I'm using the script as bookmarklet it inserts zws? string near every "...". Is it a bug?
It's fixed. See Issue74 Thanks
I created GreaseMonkey script which automatically hyphenates page text with some tweaks using your cool library: http://userscripts.org/scripts/show/63237
Maybe it'll be useful for someone.
@dmalinovsky
Cool! Works great. I'd prefer if you didn't link to the trunk but to the latest version tag (currently http://hyphenator.googlecode.com/svn/tags/Version%202.4.0/Hyphenator.js). Sometimes the code in the trunk isn't tested and may not work! I'll check if there's a way to install a 'latest'-directory, where you can link to…
Regards Mathias
Mathias, I linked to the trunk because latest stable version emits warnings about not supported language. I thought it's way too inconvenient to use this version.
Though my version overcomes this shortcoming so the warnings won't be shown with stable script. I updated the script.