JSFiddle - React, Tailwind, and code Playground

by htmlzengarden

HTML

<p class="fixme"><img src="http://dummyimage.com/110/000/fff" height="110" width="110" alt="" /></p>
<p>test</p>
<p class="hide fixme">toto</p>
<p>test</p>
<table class="fixme">
    <tr>
        <td>table</td>
        <td>table</td>
        <td>table</td>
    </tr>
    <tr>
        <td>table</td>
        <td>table</td>
        <td>table</td>
    </tr>
    <tr>
        <td>table</td>
        <td>table</td>
        <td>table</td>
    </tr>
</table>
<p>test</p>
<div class="big">AAA<div class="fixme">BBB</div></div>
<p>test</p>

CSS

html
{
    font-size: 100.01%;
}
body
{
    font-size: 75%;
    line-height: 1.5em;
}
td
{
    padding: 0.5em;
    border: 1px solid red;
}
.hide
{
    display: none;
}
.big
{
    font-size:2em;
}
.big div
{
    font-size: 1.2em;
    line-height: 2;
}

JavaScript

jQuery(function(){
    grid('.fixme');
});

$.fn.toEm = function(settings){
    settings = jQuery.extend({
        scope: 'body'
    }, settings);
    var that = parseInt(this[0],10);
    var scopeTest = jQuery('<div style="display: none; font-size: 1em; margin: 0; padding:0; height: auto; line-height: 1; border:0;">&nbsp;</div>').appendTo(settings.scope);
    var scopeVal = scopeTest.height();
    scopeTest.remove();
    return (that / scopeVal).toFixed(8) + 'em';
};

var grid = function(selector){
    if(!jQuery(selector).length) return;
        
    jQuery(selector).each(function(){
        
        var       that = jQuery(this);
        
        var     height = parseInt(that.css('height'));
        var lineheight = parseInt(that.css('line-height'));
        var    display =          that.css('display');
        
        height         = parseInt(jQuery(    height).toEm({scope: that}));
        lineheight     = parseInt(jQuery(lineheight).toEm({scope: that}));
                
        var      lines = parseInt(height / lineheight);
        
        that.wrap('<div />');
        that.parent().css('height', lineheight * (lines + 1) + 'em');
    });
};