JSFiddle - React, Tailwind, and code Playground

by Jan Marthedal Rasmussen

HTML

<div id="ex-elem"></div>
<div id="em-elem"></div>
<div id="out"></div>

CSS

@font-face {font-family: MJXc-TeX-math-Iw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/fonts/HTML-CSS/TeX/eot/MathJax_Math-Italic.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/fonts/HTML-CSS/TeX/woff/MathJax_Math-Italic.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/fonts/HTML-CSS/TeX/otf/MathJax_Math-Italic.otf') format('opentype')}

#ex-elem, #em-elem {
  font-family: "MJXc-TeX-math-Iw";
  font-size: "16px";
}

#ex-elem {
  background-color: red;
  height: 10ex;
}

#em-elem {
  background-color: blue;
  height: 10em;
}

JavaScript

var out=document.querySelector('#out');
var exElem=document.querySelector('#ex-elem');
var emElem=document.querySelector('#em-elem');

function output(st) {
	var el=document.createElement('div');
  el.appendChild(document.createTextNode(st));
	out.appendChild(el);  
}

function parsePx(st) {
	return parseFloat(st.substr(0, st.length - 2));
}

var exHeight=getComputedStyle(exElem).height;
var emHeight=getComputedStyle(emElem).height;

output('10 ex: ' + exHeight);
output('10 em: ' + emHeight);
output('ratio: ' + parsePx(emHeight) / parsePx(exHeight));