Click to return to the DHTML, HTML     
Web Workshop  |  DHTML, HTML & CSS

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...

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:

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:

CONS:

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...

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:

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...

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):

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:

CONS:

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:

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.



Back to topBack to top

Did you find this material useful? Gripes? Compliments? Suggestions for other articles? Write us!

© 1999 Microsoft Corporation. All rights reserved. Terms of use.