Skip to content
This repository has been archived by the owner on Aug 24, 2021. It is now read-only.

Commit

Permalink
Merge branch 'master' into release
Browse files Browse the repository at this point in the history
  • Loading branch information
@mnater
mnater committed Apr 27, 2015
2 parents 4ec4850 + e233564 commit 9d73095
Show file tree
Hide file tree
Showing 5 changed files with 168 additions and 49 deletions.
9 changes: 5 additions & 4 deletions Hyphenator.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/** @license Hyphenator 5.0.0 - client side hyphenation for webbrowsers
/** @license Hyphenator 5.0.0(devel) - client side hyphenation for webbrowsers
* Copyright (C) 2015 Mathias Nater, Zürich (mathiasnater at gmail dot com)
* https://github.com/mnater/Hyphenator
*
Expand All @@ -19,7 +19,7 @@
* @global
* @namespace Hyphenator
* @author Mathias Nater, <[email protected]>
* @version 5.0.0
* @version 5.0.0(devel)
* @example
* &lt;script src = "Hyphenator.js" type = "text/javascript"&gt;&lt;/script&gt;
* &lt;script type = "text/javascript"&gt;
Expand Down Expand Up @@ -1346,7 +1346,7 @@ var Hyphenator = (function (window) {
//try catch isn't enough for webkit
try {
//opera throws only on document.toString-access
haveAccess = window.frames[i].document.toString();
haveAccess = w.frames[i].document.toString();
} catch (err) {
haveAccess = undefined;
}
Expand Down Expand Up @@ -2156,6 +2156,7 @@ var Hyphenator = (function (window) {
myBox.style.position = 'absolute';
myBox.style.top = '0px';
myBox.style.right = '0px';
myBox.style.zIndex = '1000';
myBox.style.margin = '0';
myBox.style.backgroundColor = '#AAAAAA';
myBox.style.color = '#FFFFFF';
Expand Down Expand Up @@ -2850,7 +2851,7 @@ var Hyphenator = (function (window) {
* minor release: new languages, improvements
* @access public
*/
version: '5.0.0',
version: '5.0.0(devel)',

/**
* @member {boolean} Hyphenator.doHyphenation
Expand Down
83 changes: 40 additions & 43 deletions Hyphenator_Loader.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/** @license Hyphenator_Loader 5.0.0 - client side hyphenation for webbrowsers
/** @license Hyphenator_Loader 5.0.0(devel) - client side hyphenation for webbrowsers
* Copyright (C) 2015 Mathias Nater, Zürich (mathiasnater at gmail dot com)
* https://github.com/mnater/Hyphenator
*
Expand All @@ -11,7 +11,7 @@
* @description Checks if there's CSS-hyphenation available for the given languages and
* loads and runs Hyphenator if there's no CSS-hyphenation
* @author Mathias Nater, <a href = "mailto:[email protected]">[email protected]</a>
* @version 1.0.0
* @version 5.0.0(devel)
* @namespace Holds all methods and properties
*/

