Drop Caps

In modern browsers, with javascript and css enabled, this ‘intro’ paragraph begins with a stylised ‘I’, shifted to the left of the main copy. A ‘drop cap’, in other words. Here’s my method.

A drop cap is a nice typographical effect for marking the start of text. CSS poses a few problems, however, and I wanted the drop caps on this site to have the following properties:

Hanging in the left margin, as practised by sites such as CSS Wizardry and championed by designers such as Mark Boulton. This technique was already used here for lists and blockquotes.
Close to the following text. Whilst I was inspired by the drop caps on CSS Wizardry, I didn’t like their distance from the copy.
Vertically aligned and not too tall.

The key decision to make is whether or not to use the first-letter pseudo-element selector. I ran into browser-compatibility issues with this approach so, unfortunately, had to resort to extra markup. However, when I find myself in this situation, my general rule is to add the markup to the rendered document, via javascript:

$('p.intro').each(function() {
    var t = $(this).text();
    var add = '<div class="intro-drop-cap">';
    add += '<span>' + t.substr(0, 1) + '</span>';
    add += '</div>'
    $(this).before(add);
    $(this).text(t.substr(1));
});

This removes the initial letter from each ‘intro’ paragraph, and inserts it in a new div. The extra span is present so I can size the containing div and align the containing text properly.

The CSS is then relatively simple:

div.intro-drop-cap {
    width: 1.2em; text-align: right; float: left;
    font-size: 5em; margin-left: -1.3em;
    line-height: 1; font-family: arial;
}

div.intro-drop-cap span {
    color: #fff; background-color: #EF2929;
    padding: 0 0.1em; border-radius: 0.05em;
}

Comments

Thu 12 Mar 2009 03:02

Harry Roberts said:

Hi, thanks for the mention, and I know what you mean about the distance from the copy, it’s a nightmare. It’s one of the downfalls of using :first-letter, you lose a lot of the flexibility. I think your method handles much nicer, kudos.

Thu 12 Mar 2009 12:10

Five Minute Argument said:

Thanks for your feedback, Harry. I had to give you a reference once I stumbled across your site and realised how many design concepts we seem to share! The technique’s still not perfect, but I’ll carry on honing until it’s as close as I can get it.

Tue 19 Jan 2010 04:18

Harry Roberts said:

Hey Bobby,

Just a quick note to say that I've recently realigned CSS Wizardry and now the drop cap sits much closer to the copy :)

Harry

Tue 19 Jan 2010 06:26

Five Minute Argument said:

@Harry: Yup, they look good! :-) I've been following you via twitter and am enjoying your good work — keep it up.