Created
December 13, 2012 20:34
-
-
Save jhogue/4279566 to your computer and use it in GitHub Desktop.
A SASS function to emulate what font-size-adjust is meant to do. Until it is widely supported, we can use a combination of math and Modernizr to meet the needs. ¶ The value for $font-size-adjust-value in this function is not calculated in the same way as a value for font-size-adjust. In my real-world example, font-size-adjust: .465; would be the…
This file contains 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
/* Not widely supported, can't use this yet */ | |
@mixin font-size-adjust { | |
-webkit-font-size-adjust: 0.465; /* No support yet */ | |
font-size-adjust: 0.465; /* Firefox only */ | |
} | |
/* Define these somewhere if you aren't already */ | |
$font-size-adjust-value: 1.15; | |
$base-font-size: 16px; | |
/* Since we can't use the above, let's create our own way to do it. */ | |
@mixin fontface-adjust( $pixel, $adjust-value: $font-size-adjust-value, $base-size:$base-font-size ) { | |
/* Set a default that will do nothing, just in case */ | |
@if $adjust-value == none { | |
$adjust-value: 1; | |
} | |
/* Clear units to make the math easier. Plus, we return EMs anyway */ | |
$pixel: clear-units($pixel); | |
$base-size: clear-units($base-size); | |
/* Return the default font-size in ems – then, scale it up if fontface is supported (needs Modernizr) */ | |
font-size: #{$pixel / $base-size}em; | |
.fontface & { | |
font-size: #{$pixel*$adjust-value / $base-size}em; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Full write up now online here: http://www.projectevolution.com/activity/compass-tricks-supporting-intention-font-size-adjust/