Hyphenation via css now works!

on under asbach
1 minute read

Out Of Date Warning

This article was published on 21/02/2012, this means the content may be out of date or no longer relevant.
You should verify that the technical information in this article is still up to date before relying upon it for your own purposes.

Finally, justify aligning now makes much more sense. Just add the hyphens: auto to your <p>'s. Also, do not forget all the vendor-specific tags and adding a lang='de'/en/... tag to your body/html tag. Works with IE 10, Chrome 13+, Firefox 6+ and Safari 5.1+ (see MDN).

If you are using SASS/SCSS (you do, right?), here the mixin code:

@mixin hyphens($value: "manual") {
  @each $prefix in "", -webkit-, -moz-, -o-, -ms- {
    #{$prefix}hyphens: $value;
  }
}
// using with:
p, li {
  text-align: justify;
  @include hyphens(auto);
}