NOTE: This post was recovered from the google cache after my previous web host disappeared. As you can see there are no drop caps on this site, but the code should still work if your wordpress theme uses entry as the class for the body of your posts. If your theme is using some other class, K2 uses itemtext for example, you’ll need to change the appropriate line in the .js file for it to be able to find your posts properly.
NOTE 2: I’ve now re-implemented unobstrusive drop-caps on this site but, as this post begins with a<strong> tag, they do not work for this page. If you want to see them in action just browse to any other post.
As you can see, each post on this page has the first letter of its first paragraph formatted as a drop cap. This seemed like it should be a very simple thing to do as CSS supports a first-letter pseudo class, so all that is required is an appropriate style definition. Sadly this isn’t the case in practice, as the main browsers (IE and Firefox at least) seem to have major rendering differences in this area.
A quick look through the Wordpress plug-in repository turned up a couple of plug ins/hacks that offered the possibility of automated drop caps, but they either depended on images or added additional markup to the text, neither of which seemed acceptable to me.
So, I came up with my own, cross-browser, method of automatically adding a drop cap to the first paragraph of each post, without using images, adding unnecessary markup to the page source, or requiring any special input when writing posts.
Having used a variation of Dunstan’s image captions script on this page, it seemed that a similar approach should yield a satisfactory solution to adding drop caps as well.
So I whipped up this little javascript, and an accompanying CSS file.
Dropcaps.css, contains the style definition for the dropcap class which determines what the drop cap looks like. Which might seem pretty useless at the moment, as we don’t have any elements with that class defined.
The clever bit is all in dropcaps.js. Once the page is loaded, this walks the DOM looking for <div>’s with a class of “storycontent”. For each one it finds, it gets the first child <P> element, and rewrites the the source, wrapping the first letter of that paragraph in a >span> with a class of “dropcap”. Thus applying the drop cap style.
So, in any browser supporting the javascript, DOM, and CSS we get pretty drop caps, and in browser missing support for one or more of those, we seamlessly fall back to normal text display. The source of the page it self never contains the semantically unnecessary <span> around the first letter, making this about as unobtrusive as possible.
The only bug I’ve found is that if the first paragraph of a post starts with something other than plain text (ie: with an <a>, <img> or indeed any other tag), the script will fail to parse the page correctly. This isn’t really an issue for me, but it should be relatively simple to fix if anyone wants that.
All you need to do to implement these drop caps on your own page is download the two files and put them in a directory called js in the root of your Wordpress tree, then the add the following code to the <head> section of your index.php:
<script type="text/javascript" src="/js/dropcaps.js"></script>
<link rel=”stylesheet” type=”text/css” media=”screen” href=”/js/dropcaps.css” />
And that’s it - All your posts (past and future) will have the style defined in dropcap.css applied to the first letter.
–>
webdev
