JSFiddle - React, Tailwind, and code Playground

em ruler

by bitstarr

CSS

.ruler .unit { float: left; width: 5em; font-size: 10px; text-indent: 2px; overflow: hidden }
.ruler.js { position: absolute; overflow: hidden }
.ruler.js .unit { margin: 0 0 0 -1px; border-left: 1px solid #ccc; color: #ccc; }

JavaScript

(function( $ ){
    rulerCSS = '.ruler .unit { float: left; width: 5em; font-size: 10px; text-indent: 2px; overflow: hidden }
                .ruler.js { position: absolute; overflow: hidden }
                .ruler.js .unit { margin: 0 0 0 -1px; border-left: 1px solid #ccc; color: #ccc; }'
    $('body').prepend('<div class="ruler"><div class="unit">0</div></div>');
    $('head').append('<style type="text/css">' + rulerCSS + '</style>')

    function ruler() {
        var factor = 5,
            ruler = $('.ruler'),
            width = $('.unit', ruler).width(),
            space = ruler.parent().width(),
            count = Math.floor(space/width),
            rulerSet = '';
        
        ruler.addClass('js').width(space);
        for (i = 0; i < count; i++) {
            rulerSet+= '<div class="unit">' + i*factor + '</div>';
        }

        ruler.empty().append(rulerSet);
    }
    ruler();
    
    $(window).resize(function() { ruler(); });

})( jQuery );