Line height test

by jamessouth

HTML

<p>This is a test</p>

CSS

body{
/*line-height:1.4;*/
}

JavaScript

$.toPx = function(val,scope){
    var that = parseFloat(val),
        scopeTest = $('<div style="display: none; font-size: 1em; margin: 0; padding:0; height: auto; line-height: 1; border:0;">&nbsp;</div>').appendTo(scope),
        scopeVal = scopeTest.height();
    scopeTest.remove();
    
    that = isNaN(that) ? 1.4 : that;

    return (that * scopeVal) + 'px';
};


var $p = $("p"),
    lineHeight = $p.css("line-height");

lineHeight = (lineHeight.indexOf("px") === -1) ? $.toPx(lineHeight,$p.parent()) :
                   lineHeight;


$p.text($p.text() + " " + lineHeight);