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.
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...
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. |
PROS:
CONS:
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:
CONS:
Using a bitmap image with alignment that causes the glyph to drop below the baseline:
<IMG SRC="cap_d.gif" ALIGN=LEFT>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:
CONS:
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...
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 (exactly the same as above):
CONS (exactly the same as above):
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...
|
PROS:
CONS:
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> D </I></B></Font></TD></TABLE> rop Caps...
|
PROS:
CONS:
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.