Font Smoothing Modernizr Test

Adapted from the work of Zoltan Hawryluk. http://www.useragentman.com/blog/2009/11/29/how-to-detect-font-smoothing-using-javascript/

by wellcaffeinated

HTML

<script src="http://www.modernizr.com/downloads/modernizr-2.0.6.js"></script>
<script src="http://fonts.googleapis.com/css?family=Spirax"></script>
<p id="statusMsg"></p>

CSS

#statusMsg {
    font-size: 18px;
    padding: 1em;
}
.no-fontsmoothing #statusMsg {
    font-family: arial;
}

.fontsmoothing #statusMsg {
    font-family: 'Spirax', cursive;
}

JavaScript

// The following is adapted from...

/*
 * TypeHelpers version 1.0
 * Zoltan Hawryluk, Nov 24 2009.  
 * 
 * Released under the MIT License. http://www.opensource.org/licenses/mit-license.php
 * 
 */

Modernizr.addTest('fontsmoothing', function() {
    // IE has screen.fontSmoothingEnabled - sweet!      
    if (typeof(screen.fontSmoothingEnabled) != "undefined") {
        return screen.fontSmoothingEnabled;
    } else {

        try {

            // Create a 35x35 Canvas block.
            var canvasNode = document.createElement("canvas")
              , test = false
              , fake = false
              , root = document.body || (function () {
                    fake = true;
                    return document.documentElement.appendChild(document.createElement('body'));
              }());
            
            canvasNode.width = "35";
            canvasNode.height = "35"

            // We must put this node into the body, otherwise 
            // Safari Windows does not report correctly.
            canvasNode.style.display = "none";
            root.appendChild(canvasNode);
            var ctx = canvasNode.getContext("2d");

            // draw a black letter "O", 32px Arial.
            ctx.textBaseline = "top";
            ctx.font = "32px Arial";
            ctx.fillStyle = "black";
            ctx.strokeStyle = "black";

            ctx.fillText("O", 0, 0);

            // start at (8,1) and search the canvas from left to right,
            // top to bottom to see if we can find a non-black pixel.  If
            // so we return true.
            for (var j = 8; j <= 32; j++) {
                for (var i = 1; i <= 32; i++) {
                    var imageData = ctx.getImageData(i, j, 1, 1).data;
                    var alpha = imageData[3];

                    if (alpha != 255 && alpha != 0) {
                        test = true; // font-smoothing must be on.
                        break;
                    }
                }
            }
...