561656 - Floated :first-letter is misaligned

Status: RESOLVED DUPLICATE of bug 415506

(Core :: Layout: Block and Inline, defect)

Description

[Andrej]

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.2.3) Gecko/20100405 Firefox/3.6.3 (Swiftfox)
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.2.3) Gecko/20100405 Firefox/3.6.3 (Swiftfox)

line-height can not be set on a floated :first-letter even though the property should apply to said pseudo-element.

Possibly related is the displacement of a floated :first-letter. When the line-height is greater than 100% the floated :first-letter should apply an additional padding at the top to match the following line.

Reproducible: Always

Steps to Reproduce:
1. CSS:
p {font-size: 1em; line-height: 1.5em;} /* font 12px, line 18px */
p:first-letter {font-size: 3em; line-height: 1em; float: left;} /* font 36px, line 36px */

2. Check the attached screenshot to compare khtml/webkit (correct) rendered paragraph with gecko (buggy).

Actual Results:  
Screenshot

Expected Results:  
Rendering should be the same as with webkit.

Comment 1

[Andrej]

Attachment: first-letter bug

Comment 2

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

It's supposed to ignore its 'line-height', but we should probably be aligning its top with the top of the content of the line rather than the top of the half-leading (which looks like what's happening).

Any chance you could also attach the HTML showing the problem?

Comment 3

[Andrej]

According to http://www.w3.org/TR/CSS2/selector.html#first-letter 'line-height' should apply. I can't think of any practical uses though, so I guess it's irrelevant.

Comment 4

[Andrej]

Attachment: first-letter bug testcase

Comment 5

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

http://www.w3.org/TR/css3-selectors/#first-letter 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. 

We take the glyph outline into account for floating ::first-letter, and thus ignore line-height.

Comment 6

[Fletcher Tomalty]

Not sure what you mean about glyph outline, dbaron, but this is a serious problem for me. I get the exact same rendering issue while trying to do the exact same thing. The line-height should be, and isn't taken into account. As Andrej points out, the W3 specification says that the line-height should be applied.

Comment 7

[Kroc Camen]

I’m not certain if this is the same bug, but I’ve just noticed that since upgrading to Firefox 4b4, the drop caps on my site have gone haywire. Check this page in Firefox / WebKit: http://camendesign.com/code/abbr_redux