Styling quotations

👉 Whoa! Please note that this post is 18 years old. The views expressed within might have become outdated.

I've always liked the way most standards-compliant browsers display inline quotations (marked up with <q>). In case you don't have such a browser at your disposal; it's an easy concept to grasp, these browsers put quotation-marks around the text like this:

A picture of how inline quotations look in standards-compliant browsers

Warning: the technique described in this article should not be used. Make sure to read my edit.

Internet Explorer however, does not use this default styling. But since you probably want quotation marks around your quotations, you’ve got two options:

  1. Insert the quotes yourself like this:
  <q>
  <strong>"</strong> To be or not to be. <strong>"</strong>
  </q>
  1. Don’t bother about semantics and use different markup.

Since I’m advocating accessible coding in my articles, option 2 is out of the question. Semantic markup really helps assistive devices, so it shouldn’t be abandoned.

Option 1 however, looks allright in Internet Explorer, but in most other browsers you end up with a double set of quotation marks, like this:

A picture showing the awkward double set of quotation marks in standards-compliant browsers That just looks plain silly. Luckily, this is easy to overcome using the following CSS:

q:before,
q:after {
	content: "";
	}

And that’s that. IE won’t understand the :before and :after pseudo-selectors, more advanced browsers will cut the default quotation marks off. It’s a small problem, with an easy solution, but tiny details like this can really be a finishing touch.

Edit: turns out I was wrong

As pointed out to me in the comments, the W3C certainly has a different opinion on the matter. Explorer is wrong and this time it isn’t the author’s job to rectify their mistake. Related reading, as provided by Sébastien Guillon: