How to correctly align a drop cap in html/css?

Question

Well I've got the following problem: I need a dynamic solution (dont know the text, resulting font-size etc.) to typografically correctly align a drop cap. Correctly means: the cap-height-line of the drop cap should be the same as the cap height line of paragraph.

Eg: Z Ž Ẑ should all align to their upper horizontal bar. While I've seen some (wrong) solutions to this problem (they align the overall height and therefore look terrible with accents, dieresis etc.), I've not seen any correct solution.

Does anyone know some?

PS: It could work, if I'd find some way to consistently align the baseline of the dropcap with the baseline of the 2nd line of the paragraph, because from there it could be done with a %-modifier of the font-size. Unfortunately, I also don't know how I could archive this.

Here is something to play with:

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

p.cap:first-letter {
    display: inline-block;
    float: left;
    font-size: 230%;
}

http://jsfiddle.net/s856R/

Answer 1

I tested the following code in Chrome, IE10 and Firefox on Windows 7:

p.cap {
    line-height: 1.4em;
}

p.cap:first-letter {
    font-size: 2.8em;
    float: left;
    margin-top: 0.25em;
}

(Note that I'm using em instead of percent here and that the size of the drop cap is double that of the paragraph line-height.)

It seems that the culprit is float in Firefox. It displays nice in Chrome and Internet Explorer, but in Firefox using float on the first character seems to disconnect it from the baseline of the rest of the line. I can delete float: left; and add vertical-align: -100%; to get the baseline to match in all browsers, but then the line-height gets messed up and the drop-cap doesn't float so it's not a solution.

The only solution seems to be to put a span around the first letter and use that instead. Like so:

<p class="cap"><span class="dropcap">Ž</span>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"><span class="dropcap">Z</span>as Fhi GaFshF s in GfsF Fhl kfhlkshG glkHjha   slkgh ka KFhl sh glkSdsfg d HH Gkhaskg hsHöAKH Hköah skhHaSÖK G hih h G h IGU</p>

and:

p.cap .dropcap {
    float: left;
    font-size: 2.8em;
    margin-top: 0.25em;
}

This seems to keep the baseline and displays nicely in Firefox as well, but writing those tags dynamically will naturally require PHP or JavaScript or similar. If that's not an option you will probably not be able to get good results in Firefox. Unfortunately.