Created
January 21, 2011 00:56
-
-
Save bangpound/789061 to your computer and use it in GitHub Desktop.
Bidirectional Susy grid mixins.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // use with https://github.com/bangpound/compass-susy-plugin/blob/feature%2Frtl/sass/susy/_grid.scss | |
| // html element must have a dir attribute to indicate reading direction. | |
| // e.g. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ar" lang="ar" dir="rtl"> | |
| @mixin bidi-columns($n, $context: false) { | |
| [dir="ltr"] & { | |
| @include columns($n, $context, left); | |
| } | |
| [dir="rtl"] & { | |
| @include columns($n, $context, right); | |
| } | |
| } | |
| @mixin bidi-alpha($nested: false) { | |
| [dir="ltr"] & { | |
| @include alpha($nested, left); | |
| } | |
| [dir="rtl"] & { | |
| @include alpha($nested, right); | |
| } | |
| } | |
| @mixin bidi-omega($nested: false) { | |
| [dir="ltr"] & { | |
| @include omega($nested, left); | |
| } | |
| [dir="rtl"] & { | |
| @include omega($nested, right); | |
| } | |
| } |
nice!
I did consider that IE6 doesn't support attribute selectors, so an alternative would be to add the directionality to the class attribute of the html element or even the body element. I can't think of a reason why a grid container wouldn't also be a child of the body element.
If you don't set the directionality attribute, it means your RTL styles will always have to undo the LTR styles, and it's required for RTL text. Browsers should not infer text direction from the text or language of the document.
Sorry, didn't mean to sound so negative.
yeah, I did it ie6-style with class attributes like dis: https://gist.github.com/789120
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
this won't work in IE6 because it doesn't understand that selector syntax.
it's also a little annoying that you have to set it, but I understand why.