W3C home > Mailing lists > Public > www-style@w3.org > February 2000

:first-letter errors and ambiguities

From: Matthew Brealey <thelawnet@yahoo.com>
Date: Fri, 04 Feb 2000 14:28:59 -0800
Message-ID: <389B52AB.5B30@yahoo.com>
To: www-style@w3.org
Note that the :first-letter pseudo-element tags abut the content (i.e.,
the initial character), 

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.
This paragraph is hopelessly vague. How does a UA know when the user
wants baselines to be aligned? - more often it is the tops of glyphs
that should be aligned.

Such a statement would be useful, but to be so it should be specified in
far more detail - there certainly are very serious issues relating to
drop caps; for example, if I want to dropcap a T, if I know the height
and width of the T glyph in the users font, then I can make my drop cap
look good, but if I don't and I specify the appropriate
height/line-height (it makes no difference which is used) and width
appropriate for the fonts on _my_ computer, then I risk ugly overlap.

For example, at Arial in a P element with 21-pixel line height and
16-pixel font size, these are the 'correct' values for 3-line
top-ascender and bottom-baseline alignment.
font-size: 76px;
margin-top: 7px;
line-height: 56px;
width: 46px

whereas if the user insists on Comic Sans MS, these are the 'correct'
font-size: 76px;
line-height: 43px; /* If this were 1 pixel less, it wouldn't span three
lines! */
width: 54px

A set of settings designed for one font would make the other look
horrendous (If you're wondering why I don't use ems, it's because of Win
IE's inadequate rounding routines (other browsers seem to have cognate
problems, but IE is worst) - it uses different rounding routines for ems
and exes as against <number> (i.e., on line-height); in the first two
cases it drops all decimal places after the first (not terribly helpful
when this kind of precision is needed) and in the latter it at least
uses a valid (although much too imprecise) rounding method, rounding to
the nearest decimal place in time-honoured fashion [there are some
people who would have you round to the even digit, but I digress],
rounding .05 up, b).

On which subject, the code at the :first-letter example is wrong (not so
much the code (except from the width omission (which was pointed out
before)) as the example that purports to be a rendering of it; however,
the example is useful, the code is not):
  P              { font-size: 12pt; line-height: 12pt }
   P:first-letter { font-size: 200%; font-style: italic;
                    font-weight: bold; float: left }
   SPAN           { text-transform: uppercase }

(Incidentally, on the use of points - please can we not have any
examples using points in CSS 3 - it only encourages people.)

This would result in the first letter overlapping with the text below it
because the height of the drop cap box is 12 points, which is less than
or equal to the height of the line box (to span n lines, Height of n-1
lines < Height of float box <= Height of n lines). To obtain the correct
appearance, the height of the P:first-letter must exceed that of one
line box but be less than or equal to that of two, so add line-height:
13pt (or the pixel equivalent - usually 17px) (it is inappropriate to
use scaling factors to set the line height of floated bactors) to the
P:first-letter to make it correct.

There are in fact four or possibly five things that one must always set
on dropcaps:
1. width - depends on the font - ALWAYS UNKNOWN ON THE WWW
2. float
3. line-height  - depends on the font - ALWAYS UNKNOWN ON THE WWW
4. margin-top (sometimes)  - depends on the font - ALWAYS UNKNOWN ON THE
5. font-size  - depends on the font - ALWAYS UNKNOWN ON THE WWW
Received on Friday, 4 February 2000 09:27:26 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:26:53 UTC