[css-inline] Alignment of Drop Caps

Apologies for the long email. I've been spending some time with the
Editor's Draft of the CSS Line Layout Module [1] , and have comments on the
"Drop Initials" section [2]. First, some background.


I. WHY CSS DROP CAPS?

Large, decorative letters have been used to mark the start of new sections
of text for more than a thousand years. Drop caps are very common in books,
magazines, and web pages. But the current approach to creating them in CSS
is sub-optimal (to put it mildly). Several large publishers, including my
employer, are no longer using them in ebooks because we can't make them
look good.

Today we "fake" drop caps by using floats. Here's a three-line drop cap, in
a paragraph with a font size of 1.2em and a line-height of 1.5em.

span.dropcap {
float: left;
font-size: 5.3em;
line-height: .85em;
margin-bottom: -.1em;
}

How do we know how big to make the letter? Trial and error (or some
algebra, if you know the ratio of the cap-height to the font size). How do
we vertically align the letter? Changing the line-height alters the
half-leading above the letter, pushing it down until we see the baseline of
the letter align with the 3rd baseline of the text. What happens if we
change the font? We start over, as everything depends on the cap-heights of
the fonts involved.

People do this badly on the web all the time. I even started a tumblr of
poorly-aligned drop cap examples [3], all from web tutorials on how to do
drop caps.

In page layout programs like InDesign, you just have to specify the number
of lines a drop cap should occupy, and the program does the calculations
and produces the correct alignment. CSS should be able to do the same.
Quite by accident, I stumbled across the ED of CSS Inline a few weeks ago.
Wonderful! Here's a spec that describes just what we need. But as I've been
working through this, I have some concerns.


II. ALIGNMENT

I'll try to briefly describe the model used in CSS Inline for drop caps, at
least for the simplest cases.

The drop cap itself has two alignment points, one at the top of "the ink"
(the visible portion of the letter), and one at the baseline of the letter
(or the bottom of "the ink" depending on settings). That bottom alignment
point on the drop cap matches up with the Nth baseline of the text, for an
N-line drop cap. The top alignment point matches up with the top of the
first line of text.

I don't think this model is correct, and it doesn't match current
implementations such as InDesign. The top alignment point on the drop cap
character is not the highest point on the letter, but rather the cap height
of the font. An accented capital letter should not be smaller than an
unaccented capital letter. The examples in the ED showing enormous periods
and hyphens as drop initials do not match what I see from page layout
programs.


III. PROPERTIES AND VALUES

Based on the above, I would suggest some changes to the values and
defaults. In general, I'm OK with with the *-align properties which refer
to the surrounding text. But the *-adjust properties, which refer to the
drop cap itself, might benefit from some changes.


drop-initial-after-adjust [central | middle | after-edge | text-after-edge
| ideographic | alphabetic | mathematical | <percentage> | <length>]

This property tells you which part of the drop cap itself is aligned to the
text baseline. It defaults to the text-after-edge of the drop cap, which I
think is wrong. At least for western languages, the default should be the
alphabetic baseline of the drop cap.

For some capital letters in some fonts, notably "J" and "Q", the character
itself extends below the baseline, so that it may crash into subsequent
lines of text. For this case, InDesign has a setting called "scale for
descenders", which essentially changes that bottom alignment point from the
alphabetic baseline to the bottom of the descender. I'm not clear on how
that relates to the text-after-edge defined here. It seems that
text-after-edge refers to the bottom of the em-square, but in many fonts
there's significant space between the descender depth and the bottom of the
em-square.


drop-initial-before-adjust [before-edge | text-before-edge | central |
middle | hanging | mathematical | <percentage> | <length> ]

This tells you which part of the top of the drop cap should be aligned to
the spot defined in [E]. As discussed above, I think the default should be
cap-height, which is currently not a possible value.


IV. BIKESHEDDING

As a member of the WG, I'm contractually obligated to talk about the
property names. I found it confusing that *-align refers to alignment
points in the surrounding text, and *-adjust refers to alignment points in
the drop initial itself. I'm also wondering if "enough" functionality could
be done with fewer properties. In "Design Notes for XSL 2.0" [4], the
section on initial caps uses four properties:

initial-cap-lines
initial-cap-lines-before
initial-cap-kern-lines
initial-cap-indent

The ultimate question, of course, is what to call the subject itself. Are
they drop caps? Initial caps? Drop initials? Versals? Lettrines? The
bikeshedding will continue until morale improves.

Thanks,

Dave

[1] http://dev.w3.org/csswg/css-inline/, 2 March 2012 version
[2] http://dev.w3.org/csswg/css-inline/#Initial
[3] http://dauwhe.tumblr.com/
[4] http://www.w3.org/TR/2010/WD-xslfo20-20101216/#req2_1_7