rop Caps

Robert Hess
Developer Relations Group
Microsoft Corporation

January 10, 1997

Drop Caps: The effect obtained when the first character of a paragraph is rendered in a larger font than the rest, and its baseline is lowered by at least one full line, which results in the second line of the text also being indented.

Soon cascading style sheets will enable us to create true drop caps with the "first-letter" psuedo-element, but until then we have to exercise a little creativity to enhance our pages with this common typographic device.

Let's use that first paragraph take a look at some methods of obtaining the effect of a drop cap.

Method 1: Change Font Size

Changing the font size doesn't really create a drop cap, and it messes up the line spacing:

   <Font color=#000080 size=+3>D</Font>rop Caps...

PROS:
All formatting is done on the first pass, and no graphics are needed. The drop cap is a text element, so it gets copied to the clipboard.

CONS:
Not a true drop cap. HTML 2.0 does not support the <FONT> tag. Not enough control over sizing to make this look good. Second line has improper spacing.

Method 2: Use a Bitmap

We can implement a drop cap as a bitmap, and to make this as simple as possible, we could not be concerned about manipulating the image's placement:

   <IMG SRC="cap_d.gif">rop Caps...

rop Caps: The effect obtained when the first character of a paragraph is rendered in a larger font than the rest, and its baseline is lowered by at least one full line, which results in the second line of the text also being indented.

PROS:
Supported by HTML 2.0. Graphic allows designer to specify font face, color, size, and other effects.

CONS:
Not a true drop cap. Graphic requires additional download time. Graphic data doesn't get copied to the clipboard.

Method 3: Using an Aligned Bitmap

Using a bitmap image with alignment that causes the glyph to drop below the baseline:

   <IMG SRC="cap_d.gif" ALIGN=LEFT>rop Caps...

PROS:
True drop cap. Graphic allows designer to specify font face, color, size, and other effects.

CONS:
Graphic requires additional download time. HTML 2.0 does not support the ALIGN attribute of the <IMG> tag. Graphic data doesn't get copied to the clipboard.

Method 4: Tweaking the Bitmap Further

Same as above, but let's add "hspace=1" to put a little extra padding around the bitmap:

   <IMG SRC="cap_d.gif" hspace=1 ALIGN=LEFT>rop Caps...

PROS (exactly the same as above):
True drop cap. Graphic allows designer to specify font face, color, size, and other effects.

CONS (exactly the same as above):
Graphic requires additional download time. HTML 2.0 does not support the ALIGN attribute of the <IMG> tag. Graphic data doesn't get copied to the clipboard.

Method 5: Using Tables

Now let's see what we can do with tables:

   <TABLE ALIGN=LEFT CELLSPACING=0 CELLPADDING=0>
<Font color=#000080 size=+3>D</Font>
   </TABLE>rop Caps...

D

rop Caps: The effect obtained when the first character of a paragraph is rendered in a larger font than the rest, and its baseline is lowered by at least one full line, which results in the second line of the text also being indented.

PROS:
True drop cap (on browsers that support ALIGN=LEFT in tables). All formatting is done on the first pass, and no graphics are needed. The drop cap is a text element, so it gets copied to the clipboard.

CONS:
HTML 2.0 does not support the <TABLE> tag. Not enough control over sizing to make this look good.

Method 6: Tweaking The Table

Let's try the table again, tweaking it for better visual appeal. We can simply turn on the background color of the cell (as well as the font color), add an extra space before the character, and use boldface and italics:

    <TABLE BGCOLOR=#000080 ALIGN=LEFT CELLSPACING=0 CELLPADDING=0>
<TD><Font color=#FFFFFF size=+3><B><I>&nbsp;
D
</I></B></Font></TD></TABLE>
    rop Caps...

D

rop Caps: The effect obtained when the first character of a paragraph is rendered in a larger font than the rest, and its baseline is lowered by at least one full line, which results in the second line of the text also being indented.

PROS:
True drop cap. All formatting is done on the first pass, and no graphics are needed. The drop cap is a text element, so it gets copied to the clipboard.

CONS:
HTML 2.0 does not support the <TABLE> tag. Not enough control over sizing to make this look good.

Of course, there are countless variations on these methods. If none of the above quite suit your needs, perhaps they have gotten some creative juices working so you can arrive at some of your own solutions.