Is it possible to enable auto-hyphenation in HTML/CSS?

Asked 20/1, 2012 at 6:30 Answered 2/1, 2015 at 6:55

My client has requested to enable auto-hyphenation on this page: http://carlosdinizart.com/biography/ , and I realized I've never actually seen it done on a web-page.

Is it possible to set up auto-hyphenation in an HTML document with just HTML/CSS? If not - what are the options?

Brochu answered 20/1, 2012 at 6:30 Comment(1)

possibly related: https://mcmap.net/q/67930/-how-to-prevent-long-words-from-breaking-my-div/104380 – Inlet 29/1, 2013 at 17:52

CSS3 provides some support for this. Source: http://drublic.de/blog/css3-auto-hyphenation-for-text-elements/ You can check the w3c documentation here: http://www.w3.org/TR/2011/WD-css3-text-20110901/#hyphenation

CSS3 adds six properties to the list of useful thing. These are:

The most important one is hyphens.
You can add dictionary-files with hyphenate-resource so the browser has a better chance to render your text with the right hyphenation.
hyphenate-before sets a minimum number of characters before the hyphenation.
hyphenate-after does the same as hyphenate-before but for characters after the hyphenation.
hyphenate-lines defines about how many lines a hyphenated word is written at a maximum. with hyphenate-character you can specify which HTML-entity should be used, e.g. \2010.

The main property of this stack is hyphens. It accepts one of three values: none, manual or auto. The default one is manual, where you can set hyphens via . auto it the better one for continuous text while words get split if possible and available. And none does not hyphenate at all even if there is a character set for a possible line break in a certain word.

Update:

Browser support information here: http://caniuse.com/css-hyphens

Emporium answered 20/1, 2012 at 6:52 Comment(5)

Interesting. Any information on how widely supported this is? – Miltiades 20/1, 2012 at 6:58

I have updated with a link that lists the browser support for this – Emporium 20/1, 2012 at 7:10

I'm disappointed in both Chrome and Opera. Kudos to IE and Firefox. Also, an up-vote for a property I hadn't heard of or come across. – Galilean 4/3, 2015 at 12:11

respect, that the properties hyphenate-* are not part of CSS Standard anymore. – Poppycock 10/5, 2017 at 7:12

Looks like hyphenate-resource is not a part of spec anymore. And no browser supports it. So we are tied to built-in dictionaries or third-party JS solutions like Hyphenopoly – Minivet 17/1, 2022 at 9:54

An option is to insert soft hyphens into the text in places where it may be broken. The soft hyphen is represented by the entity  in HTML. You may find libraries/tools that can prepare text automatically with s in the right places, otherwise you'll have to do it manually.

Miltiades answered 20/1, 2012 at 6:49 Comment(4)

Teehee I like the way it is abbreviated. Don't be so shy! – Slipway 20/1, 2012 at 7:17

Yup,  is one of my favorite HTML tags. (Did I really just say this? Man, am I nerdy. ;o)) – Miltiades 20/1, 2012 at 7:24

@deceze, I think, you wanted to say "HTML entities", not "tags". ;) – Llama 16/5, 2012 at 10:3

The problem with this is that copying and pasting text with  will copy the soft hyphen character too. It may also mess up Ctrl+F in some browsers. – Komsa 31/5, 2017 at 13:3

To deal with one page that has fixed width for text, the practical move would be to add a couple of SOFT HYPHEN characters (U+00AD), using the entity reference  if you find it more comfortable than entering the (invisible) character itself. You can rather quickly find out which words need to be hyphenated to produce a good result.

In a more complex case (several pages, flexible width), use a preprocessor, or server-side code, or client-side code that adds soft hyphens. The client-side approach is simplest and can be applied independently of server-side technologies and authoring tools. Beware that automatic hyphenation may go wrong and needs some help: the language(s) of the text need to be indicated in markup (or otherwise, depending on the library used).

At the minimum, you could just put the attributes lang=en class=hyphenate into the <body> tag and the following code in the head part:

<script 
  src="http://hyphenator.googlecode.com/svn/tags/Version%204.0.0/Hyphenator.js">
</script>
<script>Hyphenator.run();</script>

Demo: http://bytelevelbooks.com/code/javascript/hyphenation.html (flexible-width text, with just maximum width set, so you can test it varying the browser window width).

Leslee answered 20/1, 2012 at 8:18 Comment(1)

Apparently google no longer hosts Hyphenator.js. Is that the same thing now on cdnjs? – Unaccountedfor 4/11, 2017 at 15:58

At present my css for <p> is

p   {
    font-style: normal;
    padding: 0;
    margin-top: 0;
    margin-left: 0px ;
    margin-right: .5em ;
    margin-bottom: 0;
    text-indent: 1em;
    text-align: justify;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -o-hyphens: auto;
    word-break:break-word;
    hyphens: auto;
}

This doesn't work for Chrome 39 on Mac. Known not to work on Opera. Works for Firefox, iOS Safari.

This is NOT foolproof: Narrow columns (under 6 words) are ugly, but overall it makes the layout look far more like properly set type.

Dorcia answered 2/1, 2015 at 6:55 Comment(0)

Recommended topics

Hot tags