Skip to content
Browse files

Mother-effing hyphenation

[#788] adds mixin for word-break and hyphens
  • Loading branch information...
1 parent 049a3a3 commit 4c10efc3d9c0635ae7dc3283da1d9ff6d8b2df43 @nickcooley committed Apr 4, 2012
View
4 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).
View
1 frameworks/compass/stylesheets/compass/_css3.scss
@@ -16,3 +16,4 @@
@import "css3/appearance";
@import "css3/animation";
@import "css3/hyphenation";
+@import "css3/hyphenation";
View
58 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;
}
View
11 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;
View
8 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;
}

0 comments on commit 4c10efc

Please sign in to comment.
Something went wrong with that request. Please try again.