Mother-effing hyphenation

[Compass#788] adds mixin for word-break and hyphens
nickcooley · Apr 6, 2012 · 4c10efc · 4c10efc
1 parent 049a3a3
commit 4c10efc
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 21 deletions.
diff --git a/doc-src/content/reference/compass/css3/hyphenate.haml b/doc-src/content/reference/compass/css3/hyphenate.haml
@@ -12,5 +12,5 @@ classnames:
 ---
 - render 'reference' do
   :markdown
-    Provides a mixin for `hyphenate`.
-    See the CSS3 specification: [appearance](http://www.w3.org/TR/css3-ui/#appearance).
+    Provides mixins that pertain to CSS3 Word Breaking and Hyphenation.
+    See the CSS3 specification: [hyphens](http://www.w3.org/TR/css3-text/#hyphens) and [word-break](http://www.w3.org/TR/css3-text/#word-break).
diff --git a/frameworks/compass/stylesheets/compass/_css3.scss b/frameworks/compass/stylesheets/compass/_css3.scss
@@ -16,3 +16,4 @@
 @import "css3/appearance";
 @import "css3/animation";
 @import "css3/hyphenation";
+@import "css3/hyphenation";
diff --git a/frameworks/compass/stylesheets/compass/css3/_hyphenation.scss b/frameworks/compass/stylesheets/compass/css3/_hyphenation.scss
@@ -1,14 +1,22 @@
 @import "shared";
 
-// Mixins to support CSS Text Level 3
+// Mixins to support specific CSS Text Level 3 elements
+//
+//
+// 
+// Mixin for word-break properties
 // http://www.w3.org/css3-text/#word-break
-// Mixin encompassing all word-break properties
 // * legal values for $type : normal, keep-all, break-all 
 //
 // Example:
 //    p.wordBreak {@include word-break(break-all);}
 //
 // Which generates: 
+//    p.wordBreak {
+//      -ms-word-break: break-all;
+//      word-break: break-all;
+//      word-break: break-word;}
+//
 @mixin word-break($value: normal){  
   @if $value == break-all {
     //Most browsers handle the break-all case the same... 
@@ -20,16 +28,27 @@
       not -moz, not -webkit, not -o, not -ms, not -khtml, official
     );
   }
-
-  @include experimental(word-break, $value,
+  @else {
+    @include experimental(word-break, $value,
       not -moz, not -webkit, not -o, -ms, not -khtml, official
-  );
+    );
+  }
 }
 
-// Mixin encompassing all column rule properties
+// Mixin for the hyphens property
+//
+// W3C specification: http://www.w3.org/TR/css3-text/#hyphens 
 // * legal values for $type : auto, manual, none
+//
 // Example:
-//  @include hyphens(auto);
+//  p {
+//    @include hyphens(auto);}
+// Which generates: 
+//  p {
+//    -moz-hyphens: auto;
+//    -webkit-hyphens: auto;
+//    hyphens: auto;}
+//  
 @mixin hyphens($value: auto){
   @include experimental(hyphens, $value,
     -moz, -webkit, not -o, not -ms, not -khtml, official
@@ -39,15 +58,20 @@
 // Mixin for x-browser hyphenation based on @auchenberg's post:
 // Removes the need for the <wbr/> 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;} 
+//
 @mixin hyphenation{
-	color:blue;
-  @include experimental(word-break, break-all,
-    	not -moz, not -webkit, not -o, -ms, not -khtml, official
-  	);
-	//Non standard for Webkit
-	@include experimental(word-break, break-word,
-    	not -moz, not -webkit, not -o, not -ms, not -khtml, official
-  	);
-
-	@include hyphens;
+  @include word-break(break-all);
+  @include hyphens; 
 }
diff --git a/test/fixtures/stylesheets/compass/css/hyphenation.css b/test/fixtures/stylesheets/compass/css/hyphenation.css
@@ -1,4 +1,13 @@
-.hyphen {
+.word-break {
+  -ms-word-break: keep-all;
+  word-break: keep-all; }
+
+.hyphens {
+  -moz-hyphens: manual;
+  -webkit-hyphens: manual;
+  hyphens: manual; }
+
+.hyphenate {
   -ms-word-break: break-all;
   word-break: break-all;
   word-break: break-word;

diff --git a/test/fixtures/stylesheets/compass/sass/hyphenation.scss b/test/fixtures/stylesheets/compass/sass/hyphenation.scss
@@ -1,5 +1,11 @@
 @import "compass/css3/hyphenation";
 
-.hyphen {
+.word-break {
+	@include word-break(keep-all);
+}
+.hyphens {
+	@include hyphens(manual);
+}
+.hyphenate {
 	@include hyphenation;
 }