1214552 - Floated :first-letter is cut off

Status: RESOLVED DUPLICATE of bug 290125

(Core :: Layout, defect)

Description

[Saeid Mohadjer]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:41.0) Gecko/20100101 Firefox/41.0
Build ID: 20150929144111

Steps to reproduce:

See jsfiddle at: 
http://jsfiddle.net/0256dxdb/18/ 

or stackoverflow post at: 
http://stackoverflow.com/questions/33101151/why-does-firefox-remove-space-above-and-below-the-first-letter-when-floating-fi


Actual results:

A floated :first-letter gets cut off at top and bottom. 


Expected results:

When a floated :first-letter is styled, it should look exactly as when the first letter is reached via a span selector. That's how other browsers like latest Chrome and IE do it.

Comment 1

[Boris Zbarsky [:bzbarsky]]

> it should look exactly as when the first letter is reached via a span selector

That happens not to be the case per spec.  http://www.w3.org/TR/CSS21/selector.html#first-letter explicitly says:

  In order to achieve traditional drop caps formatting, user agents may approximate font
  sizes, for example to align baselines. Also, the glyph outline may be taken into account
  when formatting. 

That's what you're seeing here.  The glyph outline is being taken into account and the first-letter is being sized to it, instead of leaving space for the nonexistent descender or taller ascender.

Note that nothing is cut off: the entire glyph is in fact shown.

Comment 2

[Saeid Mohadjer]

But this is inconsistent with how other browsers render it!

Comment 3

[Chris Rebert]

Duplicate of bug 290125 ?

Comment 4

[Boris Zbarsky [:bzbarsky]]

> But this is inconsistent with how other browsers render it!

Yes, the other browsers never bothered to make their first-letter actually work well as a drop cap.

> Duplicate of bug 290125 ?

Yeah, good point.