163376 - ::first-letter initial caps poorly adjusted to flow

Status: RESOLVED DUPLICATE of bug 21616

(Core :: Layout, defect, P4)

Description

[Niklas Dougherty]

When making initial caps in CSS, one shouldn't have to adjust margins to make
the initial cap fit nicely in the flow.

With the definition

p.cap:first-letter {
  float: left;
  position: relative;
  font-weight: 700;
  font-size: 400%
}

one expects an intial cap that is rendered with respect to the font metrics
defined for the selected font. In reality, it seems that metrics for the
Helvetica or Times fonts are used whatever font is selected (as these look the
least distorted).

Adding

  margin: -0.1em 0.1em -0.2em 0em;

to the definition somewhat relieves the problem for most fonts, but it shouldn't
be necessary, and it also complicates matters (IE renders things differently, of
course).

The test case at http://homepage.mac.com/nikd/caps/ has ten different style
sheets with ten different fonts. Use the "Use Style" list in the View menu to
see how various fonts are rendered with or without adjusted margins.

It may not be possible to implement the perfect initial cap algorithm within the
CSS scope, but the initial cap should have ample room to the text on the right
(there is overlap using Georgia and American Typewriter, and in general it is
too close). The initial cap should also not be pushed down too much.

Comment 1

[Niklas Dougherty]

Attachment: Example 1 (from URL)

Red = unadjusted, blue = adjusted

Comment 2

[Niklas Dougherty]

Attachment: Example 2 (from URL)

Another example. Note the overlap.

Comment 3

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

CSS3 (text module?) might have some things that will allow this to be better.

Comment 4

[Martha Palotay]

Attachment: test case with different background colors on each element

If you set different background colors, it looks like gratuitous top and bottom
padding is added to the initial letter. Explicitly setting the padding to zero
has no effect. (Explicitly setting the line-height also has no effect, but this
may be correct behavior for a floated letter--the spec isn't quite clear on
this point.)

Comment 5

[Boris Zbarsky [:bzbarsky]]

.

Comment 6

[louis bennett]

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