This page is best viewed with Microsoft® Internet Explorer (v2.0)
rop Caps
|
Robert B. Hess
|
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.
|
Let's try that first paragraph a few more times, using it to take a look
at some of the different methods of obtaining the effect of a drop cap.
Simply changing the font size doesn't really create a drop cap,
and see how 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:
- 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.
Using a bitmap image, still not dropping down:
<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.
- IMG requires additional download time.
- IMG data doesn't get copied to the clipboard.
Using the same bitmap image, but with alignment to actually cause 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:
- True drop cap.
- Graphic allows designer to specify font face, color, size, and other effects.
- CONS:
- IMG requires additional download time.
- HTML 2.0 does not support the ALIGN attribute of the IMG tag.
- IMG data doesn't get copied to the clipboard.
Same as above, but this time 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):
- True drop cap.
- Graphic allows designer to specify font face, color, size, and other effects.
- CONS (exactly the same as above):
- IMG requires additional download time.
- HTML 2.0 does not support the ALIGN attribute of the IMG tag.
- IMG data doesn't get copied to the clipboard.
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...
|
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 on 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.
And let's try the table again, tweaking it a bit for better visual appeal. We will
do this by turning on the background color of the cell (as well as the font color), adding
an extra space before the character, and using bold 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...
|
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.
Do you have some other favorite method for easily adding drop caps to your text?
If so, let me know.
© 1996 Microsoft Corporation