Drop Caps: Document Pimping 8th Century Style!

You know how when you’re chillin’ at the crib with the homies reading up on ancient texts, and you notice that fancy drop cap on the first letter of the document? Come on now, I’m not the only one who does this right? Yeah, well we are going to bring it back, like Hammer pants, with CSS.

First up, we’ll need some text to pimp out. For this demonstration, I’ll use some lyrics from one of the greatest songs ever recorded.

“The Humpty Dance is your chance to do the hump
Do the Humpty Hump, come on and do the Humpty Hump
Do the Humpty Hump, just watch me do the Humpty Hump
Do ya know what I’m doin’, doin’ the Humpty Hump
Do the Humpty Hump, do the Humpty Hump”
– The Humpty Dance, Digital Underground

**Cough** Moving on…

Next up, we’ll need to prep our text for it’s new CSS code. Now before we begin there are several ways of doing this task but the one I’m going to show you is a little easier for everyone to remember and understand. With our text from before let’s add some HTML to it.

<b id="drop-cap">T</b>he Humpty Dance is your chance to do the hump
Do the Humpty Hump, come on and do the Humpty Hump
Do the Humpty Hump, just watch me do the Humpty Hump
Do ya know what I’m doin’, doin’ the Humpty Hump
Do the Humpty Hump, do the Humpty Hump”

Now for a little explanation, what I’ve done here is simply make the first letter bold, and gave it the CSS ID name we want to use to create our masterpiece. I used bold because the search engines can see the letter is still part of the text, and it allows us to manipulate it easily. Everybody wins!

As for our actual CSS code we’ll need to create the new style naming it “#drop-cap.”

#drop-cap {

}

Once that’s all formatted nice and pretty in our style sheet, it’s time to work our magic. First up, we’ll set the margins to better position the image to the text that’s going to flow around it.

margin: 5px 0px 0px 0px;

Then using our trusty float method we’ll align our drop cap to the left of our current text.

float: left;

Next we’ll set the width and the height of our bold tag while setting its display to block so we can accommodate the picture that we will create later on.

width: 50px;
height: 50px;
display: block;

Using any graphics program of your choice we are going to create the “T” that we want everyone to see in the text. Because we previously set the height and width of our ID tag to 50×50, we’ll need to make sure our “T” is on a document with a canvas size also at 50×50.

Old English Letter T

Finally, we will make the original “T” disappear, and be replaced with our new Old English “T.” To do this we are telling the style sheet that we want what ever is within the ID drop cap to be pushed way off to the left of the page so it’s out of sight using the text indent, and then setting a background image that will take it’s place.

text-indent: -9999px;
background: url(http://images.ientrymail.com/nowcss/t_drop_cap.gif) no-repeat left top;

You should now end up with something that looks like below:

#drop-cap {
    margin: 5px 0px 0px 0px;
    float: left;
    width: 50px;
    height: 50px;
    display: block;
    text-indent: -9999px;
    background: url(http://images.ientrymail.com/nowcss/t_drop_cap.gif) no-repeat left top;
}

That’s it; you’ve just recreated a drop cap from printing to be used in your online HTML document. The finished result should look something like below:

The Humpty Dance is your chance to do the hump
Do the Humpty Hump, come on and do the Humpty Hump
Do the Humpty Hump, just watch me do the Humpty Hump
Do ya know what I’m doin’, doin’ the Humpty Hump
Do the Humpty Hump, do the Humpty Hump
– The Humpty Dance Digital Underground

Leave a comment