Hyphenation via css now works!

21st February 2012 – 145 words

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);
}