JSFiddle - React, Tailwind, and code Playground

by dougneiner

HTML

<p class="c1">A Sample Heading</p>
<p class="c2">A Sample Heading</p>

CSS

.c2 { letter-spacing: -0.01em; }

JavaScript

var subpixelRendering = (function () {
    var span = document.createElement( "span" ),
        body = document.body,
        faked = false,
        width, pass;
   
    if ( !body ) {
        faked = true;
        body = document.createElement('body');
        body.style.background = ""; // Avoid crashing in IE8 when background image is used
        document.documentElement.appendChild( body );
    };
    
    span.innerHTML = "AB";
    span.style.fontSize = "50px";
    
    body.appendChild( span );
    
    width = span.offsetWidth;
    
    span.style.letterSpacing = "-0.01em";
    
    pass = width + " " + span.offsetWidth;
    
    if ( faked ) {
       document.documentElement.removeChild( body );            
    } else {
       body.removeChild( span );
    }

    return pass;
}());


    $( function () {
        
        $(document.body).append( "<p>" + ( subpixelRendering ) +"</p>");
            });