Block quotes revisited

The post that gets the most hits on this site, by far, is the one I wrote last January complaining about the practice of styling block quotes so that they are automatically italicized. In a nutshell, I argued that italics are not just esthetic. They can change the actual meaning of a phrase, and when you are quoting someone else’s words (which after all is the purpose of a block quote) you are morally obligated to quote them as they were originally written or else add “italics mine” at the end.

What I didn’t do in that post was talk about possible fixes for this problem. Here’s how it works. Your wordpress theme is composed of several files that combine and interact with a database in order to produce the HTML that underlies the actual site. One of those files is the style sheet, which uses a language called CSS to tell your browser how the HTML should look. For example, you might have a line in your stylesheet that specifies that items in a bulleted list should be indented by 15 pixels. Or that all links should be colored blue and underlined. Or, more to the point, that all block quotes should be italicized. Now in theory it is a very simple matter to change the look of those block quotes. You just go into the style sheet and find where it says blockquotes: {font-style:italic;} and change it to blockquotes: {font-style:normal;}. Done!

In theory it is simple, but in practice it is not. Because the folks at do not give you free access to your stylesheet. You can pay $30 a year and go in and make the edit I described, and you’re all set. If you’re not willing to pay the $30, there are two other things you can do.

Method 1: Use CSS inline styles.

Cumbersome, but it works. Here’s what you do. Type in your paragraph, highlight and hit the block quote button. Then switch over to the HTML view in the editor screen. Your paragraph will look like this:

<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam varius odio ut sem malesuada in facilisis diam dictum. Sed a magna non quam mattis ultrices. Morbi sed risus non metus placerat pretium. Aliquam erat nisl, posuere eget gravida vitae, ultrices vitae dui. Aenean dignissim facilisis pharetra. In eget rhoncus nisi. Aenean et purus neque. Aliquam gravida mollis est ac dictum.</blockquote>

Now, for every instance where it says <blockquote> you will need to change it to <blockquote style="font-style:normal">. Lo and behold your blockquote is no longer italicized! But note: if you want to have something italicized within your quote you’ll have to manually put that in as well. Normally italicized text, on the HTML side, looks like: <em>this is in italics</em>. For every instance of italics within your block quote you will need to edit that <em> tag so that it reads <em style="font-style:italics">this is in italics</em>.

Inline CSS is not considered good coding practice; it is a method of last resort. And as you can see, this would be a bit of a hassle if you did a lot of block quotes. But it definitely works.

Method 2: Use the indent button instead.

Another thing you can do is bypass the block quote button altogether. Presumably you already know that the last button on the right (“Show/Hide Kitchen Sink”) is the toggle for a second row of formatting buttons. And presumably you already know that one of those buttons on the second row will indent your paragraph. Just in case you didn’t already know, here is a screen shot:

This is a very simple, easy solution and I like it because it not only avoids italics, but also any other styling your theme author thought fit to add, such as a fat left-hand border, a different font, a giant quotation mark, an enclosing box, the works. Indenting the paragraph gives you just that: an indented paragraph. A block quote as God intended it should be. And for those who are scared of HTML, you never have to go there; you can do it all within the visual editor. No coding involved.

However. (You knew there would be a catch, right?) From a web standards and accessibility angle, this solution way worse than inline CSS. Because when you bypass the <blockquote> tag, your browser does not know that it is supposed to be a block quote. So that means anyone using a screen reader won’t know either. Nor will Google for that matter.

Does that mean you shouldn’t use this option? After all, you never know who might visit your site with a screen reader. My answer is no: you can use this option so long as you are aware of this issue. There are other ways to let someone know “this is a block quote” than an HTML tag. For instance you could precede the block quote with an explanatory phrase like “here is a quote” — and you could end it with a citation. If someone were reading aloud to you, you would still know it was a quote.

Method 3: Whine and beg wordpress to edit the themes.

Last but not least, you can always complain to the powers that be.


Pet peeve: italicized block quotes

I had already started drafting this post when the lovely folks at posed the question “if you could change one thing about your theme what would it be?” My answer applies not only to Twenty Ten but many other themes as well.

What I would change is the heavily-styled block quotes. Many themes sport giant quotation marks and fat vertical lefthand borders with their block quotes. Ugly and pointless. But even worse is the themes, like Twenty Ten, which add italics. This is a serious problem. Ok, maybe not serious like war and pestilence, but it’s more than just a matter of personal preference.

Italics convey meaning. If you’ve ever read a novel that uses italics to convey a character’s inner thoughts, you know what I’m talking about. The italics add weight — portent — and writers hopefully wouldn’t do that unless they had a good reason. Italics are not decorative. When a wordpress theme (for example) forces you to have your blockquotes in italics it is giving a meaning to your words that you may not intend.

Italicizing something that’s already indented in order to “set it off” is redundant. Twenty Ten, WordPress’s default theme, is very well designed for the most part. In fact, except for the italicized block quotes, I think it’s fantastic. Over at the demo blog they defend their decision because “Italics are good to help set it off from the body text (and italic Georgia is lovely at this size).” Ok, I agree wholeheartedly that italic Georgia is lovely at this size, but indentation alone is plenty sufficient to set the quote off from the body text.

Forcing you to italicize quoted material probably means you’re quoting it incorrectly. Let’s not forget that the purpose of block quotes is to set off large blocks of quoted material. Quoted material. When you are quoting someone else’s words you are morally obligated to quote them correctly. If the original has italics, so should yours. If the original does not, neither should yours. If you add italics into quoted material you are supposed to let your reader know with an “italics mine” at the end. Because, you know, italics convey meaning.

There are a couple of ways you can get around the italics, short of paying for the CSS upgrade or (cross your fingers) persuading the theme designers to change the code. Both hacks are problematic from a web standards point of view, though. If you want a tutorial or more explanation leave me a comment and I’ll write a follow up post, but I think I’m done ranting for now. Hopefully is listening…