Q
Version: 1.1.alpha.0
Source on Github

Compass Hyphenation

Provides mixins that pertain to CSS3 Word Breaking and Hyphenation. See the CSS3 specification: hyphens and word-break.

Firefox requires you to set the lang attribute in your markup.

This file can be imported using: @import "compass/css3/hyphenation"

Imports

  1. Browser Support – Provides configuration options for the Compass Browser Support Matrix.

Configurable Variables help

$graceful-usage-threshold

The the user threshold for hyphens support. Defaults to $graceful-usage-threshold.

Mixins

view source 

=word-break($value: normal)
  word-break: $value
  @if $value == break-all
    //Webkit handles break-all differently... as break-word
    +with-prefix(-webkit)
      word-break: break-word

@mixin word-break($value: normal) {
  word-break: $value;
  @if $value == break-all {
    //Webkit handles break-all differently... as break-word
    @include with-prefix(-webkit) {
      word-break: break-word;
    }
  }
}

Mixin for word-break properties http://www.w3.org/css3-text/#word-break * legal values for $type : normal, keep-all, break-all

Example: p.wordBreak {@include word-break(break-all);}

Which generates: p.wordBreak { word-break: break-all; word-break: break-word;}

view source 

=hyphens($value: auto)
  +prefixed-properties(css-hyphens, $hyphens-support-threshold, (hyphens: $value))

@mixin hyphens($value: auto) {
  @include prefixed-properties(css-hyphens, $hyphens-support-threshold, (hyphens: $value));
}

Mixin for the hyphens property

W3C specification: http://www.w3.org/TR/css3-text/#hyphens * legal values for $type : auto, manual, none

Example: p { @include hyphens(auto);} Which generates: p { -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto;}

view source 

=hyphenation
  +word-break(break-all)
  +hyphens

@mixin hyphenation {
  @include word-break(break-all);
  @include hyphens;
}

Mixin for x-browser hyphenation based on @auchenberg's post: Removes the need for the HTML tag http://blog.kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/

Example: div {@include hyphenation;}

Which generates: div { -ms-word-break: break-all; word-break: break-all; word-break: break-word; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto;}