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;
    
        // style and content
        container.style.cssText = ('position: absolute; top: -10em; visibility:hidden; font: normal 10px arial;' + textSizeAdjust)
            .replace(/;/g, ' !important;');
        inner.style.cssText = ('float: left; font-size: 33.3333%;' + textSizeAdjust)
            .replace(/;/g, ' !important;');
        inner.textContent = 'This is a text written in Arial';
        
        // add test <div>s to the DOM
        container.appendChild(inner);
        document.body.appendChild(container);

        // determine width
        hasSubpixelFontRendering = window.getComputedStyle 
            ? window.getComputedStyle(inner,null).getPropertyValue("width") !== '44px'
            : false;
        log('----------------------');
        log(hasSubpixelFontRendering ? "DirectWrite" : "GDI");
        log(window.getComputedStyle
            ? window.getComputedStyle(inner,null).getPropertyValue("width")
            : "unknown");

        // clean up
        //container.parentNode.removeChild(container);
        
        return hasSubpixelFontRendering;
    }
/*    
    document.documentElement.className += ' '
       + (!testSubpixelFontRendering() ? 'no-' : '')
       + 'subpixelfont';
*/
   ...