Floated :first-letter is misaligned




9 years ago
8 years ago


(Reporter: andrej.cremoznik, Unassigned)



Firefox Tracking Flags

(Not tracked)



(2 attachments)



9 years ago
User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US; rv: Gecko/20100405 Firefox/3.6.3 (Swiftfox)
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv: 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:  

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

Comment 1

9 years ago
Created attachment 441393 [details]
first-letter bug
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

9 years ago
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

9 years ago
Created attachment 441394 [details]
first-letter bug testcase
Keywords: testcase
OS: Linux → All
Hardware: x86 → All
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.
Component: Layout: Floats → Layout: Block and Inline
QA Contact: layout.floats → layout.block-and-inline
Summary: Floated :first-letter ignores line-height and is misaligned → Floated :first-letter is misaligned

Comment 6

9 years ago
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

8 years ago
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
You need to log in before you can comment on or make changes to this bug.