JSFiddle - React, Tailwind, and code Playground

by rodneyrehm

HTML

<button id="run">test</button>

CSS

p {
    -webkit-text-size-adjust: none; 
       -moz-text-size-adjust: none; 
        -ms-text-size-adjust: none; 
         -o-text-size-adjust: none;
            text-size-adjust: none;
}

JavaScript

function log (m) {
    $('<p></p>').text(m).appendTo(document.body);
}
/*
 * Test for sub-pixel font rendering support
 * Authors: @derSchepp, @gerritvanaaken, @rodneyrehm, @yatil
 * https://github.com/gerritvanaaken/subpixeldetect/
 */
(function(window, document){
    function testSubpixelFontRendering() {
        var container = document.createElement('div'),
            inner = document.createElement('div'),
            // prevent scaling text on zoomed pages
            // https://developer.mozilla.org/en/CSS/text-size-adjust
            textSizeAdjust = ' -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; -o-text-size-adjust: none; text-size-adjust: none;',
            hasSubpixelFontRendering = false;
    
        // style and content
        // 31px is a prime number that gets rounded to 30px in browsers w/o subpixel rendering
        container.style.cssText = ('position: absolute; top: -10em; visibility: hidden; height: 30px; overflow: hidden; font: normal 31px arial;' + textSizeAdjust)
            .replace(/;/g, ' !important;');
        inner.style.cssText = ('font-size: 33.3333%; line-height: 3;' + textSizeAdjust)
            .replace(/;/g, ' !important;');
        inner.innerHTML = '&nbsp;';
        
        
        // add test <div>s to the DOM
        container.appendChild(inner);
        document.body.appendChild(container);
        
        // check for lte IE8 and then for height differences
        // !window.getComputedStyle = lte IE8
        // if container.clientHeight < container.scrollHeight, subpixel = on
        hasSubpixelFontRendering = window.getComputedStyle && container.clientHeight < container.scrollHeight ? true : false;

        log('----------------------');
        log(hasSubpixelFontRendering ? "DirectWrite" : "GDI");
        log(container.clientHeight + " < " + container.scrollHeight);

        // clean up
        //container.parentNode.removeChild(container);
        
        return...