hyphenopoly
Advanced tools
Hyphenopoly.js is a JavaScript-polyfill for hyphenation in HTML: it hyphenates text if the user agent does not support CSS-hyphenation at all or not for the required languages and it is a Node.js-module.
The package consists of the following parts:
Place all code for Hyphenopoly at the top of the header (immediately after the <title> tag) to ensure resources are loaded as early as possible.
You'll have to insert two script blocks. In the first block provide the initial configurations for Hyphenopoly_Loader as inline script. In the second block load Hyphenopoly_Loader.js as external script.
Also, don't forget to enable CSS hyphenation.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Example 1</title>
<script>
var Hyphenopoly = {
require: {
"la": "honorificabilitudinitas",
"de": "Silbentrennungsalgorithmus",
"en-us": "Supercalifragilisticexpialidocious"
},
setup: {
selectors: {
".container": {}
}
}
};
</script>
<script src="./Hyphenopoly_Loader.js"></script>
<style type="text/css">
body {
width:60%;
margin-left:20%;
}
p {
text-align: justify;
margin: 0 2em 0 0;
}
.container {
display: flex;
hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
}
</style>
</head>
<body>
<h1>Example 1</h1>
<div class="container">
<p lang="la">Qua de causa Helvetii quoque reliquos Gallos virtute praecedunt, quod fere cotidianis proeliis cum Germanis contendunt, cum aut suis finibus eos prohibent aut ipsi in eorum finibus bellum gerunt.</p>
<p lang="en-us">For which reason the Helvetii also surpass the rest of the Gauls in valor, as they contend with the Germans in almost daily battles, when they either repel them from their own territories, or themselves wage war on their frontiers.</p>
<p lang="de">Aus diesem Grund übertreffen auch die Helvetier die übrigen Gallier an Tapferkeit, weil sie sich in fast täglichen Gefechten mit den Germanen messen, wobei sie diese entweder von ihrem Gebiet fernhalten oder selbst in deren Gebiet kämpfen.</p>
</div>
</body>
</html>
Let's go through this example step by step:
Make sure your page is encoded as utf-8.
Hyphenopoly_Loader.js needs some information to run. This information is provided in a globally accessible Object called Hyphenopoly. Hyphenopoly_Loader.js and (if necessary) Hyphenopoly.js will add other methods and properties only to this object – there will be no other global variables/functions beyond this object.
The Hyphenopoly object must have exactly one property called require which itself is an object containing at least one nameValuePair where the name is a language code string (Some patterns are region-specific. See the patterns directory for supported languages. E.g. just using en won't work, use either en-usor en-gb) and the value is a long word string in that language (preferably more than 12 characters long).
Hyphenator_Loader.js will feature test the client (aka browser, aka user agent) for CSS-hyphens support for the given languages with the given words respectively. In the example above it will test if the client supports CSS-hyphenation for latin, german and us-english.
If you want to force the usage of Hyphenopoly.js for a language (e.g. for testing purposes) write "FORCEHYPHENOPOLY" instead of the long word.
Hyphenopoly_Loader.js tests if the browser supports CSS hyphenation for the language(s) given in Hyphenopoly.require. If one of the given languages isn't supported it automatically hides the documents contents and loads Hyphenopoly.js and the necessary patterns. Hyphenopoly.js – once loaded – will hyphenate the elements according to the settings and unhide the document when it's done. If something goes wrong and Hyphenopoly.js is unable to unhide the document Hyphenopoly_Loader.js has a timeout that kicks in after some time (defaults to 1000ms) and unhides the document and writes a message to the console.
If the browser supports all required languages the script deletes the Hyphenopoly-object and terminates without further ado.
Hyphenopoly by default hyphenates elements (and their children) with the classname .hyphenate. Don't forget to enable CSS-hyphenation for the classes eventually handled by Hyphenopoly.
Install:
npm i hyphenopoly
"use strict";
const hyphenopoly = require("hyphenopoly");
const hyphenator = hyphenopoly.config({
"require": ["de", "en-us"],
"hyphen": "•",
"exceptions": {
"en-us": "en-han-ces"
}
});
async function hyphenate_en(text) {
const hyphenateText = await hyphenator.get("en-us");
console.log(hyphenateText(text));
}
async function hyphenate_de(text) {
const hyphenateText = await hyphenator.get("de");
console.log(hyphenateText(text));
}
hyphenate_en("hyphenation enhances justification.");
hyphenate_de("Silbentrennung verbessert den Blocksatz.");
The algorithm used for hyphenation was developed by Franklin M. Liang for TeX. It works more or less like this:
Example:
Hyphenation
h y p h e n a t i o n
h y3p h
h e2n
h e n a4
h e n5a t
1n a
n2a t
1t i o
2i o
o2n
h0y3p0h0e2n5a4t2i0o2n
Hy-phen-ation
The patterns are precomputed and available for many languages on CTAN. Hyphenopoly.js uses a proprietary binary format (including pattern licence, metadata and the patterns). Patterns are computed from a large list of hyphenated words by a program called patgen. They aim to find some hyphenation points – not all – because it's better to miss a hyphenation point then to have some false hyphenation points. Most patterns are really good but none is error free.
These pattern vary in size. This is mostly due to the different linguistic characteristics of the languages.
Hyphenator.js (https://github.com/mnater/Hyphenator) started 2007 and had evolved ever since. But web browsers have evolved much more! Almost all of them support native hyphenation (https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens) for a specific set of languages (https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens#Browser_compatibility). So it was time for something new!
Hyphenopoly.js is based on Hyphenator.js (they share some code) but - in favor of simplicity and speed – lacks many features of Hyphenator.js. Most of these features aren't needed in modern webdesign anymore:
If you need one of those features use Hyphenator.js – or give some feedback and proof that the feature is really useful and should be implemented in Hyphenopoly.js
On the other hand Hyphenopoly has a much finer-grained configuration system that allows you to make settings based on CSS-classes. And last but not least it is faster than Hyphenator.js
Version 2.6.0 (Dec 01, 2018)
FAQs
Hyphenation for node and Polyfill for client-side hyphenation.
The npm package hyphenopoly receives a total of 0 weekly downloads. As such, hyphenopoly popularity was classified as not popular.
We found that hyphenopoly demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.