In this post I'm going to show you how to develop an hanging drop cap using CSS. A drop cap is usually the first stylized letter of a block of text, for example a paragraph. To achieve the desired effect, we won't use the :first-letter pseudo-element, because at the time of this writing its rendering varies greatly from browser to browser. Instead, we'll use the following markup:
<p class="cap-para"><span class="cap">L</span>orem ipsum dolor...</p>
We'll use contextual positioning to put our first letter just outside its parent paragraph. For doing this, the paragraph itself will need to have some extra padding to host the letter. Here's the CSS code:
p.cap-para {
padding-left: 3em;
position: relative;
}
p.cap-para span.cap {
font: 3em sans-serif;
padding: 0 4px 0 0;
position: absolute;
left: 0.2em;
top: 0;
color: gray;
}
We gave an amount of padding which equals the font size of the letter. You can see the final result here.
Having spent 7 years of my life going to High School and College taking Printing Track courses back in the 60s (and now doing DTP to keep my training of use), I can say that your psudo-hanging cap is a good attempt but not a true hanging cap. A true hanging cap is part of the text with the subsequent lines being indented from it (like would occur with a wrap around an image in HTML). Yours had the large letter in the margin not the text. Trying to do this effect in HTML makes it almost impossible to get the correct presentation and layout.