Making HTML Drop Caps Work

Recently, I have noticed a surge in interest for my book Church Website Design. I don’t know about everyone else, but when I see book sales rise, it gives me a renewed interest in the subject matter. Now, I’m not going to talk about church website design, exactly, but I am going to talk about that big R you see to the left and tell you more than you probably wanted to know.

Now, if you know anything about HTML, there isn't a drop caps tag. To get that, you have to use Cascading Styles Sheets (CSS). In the case of this R, the style is defined inline. I will note that there are some good reasons why you should avoid doing that, but it is the easiest way to go for the typical blogger, since it doesn't require messing with the template or files on the server.

This R is accomplished using the span tag and has the following form:

<span style="font-size: 100px; float: left; color: #477fba; line-height: 70px; padding-top: 2px; font-family: times, serif, georgia">R</span>

Everything within the quotes goes into defining how the R will appear. Let’s look at each:

font-family

This is somewhat optional. If you want to use the same font as the rest of the text, you can leave it off. Three fonts are shown. These should be seen as three preferences. This tells the browser that the web designer thinks times is the best choice, serif is the second best and georgia is the third best. Most users will see the R in times. But some machines may not have the specified font, in which case the browser will select a default or it could be that user define preferences supersede the choice or the browser is designed for a special purpose, such as reading to the blind. In that case, the font may be ignored. I'll not at this point that this is a good reason to do this with the span tag, rather than graphics or something, since browsers that much convert text to speech would otherwise have trouble deciphering the first word.

color

This is just any web color. Some text based colors exist, such as blue, red, etc. but if you want a specific tint, you will need to specify it like I have done with a hexadecimal number. Colors have the form #[red][green][blue] where each color is represented by a two digit hexadecimal number from 00 to FF. This is optional. The text will default to the same color as the other text.

float

This separates the text inside the span tags and shoves it over to the left or right. In English, we read from left to right, so we want this to be float: left. If you leave this attribute off, the R will sit inline with the rest of the text and it won't drop down because the text won't be able to flow around it.

padding-top

As the name implies, this sets the padding above the R. In this case, it is 2 pixels, but you can play with that to make it look how you want. The padding moves the R down to be closer to the top of the rest of the test. It doesn't have to be much, since we have already used float to allow the other text to flow around it.

line-height

This defines the size of the box the R sits in. It controls nothing about the size of the R, but it does control the area around which the rest of the text flows. This one was designed for four lines of text. If you want three or two or five, you can adjust this size to make it work.

font-size

This sets how large the R will be within the box we have specified. If we set it too large, part of the R will be cropped. If we set it too small, the R will have a lot of empty space around it. You will notice that we have set the font-size to 100 pixels while the line-height is only 70 pixels. This accounts for the padding around the character. We actually when to crop the padding, showing only the R in our invisible box.

If you want to try this on your own blog or website, copy the HTML above into the HTML of your post and start playing with it until it looks the way you want. If you have trouble or questions, please feel free to ask in the comments to this post. I will answer all I can.

Now, if you want to do it a better way. You can edit the template for your blog. In the Blogger template for this page I placed the following code:

.drop-caps {

float: left;

color: $postTitleColor;

font-size: 100px;

line-height: 70px;

padding-top: 2px;

font-family: Times, serif, Georgia;

}

To get the drop caps N, all I had to do was to insert the HTML

<span class="drop-caps">N</span>

This way, I get the same result, but I have the option of modifying the template and updating all of the blog posts at once. Notice that the color is set with a variable. If I decide to change the color of titles, the color of the drop-caps will change also.