JSFiddle - React, Tailwind, and code Playground

by fliptheweb

HTML

<p>
    Arial ascender = 1491,<br/> 
    descender = -431,<br/> 
    linegap = 307, <br/>
    units per em = 2048, <br/>
    body height = 1922, <br/>
    body height + gap = 2229
    </p>
<div>
    <span>element</span>
</div>

<div>
    <span>Inline element <br/> with 2 rows</span>
</div>

CSS

body {
    font-size: 2048px;
}

p {
    font-size: 20px;
}

div {
    border: 1px solid #000;
    height: 1em;
    margin-bottom: 1em;
}

span {
    background: rgba(0,0,0,.3);
    font: 1em/1em sans;
    font-family: "Arial Hebrew";
}

JavaScript

var example = document.getElementsByTagName("span")[0].getBoundingClientRect();
var exampleWidth = example.width;
var exampleHeight = example.height;
console.log(exampleHeight);