Matthew Vaccaro

Large First Paragraph Letter Drop

NOTE: I know there is a much easier way to do this. I did this because I was forced to make it work in IE6 and IE 7.

I poked around Google for a good 30 minutes before giving up, so I did it myself. I wanted to add a large first letter to a paragraph I was doing in a medieval styled theme, but with a twist. Instead of the standard ‘super’ styling of the first letter where it is higher than the rest of the text, I wanted it to be lower than the rest of the text. This may not be the easiest way of going about it, but it works as far as I can see…

Basically it positions the first letter, which we made a pseudo-element of the ‘P’ tag, over an empty div which is floated left, causing the text to wrap around it and create our desired effect.

CSS Markup:

p#pseudo:before {
	content: "P";
	font: bold 66px Georgia;
	color: #700f07;
	position: absolute;
	display: block;
	margin-top: -10px;
}
p#pseudo #spacer {
	width: 55px;
	height: 60px;
	display: block;
	float: left;
}

HTML Markup:

<p id=”pseudo”><span id=”spacer”></span>lease join us for these special events coming up in the near future. You may register for these events at the links below.</p>