JSFiddle - React, Tailwind, and code Playground

by daneren2005

HTML

<div id="header">Header</div>
<div id="footer">Footer</div>

JavaScript

$.FONT_MULTIPLIER = 70;

var starter = createElementWithScale(96);
var startBot = starter.prev()[0].getBoundingClientRect().bottom;
var startTop = starter.next()[0].getBoundingClientRect().top;
var startHeight = (startTop - startBot) / 96;

checkRatio(96);
checkRatio(82.2856)
checkRatio(70.2222);
checkRatio(60.1828);
checkRatio(15);

function createElementWithScale(ratio) {
	var margins = 0.125 * ratio;
	var html = '<div style="font-size: 19pt; margin-top: ' + margins + 'px; margin-bottom: ' + margins + 'px;">Ajemian</div>';
    html = scaleText(html, ratio / $.FONT_MULTIPLIER, false);

	return $(html).insertBefore('#footer');
}

function checkRatio(ratio) {
	var newElem = createElementWithScale(ratio);
    
    var diff = getElementDifference(newElem, ratio);
   	var startDiff = diff;
    if(diff < 0) {
        var marginBot = parseFloat(newElem.css('margin-bottom').replace('px', '')) + (diff * ratio);
        newElem.css('margin-bottom', marginBot);
        diff = getElementDifference(newElem, ratio);
        startDiff = diff;
        
        // Try again to see what differences we can shafe off
        marginBot = parseFloat(newElem.css('margin-bottom').replace('px', '')) + (diff * ratio);
        newElem.css('margin-bottom', marginBot);
        diff = getElementDifference(newElem, ratio);
    }
    
    newElem.append(' ' + parseFloat(newElem[0].style['font-size'].replace('pt', '')).toFixed(2) + 'pt for ' + getElementHeight(newElem, ratio).toFixed(2) + 'in: ' + (startDiff * ratio).toFixed(4) + ' => ' + (diff * ratio).toFixed(4));
}

function getElementHeight(elem, ratio) {
	var prevBot = elem.prev()[0].getBoundingClientRect().bottom;
    var nextTop = elem.next()[0].getBoundingClientRect().top;
    return (nextTop - prevBot) / ratio;
}
function getElementDifference(elem, ratio) {
	return startHeight - getElementHeight(elem, ratio);
}

function scaleText(html, ratio, round) {
	// Loop through and replace every instead of font-size with ratio'd version
	var...