One of the techniques used by proofreaders when checking their documents is to change the font from proportional to non-proportional and read again. I’m no great proofreader or writer, however, this is a known technique. In reading, I’ve noted that I often look quite quickly at the whole word, or several words, instead of focusing on each separate character in each word. Changing from a proportional font to a non-proportional one, and increasing the line-spacing as well as line-height, helps me to see each and every letter in each word.

Therefore, I wanted WordPress to show me the post text in several different fonts on the Write Post page as a proofreading aid. The following How To applies to WordPress 1.5.2. This will not work in the newer 2+ series because the Write Post page, specifically post.php, has been completely reworked in the newer version. It is possible to recode post.php to do this (I’ve tested it in 2.0.5); however, that goes beyond the scope of this post which is limited to a simple CSS formatting change.

This was first implemented as a project on another 1.5.2 blog that I participate in as co-administrator, and it seemed like it had been quite awhile since I had posted anything here, so I thought why not share the template modification.

The WordPress 1.5.2 Write Post page in the administration area offers the ability to see the written post in two separate fonts, yet the default CSS is not set up to show more than one font. In both the textarea box where a post is written, and in the Post Preview area where the whole text is visible after a save, the default font is Georgia. Additionally, the title in Post Preview is an active hyperlink that applies the blog’s template regardless of whether the post is a draft, published, or private post. So, because of the three separate areas where the draft can be viewed, the blogger or writer has the ability to have three separate fonts for quick proofreading without needing to do anything more than write, save, read, click again, and read again — this last proofread uses the font assigned to the blog template.

I decided I wanted the Post Preview area to show in Courier with increased whitespace and letter spacing, both for readability. Courier, an old-fashioned font that came with many typewriters in the pre-computer era, has the proofreading advantage of being non-proportional or monospaced. So I went into the wp-admin directory, downloaded wp-admin.css (note that this is not the themes or templates directory), then opened it in a text editor. I looked (or searched) for “textarea”, it was around line 145. Beneath it I added:

.storycontent {
font-family: "Courier New", Courier, monospace;
font-size: 14px;
letter-spacing: .1em;
line-height: 2.1em;
}

Your eyes may not require as large a font as 14px, if so reduce it to a smaller number such as 10, or 12, or some other choice. Play around with the letter-spacing and line-height as well if you wish.

However, this was not the only change I needed to make. The line-height command was being overwritten by, or conflicted with, another section a few lines above that read as:

p, li, dl, dd, dt {
line-height: 130%;
}

I deleted the “p” so it reads as:

li, dl, dd, dt {
line-height: 130%;
}

So far I have noted no undesired effects from deleting the p, though there are likely other ways of approaching this conflict, possibly including deleting the whole command or changing the sequential ordering (but I haven’t tested these latter ideas, it works well enough for me as explained). I saved this file and uploaded it back to its original location. It’s always a good idea to save the original, unaltered file somewhere.

Now, the Post Preview section reads in Courier New with the individual characters slightly spread out on each line, as well as each line appearing to be double spaced. Since the template on this blog uses the proportional Verdana or sans-serif font family as it’s main display font, and since the textarea box where a post is written is assigned Georgia or serif font family, I can quickly proofread a post in three distinctly different fonts including a non-proportional one before pressing the final “publish” post button.

As a warning, Courier New, a True Type font, also comes in italic and bold font versions. If your workstation only has Courier, your italics will possibly be simulated, and quite unclear, or they won’t show that formatting at all. If that’s the case and you use italics and or bold in your posts, you may wish to choose another non-proportional or monospaced font set that you know you have on your system.