css text boundaries

HTML

<div style="background:#eee;">
    <span id="my-span" style="font:155px 'Arial'">Category</span>
    <div id="my-div"></div>
</div>
<div id="msg" style="clear:both;"></div>
<div>
    <input id="slider" type="range" min="8" max="210"/>
</div>    
<div id="bb" style="border:#444 1px solid; position:absolute;width:200px"></div>

CSS

#my-div {
    border:1px solid black; 
    display: inline-block; 
    width: 1px; height: 0px; 
    vertical-align:baseline
}

#my-span { line-height:1em; }

body, html  { padding:0; margin:0; }

JavaScript

function refreshTextMetrics() {
    $('#msg').empty();
    function log(str) {
        var m = $('#msg');
        m.html(m.html()+'<pre>'+str+'</pre>');
    }

    var my_span_cr = $('#my-span')[0].getBoundingClientRect();
    var my_div_cr = $("#my-div")[0].getBoundingClientRect();
    var bounding_height = $('#my-span')[0].offsetHeight;
    log("Max height of font is " + bounding_height);
    var ascent = my_div_cr.top - my_span_cr.top;
    log("Ascent " + ascent);
    var descent = bounding_height - ascent;
    log("Descent " + descent);
    
    $('#bb').css({left: 0, 
                  top:  bounding_height-ascent, 
                  width: my_span_cr.width,
                  height: ascent});
}

refreshTextMetrics();

$('#slider').change(function() {
    $('#my-span').css({font: this.value+"px 'Arial'"});
    refreshTextMetrics();
});