Closed Bug 561656 Opened 11 years ago Closed 11 years ago

Floated :first-letter is misaligned

Categories

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

defect
Not set
normal

Tracking

()

RESOLVED DUPLICATE of bug 415506

People

(Reporter: andrej.cremoznik, Unassigned)

Details

(Keywords: testcase)

Attachments

(2 files)

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.
Attached image 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?
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.
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
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.
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
Status: UNCONFIRMED → RESOLVED
Closed: 11 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 415506
You need to log in before you can comment on or make changes to this bug.