How to optimize hyphenation

I'm struggling with the different ways browsers handle hyphenation for justified text from line to line. I have the following css settings for my text:

text-align: justify;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;

My language setting is en. One word that is being handled inconsistently is "expressing":

Chrome: no hyphenation
Firefox: express-ing [correct!]
IE11: express-ing [correct!]
Safari: express-ing [correct!]

Bafflingly, Safari is able to hyphenate the German word "Gesamtkunstwerk":

Chrome: no hyphenation
Firefox: no hyphenation
IE11: no hyphenation
Safari: Gesamtkunst-werk [correct!]

I have no idea how Safari is sensing that the word is German and is hyphenating it. Any ideas?

The CSS3 specification indicates a hyphenate-resource option, but I've found no example files to include and/or edit. Ideally, if that option is supported among the major browsers, I'd include it and want to edit it for non-English words as well as editing its defaults.

What is the best approach?

I'm struggling with the different ways browsers handle hyphenation for justified text from line to line.

Method 1. CSS
See this link for a CSS only solution.

article p{
  text-align: justify;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

You have already tried this, and found out that there is absolutely no support for Chrome no matter the browser version, and have seen the lack of consistency of the results across the browsers. And probably wondered is there a more consistent way to hyphen words that works well on ALL major browsers everyhere?

Method 2. Javascript
Hyphenator.js is a Javascript library solution that works on ALL major browsers. And... with even more language support than most browsers offer at the moment. First select one (or multiple) languages you need hypening support in your site, then follow the steps and customise your own script, then finally click on "Create!" which will create the minified javascript for you. You copy that into your hyphenate.js file, and finally don't forget to define the class on the paragraphs you want to be hyphenated.

<head>
  <script src="hyphenate.js" type="text/javascript"></script>
</head>

<body>
  <article lang="nl" class="hyphen">  // in this case Dutch >> NL
    <p>.......</p>
  </article>
</body>

Note: notice I customized the class and shortened to hyphen instead of the default hyphenate

Recommended topics

Hot tags