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 wordpress.com 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.

Advertisements
Next Post
Leave a comment

5 Comments

  1. Thank you SO MUCH. I included a poem in a recent post that was block-quoted, and the awful italics were driving me nuts.

    Reply
  2. I agree with you wholeheartedly. And I don’t really want to pay $30/year just to fix one bad design decision. There’s another solution! I recently found a theme that’s available on WordPress.com (and free) that does not italicize blockquotes. It’s called Paperpunch http://theme.wordpress.com/themes/paperpunch/

    Are there any others like this? I’d love to have more options.

    Reply
  3. Thanks, this tutorial is just what I was looking for. But when I try this code this is in italics within a font-style:normal blockquote, it doesn’t override to become italics; it stays unitalicized. Any thoughts?

    Reply
  4. yours_truly

     /  March 8, 2013

    Thank you! This was super helpful. :)

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: