Doing Drop Caps Right

One day you’re writing along, minding your own business, and you hit a slight scene change. You’re not ready to end the chapter, and a simple transition sentence won’t be sufficient to thoroughly break away from the previous scene, so you’ve got to figure out how to make it clear to the reader that gears are being shifted.

In print, there are a few established way to do this, and typesetters will generally use an established special character (such as asterisks or squiggly symbols ( * and ~ respectively)) centered in the page between paragraphs to denote a full shift. A similar method can be used on the web, of course, but we can also easily use horizontal rules, pictures, or pagination to make our point.

I’ve always felt that these methods are too abrupt for most blog articles. Generally, blog articles are rather short affairs, and though a change in thought might call for some sort of indicator that a shift has occurred, there is no graceful way to do so. A horizontal rule or set of centered characters really breaks the reader’s stride when the truth is that only a subtle shift has occurred.

Therefore, when blogging, we need a more subtle indicator. Enter the drop cap.

I only started using these on my own blog recently when writing a series of articles on the Purpose, Power, and Presence of Design as part of a collaborative conversation. Shifting between narrative and my thoughts on design called for some sort of indicator that the tone of the article had changed, but that indicator needed to be slight. I’d seen drop caps used well to this effect in magazines and newspapers, so thought I’d give it a go.

The first plugin I found to achieve this effect was totally overkill, and did drop caps completely wrong. Yes, it technically worked, but it was limited in its customizability. I could either have drop caps used at the beginning of every paragraph, or at the beginning of the piece. The former is overkill, and the latter doesn’t serve my purposes.

When you have a nifty feature like drop caps, it is tempting to use them everywhere. Doing so completely ruins their effectiveness, though, because you no longer indicate anything to the reader other than the beginning of a paragraph, which should be properly conveyed through either a slight break in spacing between the paragraphs (which most WordPress themes do by default) or through indentation of the first line of a paragraph (not really suitable for most online print and generally going out of style in print publications).

Instead, you need a flexible way of using drop caps and employing them right where you want them. To this end, Ulysses Online has a great guide on how to create drop caps in just a few easy steps. You’ll have to be able to edit your CSS file (so this won’t be appropriate for a account if you haven’t bought the CSS upgrade), but it’s a pretty easy process.

Once you have that done, you have to manually enter your drop caps through the HTML view in WordPress. This is a bit of a pain, and though I’ve looked at a couple of guides for adding buttons to the Visual Editor in WordPress, I haven’t gotten it to work yet. Still, adding a span tag in the HTML editor isn’t all that bad, especially for such a handy visual tool!

Got questions? Feel free to leave a comment here and I’ll get back to you ASAP.

And remember, ONLY YOU can prevent poor typography.

WordPress Advanced Editor

Because I’m so content-focused with my blog (focusing largely on writing), I really love the advanced editor in WordPress, especially as of version 2.3. I do the vast majority of my writing live inside WordPress, where it saves every 30 seconds and I have a character map at the click of a button in the toolbar if I need to accent something. Links are easy to insert, I can pull pictures in easily, and it fits my purposes.

But a friend of mine is an actual web designer, and as such, he does a lot more on the visual and code side of things. The advanced editor in WordPress gives him quite a bit of grief, particularly when he switches over to the Code tab and enters some custom HTML, then goes to the Visual tab and sees that WordPress has “cleaned” his code, effectively breaking what he intended his post to look like.

The code cleaning feature in WordPress’s TinyMCE advanced editor is there to help users protect their theme. By ensuring that code is encapsulated and formatted “correctly,” it keeps WordPress pages from breaking. Unfortunately, it also often makes changes to one’s intended code, frustrating the user.

Stephen at Scratch99 has a great article about how to address this problem, and I suspect that Ryan will take the simple method of editing the TinyMCE javascript file and just turn off the “clean code” feature.

Turning the Advance Editor Cleanup Off

If you often enter your own HTML, but still want to use the Advanced Editor, then you might want to consider turning it’s cleanup option off. I stumbled upon how to do this on Thu Tu’s Smacking WordPress Editor.

Note: if you do this, the Advanced Editor will not do any cleanup. If you make errors in your HTML that break the theme, you’re on your own! If this happens you may not be able to edit the post anymore – the only solution may be to close the browser, go to the manage posts page again and delete the offending post.

To summarize how to turn off the advance editor cleanup:

Download the wp-includes/js/tinymce/tiny_mce.js file using an FTP program and use a text editor to change the following (near line 167) from:

this._def(“cleanup”, true);
this._def(“cleanup”, false);

Save the file, then ftp it back up to the server, overwriting the original.

Note: you need to delete your browser cache before this takes effect. For Internet Explorer, click Tools on the menu, then Internet Options, then Delete Files. For Firefox, simply press Ctrl+F5. For other browsers, sorry you’re on your own, but it should be straightforward to do.

As for me, I’m going to keep writing just like I always do. Now, if I could just find a decent way to format poetry correctly in WordPress…