em ruler - autarchic

em ruler

CSS

body { font-size: .9em }

JavaScript

(function( d, w ){
    
    var factor = 10,
        head = d.head,
        body = d.body;
    // add styling for later    
    var rulerCSS = '#ruler .unit { float: left; width: ' + factor + 'em; text-align: right; overflow: hidden } ';
    rulerCSS+= '#ruler.js { position: absolute; overflow: hidden } ';
    rulerCSS+= '#ruler.js .unit { margin: 0 -1px 0 0; border-right: 1px solid #ccc; color: #aaa }' ;
    rulerCSS+= '#ruler.js span { font-family: Courier New, Courier, monospace; font-size: 10px }';
       
    var css = d.createElement('style');
    css.type = 'text/css';
    if (css.styleSheet) { css.styleSheet.cssText = rulerCSS; }
    else { css.appendChild(d.createTextNode(rulerCSS)); }
    head.appendChild(css);

    // add a example unit fore our measure
    var measure =  d.createElement('div');
    measure.id = 'ruler';
    measure.style.cssText = 'position:fixed; top:0; left:0';
    measure.innerHTML = '<div class="unit">0</div>';
    body.appendChild(measure);

    // show as many units as possible
    function ruler() {
        var ruler = d.querySelector('#ruler'),
            unit  = ruler.querySelector('.unit'),
            width = unit.clientWidth,
            space = w.outerWidth,
            count = Math.floor(space/width),
            rulerSet = '';
        
        ruler.className = 'js';
        ruler.style.width = space + 'px';
        for (i = 1; i < count+1; i++) {
            rulerSet+= '<div class="unit"><span>' + i*factor + '&nbsp;</span></div>';
        }

        ruler.innerHTML = rulerSet;
    }
    ruler();
    
    w.onresize = function(event) { ruler(); }

})( document, window );