268601 - Display of large drop-cap has ridiculously large top and bottom margins

Status: RESOLVED DUPLICATE of bug 21616

(Core :: Layout: Text and Fonts, defect)

Description

[John W. Kennedy]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0

Using the CSS "first-letter" feature to produce a large drop cap is virtually
useless, as the displayed result is too ugly, with huge top and bottom margins.
Compare IE6.

Reproducible: Always
Steps to Reproduce:
1.
2.
3.

Comment 1

[John W. Kennedy]

Attachment: Simple test case

This is a reduced copy of a real file illustrating the problem.

Comment 2

[Bill Mason]

You asked for 72pt size on the first, that's what you're getting.  (Using points
for measurement of a screen size is not a hot idea in any case.)

->Layout

Comment 3

[John W. Kennedy]

Attachment: This is how it looks on Firefox 1.0. Ugly.

Comment 4

[John W. Kennedy]

Attachment: This is how it looks on IE6. Correct.

Comment 5

[John W. Kennedy]

Attachment: Done on Firefox by using a GIF instead of doing it the right way.

Comment 6

[John W. Kennedy]

The use of points is merely an artifact of two hours of screwing around with the
file, trying to get it to work right. Points, percentage, whatever. Trying to do
a drop cap the way the CSS standards (1 and 2.1) say to do it gives unacceptable
results.

Comment 7

[Tuukka Tolvanen (sp3000)]

(->floats & confirm for a look, I see this in 1.8a4 linux)

dunno what the specs say, but mozilla's apparent making room for the line box
for the floated character, instead of the glyph only, seems sensible... If you
want less space above and below the drop cap, you can specify
    p.prose:first-letter { margin: -.2em 0; }
Note that that conveniently causes IE to screw up, looks like specifying any
vertical margins on it is ignored but also disables the apparent magic hack that
made it look right to you in the first place ...or something

related stuff in bug 21616

Comment 8

[John W. Kennedy]

I agree that IE's support is unstable.

For the rest, all I know is that the CSS 1 spec at w3c.org says, "Do this to get
a drop cap," the CSS 2.1 spec says, "Do this to get a drop cap," the O'Reilly
chick book says, "Do this to get a drop cap," and the first three websites
returned by a Google search on '"drop caps" css' say, "Do this to get a drop
cap," but when I do it with Firefox, the result is too unsightly for production use.

Comment 9

[Boris Zbarsky [:bzbarsky]]

This is in fact a duplicate of bug 21616.  Does setting the line-height (per bug
21616 comment 7) also break IE?

*** This bug has been marked as a duplicate of 21616 ***

Comment 10

[John W. Kennedy]

I am not convinced that this actually is a dup of 21616 (which seems to involve
vertical, rather than horizontal problems), but both will clearly involve the
same reengineering.