Drop Caps vertical alignment

by marcoscarfagna

HTML

<div id="container">
    <p class="cap">Ž ed Fhi GaFshF s in GfsF Fhl kfhlkshG glkHjha slkgh ka KFhl skh glkSdsfg d HH Gkhaskg hsHöAKH Hköah skhHaSÖK G hih h G h IGU</p>
    <p class="cap">Z as Fhi GaFshF s in GfsF Fhl kfhlkshG glkHjha slkgh ka KFhl skh glkSdsfg d HH Gkhaskg hsHöAKH Hköah skhHaSÖK G hih h G h IGU</p>
</div>

CSS

#container{padding:30px;}

p.cap {
    text-indent:0;
    font-size:125%;
    line-height:125%;
    text-align:justify;
}

.caps {
    display:inline-block;
    float:left;
    font-size:230%;
    line-height:100%;
    margin-top:-2px;
    padding-right:2px;
}

JavaScript

$(document).ready(function () {

    $("#container p").each(function () {
        var text = $(this).html();
        var first = $('<span>' + text.charAt(0) + '</span>').addClass('caps');
        $(this).html(text.substring(1)).prepend(first);
    });

});