hyphen

Franklin M. Liang's hyphenation algorithm example.

by ytiurin

HTML

<script src="https://ytiurin.github.io/hyphen/hyphen.js"></script>
<script src="https://ytiurin.github.io/hyphen/en-gb.js"></script>
<script src="https://ytiurin.github.io/hyphen/fr.js"></script>
<script src="https://ytiurin.github.io/hyphen/it.js"></script>
<script src="https://ytiurin.github.io/hyphen/es.js"></script>
<script src="https://ytiurin.github.io/hyphen/de.js"></script>
<div class="floating-paragraph">
  <h6>English</h6>

  <div id="en">One fine morning, a few days after, Rob might have been seen passing by way of Lockesley through Sherwood Forest to Nottingham town. Briskly walked he and gaily, for his hopes were high and never an enemy had he in the wide world. But 'twas the very
    last morning in all his life when he was to lack an enemy! For, as he went his way through Sherwood, whistling a blithe tune, he came suddenly upon a group of Foresters, making merry beneath the spreading branches of an oak-tree. They had a huge meat
    pie before them and were washing down prodigious slices of it with nut brown ale. One glance at the leader and Rob knew at once that he had found an enemy. 'Twas the man who had usurped his father's place as Head Forester, and who had roughly turned
    his mother out in the snow. But never a word said he for good or bad, and would have passed on his way, had not this man, clearing his throat with a huge gulp, bellowed out: "By my troth, here is a pretty little archer! Where go you, my lad, with
    that tupenny bow and toy arrows? Belike he would shoot at Nottingham Fair! Ho! Ho!"</div>
</div>
<div class="floating-paragraph">
  <h6>Deutsch</h6>

  <div id="de">„Du darfst nicht böse werden, wenn ich es sage, lieber Friedrich! Aber daß du überhaupt auf solche Dinge Wert legst, ist mir bei deinen sonstigen Anschauungen unverständlich. Du bemühst dich darum, Kommerzienrat zu werden, und jetzt gerätst du sogar
    für unsere Margarete auf ehrgeizige Gedanken. Was sollen wir mit einem Schwiegersohn aus diesen Kreisen! — Ja,...

CSS

.floating-paragraph {
  float: left;
  text-align: -justify;
  width: 20%;
}

.floating-paragraph>div,
.floating-paragraph>h6 {
  padding: 0 10px;
}

JavaScript

function provideHyphenation(hyphenate, id) {
  var el = document.getElementById(id);
  el.innerHTML = hyphenate(el.innerHTML);
}

provideHyphenation(createHyphenator(hyphenationPatternsEnGb), 'en');
provideHyphenation(createHyphenator(hyphenationPatternsDe), 'de');
provideHyphenation(createHyphenator(hyphenationPatternsFr), 'fr');
provideHyphenation(createHyphenator(hyphenationPatternsIt), 'it');
provideHyphenation(createHyphenator(hyphenationPatternsEs), 'es');