Expand Down Expand Up @@ -46,44 +46,48 @@ var Hyphenator_Loader = (function (window) {
/**
* @name Hyphenator-checkLangSupport
* @description
* A function alias to document.createElementNS or document.createElement
* @type {function(string, string)}
* @param {string} lang language code of the language to check
* @param {string} longword a word (best 12 characters or longer) to be hyphenated
* Checks if hyphenation for all languages are supported
* @type {function()}
* @return {bool}
* @private
*/
checkLangSupport = function (lang, longword) {
var shadow,
computedHeight,
//to be checked: may be this could be set in a different DOM (don't wait for loading…)
checkLangSupport = function () {
var shadowContainer,
shadow,
shadows = [],
lang,
i,
r = true,
bdy = window.document.getElementsByTagName('body')[0];

//create and append shadow-test-element
shadow = createElem('div');
shadow.style.width = '5em';
shadow.style.MozHyphens = 'auto';
shadow.style['-webkit-hyphens'] = 'auto';
shadow.style['-ms-hyphens'] = 'auto';
shadow.style.hyphens = 'auto';
shadow.style.fontSize = '12px';
shadow.style.lineHeight = '12px';
shadow.style.wordWrap = 'normal';
shadow.style.visibility = 'hidden';

shadow.lang = lang;
shadow.style['-webkit-locale'] = "'" + lang + "'";
shadow.innerHTML = longword;

bdy.appendChild(shadow);

//measure its height
//computedHeight = parseInt(window.getComputedStyle(shadow, null).height.slice(0, -2), 10);
computedHeight = shadow.offsetHeight;
shadowContainer = createElem('div');
shadowContainer.style.MozHyphens = 'auto';
shadowContainer.style['-webkit-hyphens'] = 'auto';
shadowContainer.style['-ms-hyphens'] = 'auto';
shadowContainer.style.hyphens = 'auto';
shadowContainer.style.fontSize = '12px';
shadowContainer.style.lineHeight = '12px';
shadowContainer.style.wordWrap = 'normal';
shadowContainer.style.visibility = 'hidden';

//remove shadow element
bdy.removeChild(shadow);
for (lang in languages) {
if (languages.hasOwnProperty(lang)) {
shadow = createElem('div');
shadow.style.width = '5em';
shadow.lang = lang;
shadow.style['-webkit-locale'] = "'" + lang + "'";
shadow.appendChild(window.document.createTextNode(languages[lang]));
shadowContainer.appendChild(shadow);
shadows.push(shadow);
}
}

return (computedHeight > 12) ? true : false;
bdy.appendChild(shadowContainer);
for (i = 0; i < shadows.length; i += 1) {
r = (shadows[i].offsetHeight > 12) && r;
}
bdy.removeChild(shadowContainer);
return r;
},

/**
Expand Down Expand Up @@ -116,15 +120,8 @@ var Hyphenator_Loader = (function (window) {
},

runner = function () {
var loadHyphenator = false, r, results = {}, lang;
for (lang in languages) {
if (languages.hasOwnProperty(lang)) {
r = checkLangSupport(lang, languages[lang]);
results[lang] = r;
loadHyphenator = loadHyphenator || !r;
}
}
if (loadHyphenator) {
var allLangsSupported = checkLangSupport();
if (!allLangsSupported) {
loadNrunHyphenator(config);
}
},
Expand Down
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "Hyphenator",
"version": "5.0.0",
"version": "5.0.0(devel)",
"main": "Hyphenator.js",
"ignore": [
"favicon.ico",
Expand Down
121 changes: 121 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
<doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Hyphenator.js</title>
<style type="text/css">
body {
max-width: 40em;
margin: 0 auto;
padding: 1em;
font: 16px "Helvetica Neue", Helvetica;
line-height: 1.6em;
color: #444;
}
p {
text-align: justify;
-webkit-hyphens: auto;
}
h1 {
text-align: center;
}

ul li {
font-size: 0.9em;
line-height: 1.4em;
}

a {
text-decoration: none;
color: #667788;
}

em {
font-weight: bolder;
}

.footnotes {
font-size: 0.9em;
line-height: 1.4em;
}
</style>
<script type="text/javascript">
/*
* Hyphenator_Loader 5.0.0 - client side hyphenation for webbrowsers
* Copyright (C) 2015 Mathias Nater, Zürich (mathiasnater at gmail dot com)
* https://github.com/mnater/Hyphenator
*
* Released under the MIT license
* http://mnater.github.io/Hyphenator/LICENSE.txt
*/

var Hyphenator_Loader=(function(window){'use strict';var languages,config,path,createElem=function(tagname){var r;if(window.document.createElementNS){r=window.document.createElementNS('http://www.w3.org/1999/xhtml',tagname);}else if(window.document.createElement){r=window.document.createElement(tagname);}return r;},checkLangSupport=function(lang,longword){var shadow,computedHeight,bdy=window.document.getElementsByTagName('body')[0];shadow=createElem('div');shadow.style.width='5em';shadow.style.MozHyphens='auto';shadow.style['-webkit-hyphens']='auto';shadow.style['-ms-hyphens']='auto';shadow.style.hyphens='auto';shadow.style.fontSize='12px';shadow.style.lineHeight='12px';shadow.style.wordWrap='normal';shadow.style.visibility='hidden';shadow.lang=lang;shadow.style['-webkit-locale']="'"+lang+"'";shadow.innerHTML=longword;bdy.appendChild(shadow);computedHeight=shadow.offsetHeight;bdy.removeChild(shadow);return(computedHeight>12)?true:false;},loadNrunHyphenator=function(config){var head,script,hyphenatorLoaded=function(){if(window.Hyphenator!==undefined){Hyphenator.config(config);Hyphenator.run();}else{window.setTimeout(function(){hyphenatorLoaded();},10);}};head=window.document.getElementsByTagName('head').item(0);script=createElem('script');script.src=path;script.type='text/javascript';head.appendChild(script);hyphenatorLoaded();},runner=function(){var loadHyphenator=false,r,results={},lang;for(lang in languages){if(languages.hasOwnProperty(lang)){r=checkLangSupport(lang,languages[lang]);results[lang]=r;loadHyphenator=loadHyphenator||!r;}}if(loadHyphenator){loadNrunHyphenator(config);}},runOnContentLoaded=function(window,f){var toplevel,hyphRunForThis={},doFrames=false,contextWindow,documentLoaded,add=window.document.addEventListener?'addEventListener':'attachEvent',rem=window.document.addEventListener?'removeEventListener':'detachEvent',pre=window.document.addEventListener?'':'on',init=function(context){contextWindow=context||window;if(!hyphRunForThis[contextWindow.location.href]&&(!documentLoaded||!!contextWindow.frameElement)){documentLoaded=true;f();hyphRunForThis[contextWindow.location.href]=true;}},doScrollCheck=function(){try{window.document.documentElement.doScroll("left");}catch(error){window.setTimeout(doScrollCheck,1);return;}init(window);},doOnLoad=function(){var i,haveAccess,fl=window.frames.length;if(doFrames&&fl>0){for(i=0;i<fl;i+=1){haveAccess=undefined;try{haveAccess=window.frames[i].document.toString();}catch(e){haveAccess=undefined;}if(!!haveAccess){if(window.frames[i].location.href!=='about:blank'){init(window.frames[i]);}}}contextWindow=window;f();hyphRunForThis[window.location.href]=true;}else{init(window);}},DOMContentLoaded=function(e){if(e.type==='readystatechange'&&window.document.readyState!=='complete'){return;}window.document[rem](pre+e.type,DOMContentLoaded,false);if(!doFrames&&window.frames.length===0){init(window);}};if(window.document.readyState==="complete"||window.document.readyState==="interactive"){window.setTimeout(doOnLoad,1);}else{window.document[add](pre+"DOMContentLoaded",DOMContentLoaded,false);window.document[add](pre+'readystatechange',DOMContentLoaded,false);window[add](pre+'load',doOnLoad,false);toplevel=false;try{toplevel=!window.frameElement;}catch(ignore){}if(window.document.documentElement.doScroll&&toplevel){doScrollCheck();}}};return{init:function(langs,p,configs){languages=langs;path=p;config=configs||{};runOnContentLoaded(window,runner);}};}(window));Hyphenator_Loader.init({"en":"hyphenationalgorithm"},"./Hyphenator.js",{useCSS3hyphenation:true});
</script>
</head>
<body>
<h1>Hyphenator.js</h1>
<h2>Overview</h2>
<p class="hyphenate">Hyphenator.js is a free open source Javascript library that automatically hyphenates text on websites. It comes in handy as a <em>polyfill</em> for legacy browsers that don't support CSS 3 hyphation at all or for modern browsers that do hyphenation, but do not provide hyphenation dictionaries for a particular language.</p>
<p class="hyphenate">Hyphenator.js …</p>
<ul>
<li>can be <a href="https://github.com/mnater/Hyphenator/blob/wiki/en_HowToUseHyphenator.md#using-hyphenator-on-your-website">included by the creator of the website</a>.</li>
<li>can be used <a href="https://github.com/mnater/Hyphenator/blob/wiki/en_HowToUseHyphenator.md#using-hyphenator-as-a-bookmarklet">as bookmarklet on any website</a>.</li>
<li>is <a href="http://en.wikipedia.org/wiki/Unobtrusive_JavaScript">unobtrusive</a>.</li>
<li>steps behind CSS 3 hyphenation if supported (<a href="https://github.com/mnater/Hyphenator/blob/wiki/en_HowToUseHyphenator.md#hyphenator_loaderjs">how to use Hyphenator_Loader</a>).</li>
<li>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.</li>
<li>is highly configurable and has a well <a href="https://github.com/mnater/Hyphenator/blob/wiki/en_PublicAPI.md#public-api">documented API</a>.</li>
<li>relies on Franklin M. Liangs hyphenation algorithm (<a href="http://www.tug.org/docs/liang/liang-thesis.pdf">PDF</a>) commonly known from LaTeX and OpenOffice.
<li>supports a <a href="https://github.com/mnater/Hyphenator/blob/wiki/en_AddNewLanguage.md#what-we-have-now">large set of different languages</a>.</li>
<li>provides services for <a href="http://mnater.github.io/Hyphenator/mergeAndPack.html">customizing, merging and packing script and patterns</a>.</li>
<li>also wraps URLs and Email-adresses.</li>
<li>is free software licensed under <a href="http://mnater.github.io/Hyphenator/LICENSE.txt">MIT License</a> (Version 5.0.0 and above).</li>
</ul>

<h2>Quick links</h2>
<ul>
<li><a href="https://github.com/mnater/Hyphenator">Code</a></li>
<li><a href="https://github.com/mnater/Hyphenator/releases/latest">Download</a></li>
<li><a href="https://github.com/mnater/Hyphenator/blob/wiki/en_TableOfContents.md#table-of-contents">Documentation</a></li>
</ul>

<h2>Quick guide</h2>
<ol>
<li><a href="https://github.com/mnater/Hyphenator/releases/latest">Download</a> the recent version of Hyphenator.js</li>
<li>Use <a href="http://mnater.github.io/Hyphenator/mergeAndPack.html">mergeAndPack.html</a> to configure and minify Hyphenator.js and hyphenation patterns.</li>
<li>Prepare your .html documents (i.e. add <code>hyphenate</code>-classes, set <code>lang</code> and add Hyphenator.js)</li>
<li>Test it!</li>
</ol>
<p class="hyphenate">Get <a href="https://github.com/mnater/Hyphenator/blob/wiki/en_HowToUseHyphenator.md#using-hyphenator-on-your-website">detailed instructions</a>.</p>

<h2>The bad parts</h2>
<p class="hyphenate">As with most things, there's a downside, too. Consider the following drawbacks before using Hyphenator.js:</p>
<ul>
<li>Hyphenator.js and the hyphenation patterns are quite large. A good compression and caching is vital.</li>
<li>Automatic hyphenation can not be perfect: it may lead to misleading hyphenation like leg-ends (depends on the pattern quality)</li>
<li>There's no support for special (aka non-standard) hyphenation (e.g. omaatje->oma-tje)</li>
<li>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 to be hyphenated. Hyphenator.js just hyphenates all of them.</li>
</ul>

<h2>Philosophy</h2>
<h3>There is text and there is beautiful text</h3>
<p class="hyphenate">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.</p>
<h3>There is code and there is sound code</h3>
<p class="hyphenate">In code there is readability, maintainability, performance and genius &ndash; 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<sup><a href="#fn1">1</a></sup>.</p>

<h2>Issues and Requests</h2>
<p class="hyphenate">Each release is tested in various browsers with an <a href="http://mnater.github.io/Hyphenator/testsuite/">automated testsuite</a>. Nevertheless, there will always be bugs. Please don't hesitate to <a href="https://github.com/mnater/Hyphenator/issues">submit them</a>.</p>
<p class="hyphenate">If you have a special use case and Hyphenator.js doesn't provide a solution, feel free to <a href="https://github.com/mnater/Hyphenator/issues">submit a feature request</a>.</p>
<p class="hyphenate">And please, be patient. Hyphenator.js is a hobby of mine and sometimes other things have precedence…</p>

<hr>
<div class="footnotes">
<p id="fn1">(1) Some of my coding wizards are:</p>
<ul>
<li>Franklin Mark Liang for his beautiful <a href="http://www.tug.org/docs/liang/">hyphenation algorithm</a></li>
<li><a href="http://www.crockford.com">Douglas Crockford</a> for making Javascript a programming language</li>
<li>Vyacheslav Egorov for his <a href="http://mrale.ph/">deep insights to V8</a></li>
<li>Bram Stein for his <a href="http://stateofwebtype.com">initiative on web typography</a></li>
</ul>
</div>
</body>
</html>
2 changes: 1 addition & 1 deletion testsuite/test95.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ <h2>en</h2>

<h2>hy (Armenian)</h2>
<p id="test2" class="hyphenate" lang="hy">Հայերենն ունի վեց ձայնավոր, մեկ կիսաձայն և երեսուն բաղաձայն հնչյուններ</p>
<p id="ref2a" lang="en" style="hyphens: auto; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; -webkit-locale: 'en'">Հայերենն ունի վեց ձայնավոր, մեկ կիսաձայն և երեսուն բաղաձայն հնչյուններ</p>
<p id="ref2a" lang="hy" style="hyphens: auto; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; -webkit-locale: 'hy'">Հայերենն ունի վեց ձայնավոր, մեկ կիսաձայն և երեսուն բաղաձայն հնչյուններ</p>
<p id="ref2b" lang="hy">Հա&shy;յե&shy;րենն ունի վեց ձայնա&shy;վոր, մեկ կի&shy;սա&shy;ձայն և ե&shy;րե&shy;սուն բա&shy;ղա&shy;ձայն հնչյուններ</p>
</body>
</html>

0 comments on commit 9d73095

Please sign in to comment.