The drop cap (or versal) is an agreeable typographical element that brings attention to an article or paragraph. It is that large capital letter you see, aligned to the left, at the beginning of a paragraph. I use it on the opening paragraphs of articles on this site, as on rainy days it makes me feel like an 8th Century monk.
The Problem
Ideally, with CSS, we would use the first-letter pseudo-element to create the drop cap. The problem is, he flagellated, there is vacillating browser support for the first-letter pseudo-element. When it is supported, different browsers render the initial floated letter in a colourful variety of ways that affect its size and location.
The Solution
Grab a Trappist beer and simply wrap the initial letter in a styled <span> tag. Firstly, we need to create the CSS span. This is what I use:
span.drop {
display: inline;
float: left;
margin: 0;
padding: 0.25em 0.08em 0pt 0pt;
#padding: 0.25em 0.08em 0.2em 0.00em;/* override for Microsoft Internet Explorer browsers*/
_padding: 0.25em 0.08em 0.4em 0.00em; /* override for IE browsers 6.0 and older */
font-size: 3.2em;
line-height: 0.4em;
text-transform: capitalize;
color: #000;
}
—Note the 2 hacks to compensate for IE6 and IE7, as they render the em padding differently and will obscure half of the drop cap unless you include the extra em values.
Now create the html with the first letter wrapped up in the span tags:
<p>
<span class="drop">Y</span>ou must have been warned against letting the golden hours slip by; but some of them are golden only because we let them slip by.
</p>
The Result:
You must have been warned against letting the golden hours slip by; but some of them are golden only because we let them slip by.
You will need to juggle around with the font-sizes, line-heights, and padding to achieve the best result for your particular site. Now bless you and go in pieces.
The next step on the journey of the dropped cap is to actually illuminate the swollen versal. This, however, will require a monkish devotion and I will report back from the virtual cloister once the illumination has been conspired.
