Drop-Caps

Making drop-caps is possible in CSS using a first-letter selector.
This example uses a style rule called p.dropPara:first-letter, meaning the first letter in any paragraph with the class "dropPara" is styled. Float: left, is a key property, allowing the lines underneath to wrap around the letter. Then there's a bit of fiddling with the type size–which will change for each font. Margin-bottom needs a negative value, as does margin-top–these are very sensitive. Then line-height needs to be extended a little–only for Safari, it won't make a difference for Firefox. And finally, margin-right allows you to distance the letter from the paragraph as you please.

Here's a sample of the CSS from this file:

p {
font-size: 100%;
line-height: 140%;
font-family: Georgia, "Times New Roman", Times, serif;
}
p.dropPara:first-letter {
font-size: 290%;
float: left;
margin-bottom: -1ex;
line-height: 110%;
margin-top: -0.1ex;
margin-right: 0.05em;
}

The trick is fiddling around. I use percentages for my type sizes, so that it scales nicely according to the brower's text-size settings.

It's not a perfect way to do drop-caps, it's not as though drop-caps are the most celebrated of typographic devices anyway. A good one to have on the toolbelt.

Cheers, I'm off to bed!

Miek Dunbar