JSFiddle - React, Tailwind, and code Playground

by johnhunter

HTML

<p>Times 60px/100%</p>

<p>Note at 60px font-size there is a 9px difference in the baseline between webkit and gecko on os x</p>

<div class="box">
    <span class="content">Figure</span>
    <span class="content">eight</span>


    <div class="line baseline"></div>
    <div class="font-body">&nbsp;</div>
</div>

<div>
    <ol>
        <li><a href="http://www.w3.org/TR/CSS21/visudet.html#leading">W3C Visual formatting model details: Leading</a></li>
        <li><a href="http://typophile.com/node/13081">Vertical Metrics How-To</a></li>
        <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=402473">Mozilla bug gives some info on font height</a></li>
    </ol>

</div>

CSS

body {
    margin: 20px;
    font-family: Times,'Times new roman';
    font-size: 16px;
    line-height: 1.2;
}

.box {
    background-color: rgba(255, 255, 51, .2);
    font-size: 120px;
    line-height: 100%;

    /* positioning context */
    position: relative;
}
.content {
    background-color:  rgba(255, 51, 51, .2);
    display: inline-block;
}

.line {
    position: absolute;
    left: -10px;
    right: -10px;
    top: 0;
    height: 0;
    overflow:hidden;
}
.baseline {
    border-bottom: 1px solid red;
    top: 99px;
}
.font-body {
    position: absolute;
    border-top: 1px solid blue;
    border-bottom: 1px solid blue;
    top: 16px;
    height: 108px;
    left: -10px;
    right: -10px;
}

.gecko .baseline {
    top: 90px; /*-9px*/
}
.gecko .font-body {
    top: 7px; /*-9px*/
}

JavaScript

(function(doc, ua){
    console.log(ua);
    var bc = doc.documentElement.classList;
    //if (/gecko/.test(ua) && /os x/.test(ua)) {
    //    if (/webkit/.test(ua)) { bc.add('webkit') }
    //    else { bc.add('gecko') }
    //}
}(document, navigator.userAgent.toLowerCase()));