Quote:
Originally Posted by Jellby
I don't have a Sony to try, but I'm the author of the ePUB example.
I'm pretty sure the problem is that the reader interprets "line-height: 0.75" by lowering the top "border", while browsers typically raise the whole "block" (the drop cap in this case).
|
I think part of the problem is that the interpretation of the 'line-height' in this case isn't necessarily the most unambiguous way to achieve the result you want. According to the CSS spec, setting 'float' causes the <span/> to become a block-level element. Setting the 'line-height' causes the size of the line-box to become 0.75 of the current em-size, or 3ems. It then says that "[u]ser agents center glyphs vertically in an inline box, adding half-leading on the top and bottom," but "[w]hen the 'line-height' value is less than the content height, the final inline box height will be less than the font size and the rendered glyphs will 'bleed' outside the box." To me this is ambiguous about *how* they bleed -- ADE appears to shrink the line-box at the top & bottom, but then only bleed the glyph out the bottom.
Instead, try setting a 'line-height' of 1em and a 'height' of 1em. That should force the size of the block and line-box to be the same. That said, you probably don't want to set the font size to 400% -- that's 4x the font-size, but the default 'line-height' is probably more than 1.0. The only way to get consistent results is to set the default line-height to a value you control such as 1.2, then you can set the font-size in the drop-cap to something like 4.8em to force it to be 4 lines tall.