JSFiddle - React, Tailwind, and code Playground

by prozoroff

HTML

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<div id='result'></div>

JavaScript

var fonts = ["Arial","Verdana","Helvetica","Trebuchet MS", "Comic Sans MS","Times New Roman","Monaco"];


for(var i = 0; i < fonts.length; i++){
var hidden = $('<span id="hidden" style="font-family: ' + fonts[i] + '; font-size: 12px; font-weight: normal;"></span>');
$('body').append(hidden);
$('body').append("<br/>");
var hiddenItalic = $('<span id="hidden" style="font-family: ' + fonts[i] + '; font-style:italic;  font-size: 12px; font-weight: normal;"></span>');
$('body').append(hiddenItalic);
$('body').append("<br/>");

function getStringWidth(element, string){
 		element.text(string);
    var width = element[0].getBoundingClientRect().width;
    return width;
}

var testString = "The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.";

$("#result").append(getStringWidth(hidden, testString)/getStringWidth(hiddenItalic, testString) + "<br/>");

}