Jun 13, 2010 0

CSS or jQuery for drop caps?

Naturally, I thought using CSS would be the easiest solution for creating a drop cap. And it was, but cross-browser consistency was horrible. The :first-letter pseudo-element isn’t rendered constantly across browsers. Nick Cowie wrote a great post and created a thorough chart illustrating these cross-browser issues. I eventually lost patience wrestling with the cross-browser effects of the :first-letter pseudo-element and turned to jQuery.


I chose to use jQuery to select and then wrap the first character of text in a span tag.  This also allowed me to use Firebug to to push and pull the span’s styles within the browser. I initially hacked code written by Hamish Campbell’s to find the first letter. This is the code I used to make the drop caps possible:

jQuery(function($) {
    //Grab first character for Drop Caps
    $("div.entry p:eq(0)").each(function() {
        var text = $(this).html();
        var first = $('<span>'+text.charAt(0)+'</span>').addClass('dropcap');

This worked well, but it lead to more questions.

What is a drop cap anyway?

A drop cap is a type of “initial letter.” Wikipedia explains an initial letter this way:

In a written work, an initial is a letter at the beginning of a work, a chapter or a paragraph that is larger than the rest of the text. The word comes from the Latin initialis, which means standing at the beginning. It is often several lines in height and in older books or manuscripts sometimes ornately decorated.

Further Googling led me to this AIGA post that indicated these five basic initial letter types:

  1. dropped
  2. raised
  3. boxed
  4. reversed
  5. overlapped
Making a plugin

While trying to create these various initial letter styles I decided to make a jQuery plugin to make switching between initial letter styles easy. So, check out my Initial Letter plugin for making drop caps, raised caps, reversed caps and overlapped caps.