CSS3: Auto Hyphenation for Text-Elements

by CSS Research

Hey there…

This post is 1214 days old. It was written on 21.08.2011. Please make sure to be careful with the information provided and check a more recent source on this topic.

In browsers we do not have the ability to automatically hyphenate continuous text. This is an issue when you are using text-align: justify; for instance because the text may look really bad.

I want to write about this topic because of the discussion that came up at the HTML5 Boilerpates issue-list and this blogpost at Fontdeck Blog.

The specification says:

Hyphenation means splitting words to improve the layout of paragraphs.

CSS3 Properties

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

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.

There is one thing you have to be aware of if you use this property: You have to define a lang-attribute on an element that carries text that should be hyphenated.

I made this jsFidde where no lang-attribute is set. It does not work in Firefox. With this attribute set, it works quite good in Firefox, too (thx to 91media).

Browsersupport

Currently hyphens is supported in Safari 5.1 and Firefox 6. For Firefox 6 the lang-attribute must be set as mentioned above. Also it only supports english.
It is not working in Chrome 15.

You have to add some vendor-prefixes for support in browsers:

.element {
  -webkit-hyphens: auto;
     -moz-hyphens: auto;
          hyphens: auto;
}

There is a polyfill for this. It’s working with JS and inserts the HTML special-char ­ where it fits. It supports many languages. This polyfill also uses the CSS-property where it is possible.

Edit:
Thanks to Ash for letting me know about my mistake using hyphen instead of hyphens.

Update

I just found this issue at the Modernizr issue-tracker where a test for the hyphens-attribute is discussed. There is a test in the latest GitHub-Version for it. Search for csshyphens.

Update 2: 12.11.2012

-webkit-hyphens has now landed in Chrome Beta.



Ash Robbins

Thanks for the post. I would like to mention though that hyphens don’t appear for me using the syntax you state above. You need to use the below from my experience.

-webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;

Essentially the same but with an s on the end of hyphen! Great post though, cheers.


Daniel

Yeah… Um… It doesn’t work. The only browser that really supports it is Safari. But I hope this will be better implemented in the future so I’ll remember this. Thanks.


Leave a Comment

Remember what your mother told you: Be friendly. Your email address will not be published.
Markdown-Goodies available.