Quotations and citations: quoting text

When quoting text in HTML, there are several ways of marking up the quoted text. Which way you choose depends on what you’re quoting, how you’re quoting it, and how important it is for you that all browsers render the quotations the same way.

The available quotation elements aren’t really used a lot outside of web standards blogs. A probable reason, besides people not knowing about them, is less than perfect browser support for some features of the q element. That doesn’t mean it can’t be used though, so let’s take a look at how and when to use what quotation element.

Inline quotes: the q element

When the text you’re quoting is short enough to be displayed inline (as part of a sentence), the q element should be used. All you need to do is wrap the quoted text in a q element and web browsers automatically render quotation marks before and after the content of the q element.

Or rather, that’s what they’re supposed to do. Unfortunately, not all browsers do (hello again, IE/Win), and of the browsers that do, most don’t get it right.

All modern browsers recognise the q element and insert some form of quotation marks. Great. But there is a problem. Browsers should insert the quotation mark characters appropriate for the language specified by the lang and/or xml:lang attributes for the whole document or part of it. That’s right, different languages use different kinds of quotation marks.

Furthermore, when q elements are nested, browsers should automatically insert the correct, language specific, quotation marks for nested quotations.

As far as I know, no current browser gets all that right. Amazingly, of all the browsers that I have tested in, the one that comes closest is Internet Explorer. The Mac version, that is. It inserts the correct typographical quotation marks, even for nested quotations. It also renders different quotation marks for some languages, like French. All other browsers just insert straight double quotation marks ("), even around nested quotations.

So what is a poor markup purist to do? Give up on the q element? Manually insert quotation marks? Not yet. There is a way to improve the situation a bit.

By applying a bit of CSS you can make several browsers insert the correct quotation marks:

q {
	quotes:"\201C" "\201D" "\2018" "\2019";
}
q:before {
	content:open-quote;
}
q:after {
	content:close-quote;
}

The first rule defines a list of quotation mark pairs to use. The characters in the first pair are for top level quotations, and the next two are used for quotations within quotations. You’re not limited to two levels; provide as many pairs as you wish. You can also use any characters; just enter a backslash and then the hexadecimal entity code for the character you want. Of course, if you’re using utf-8 there is no need for entities.

The next two rules tell browsers to use the quotation marks defined in the first rule. More info on the CSS used for this can be found in Specifying quotes with the “quotes” property.

Things aren’t perfect now, but better. Opera displays the quotation marks defined by the CSS for both levels of quotations. Firefox (and other Gecko based browsers) only use the first pair of quotation marks for all levels of quotations. Safari is a bit stubborn, and displays double dumb quotes for all levels. Not perfect, but better than nothing.

If you quote text in languages that use different quotation marks than your document’s main language, CSS can help you out with that too:

q:lang(en) {
	quotes: "\201C" "\201D" "\2018" "\2019";
}
q:lang(sv) {
	quotes: "\201D" "\201D" "\2019" "\2019";
}

This allows you to specify different characters to use as quotation marks for different languages. Browser support is a bit lacking, so an alternative way would be to use an attribute selector:

q[lang|="en"] {
	quotes: "\201C" "\201D" "\2018" "\2019";
}

The above will match any q element that has a lang attribute whose value begins with "en". Again, not all browsers do this. In most cases there really isn’t any need to specify quotation marks for different languages like this anyway, unless you have a document with whole paragraphs in different languages. The quotation rules for the dominant language should be used, not those for the quoted language.

With modern browsers reasonably taken care of, in the sense that they render some kind of quotation marks around the content of q elements, there’s still IE/Win, which doesn’t render any quotation marks at all. There’s no way to make it do that automatically (well I suppose you could use some clever JavaScript, but I’ll leave that to someone else), but you can still make it display inline quotations in italics, which I think is a reasonable tradeoff:

/* Hide from IE5-mac \*/
* html q {
	font-style:italic;
}
/* End hiding from IE5-Mac */

In this example I used the Mac hack in combination with the Tan hack (more info on those hacks) to hide the rule from all browsers except IE/Win. Use your favourite way of sending IE/Win a separate stylesheet.

Here’s an example paragraph of nested inline quotations, with the CSS applied:

The W3C HTML 4.01 specification states that the presentation of phrase elements depends on the user agent.

Blockquotes: the blockquote element

For quoting longer passages of text that make up one or more complete paragraphs, or are otherwise not suitable to include inline, use the blockquote element.

Quotation marks in blockquote elements are not automatically inserted by browsers. The spec does not require them to either, though it encourages implementors to provide ways of doing so. You’re free to insert your own, or otherwise style the blockquote to make it look like a quote.

One thing that’s important to remember about the blockquote element is that it can only contain block level elements (easy to remember: blockquote – block elements) when you use a Strict DOCTYPE. This means that the text it contains must be enclosed in a block level element, which in most cases will be one or more p element(s).

Here’s how I’ve styled blockquotes:

The following sections discuss issues surrounding the structuring of text. Elements that present text (alignment elements, font elements, style sheets, etc.) are discussed elsewhere in the specification. For information about characters, please consult the section on the document character set.

Referencing: the cite attribute

Both the q and the blockquote elements can take an optional cite attribute. The value of the cite attribute is a URI that points to the source of the quotation. The source of my example blockquote looks like this:

<blockquote cite="http://www.w3.org/TR/1999/REC-html401-19991224/
struct/text.html">

The contents of the cite attribute aren’t normally displayed by browsers (though in Mozilla/Firefox, if you right click a blockquote and select "Properties", the URI used in the cite attribute will be displayed, along with the language specified for the blockquote), but there are ways of using CSS to display the URI. This could be useful to have in a print style sheet, to reveal any cite attributes.

The following sections discuss issues surrounding the structuring of text. Elements that present text (alignment elements, font elements, style sheets, etc.) are discussed elsewhere in the specification. For information about characters, please consult the section on the document character set.

The above blockquote uses the following CSS:

blockquote.example[cite]:after {
	content: "URI: " attr(cite);
	border-top:1px dotted #999;
	padding-top:0.25em;
	display:block;
	color:#000;
}

This works in Mozilla/Firefox, Safari, and Opera. Since this doesn’t provide any essential information or break things in other browsers, I think it’s a nice case of forward enhancement.

Citing: the cite element

While not technically a quotation, the cite element falls very close. It’s commonly used to markup the names of external references, like the title of a book or a movie. The HTML 4.01 spec states that cite Contains a citation or a reference to other sources, which leaves room for a bit of interpretation. The consensus seems to be to use it to markup titles of movies, books, and the like. The cite element can only contain inline elements, so no paragraphs. An example:

A couple of my favourite science fiction epics are the Night’s Dawn Trilogy by Peter F. Hamilton and Isaac Asimov’s Foundation series.

You can also use it in combination with a blockquote element to provide a reference to the source of the quotation. If that reference is an important part of the content, this is probably a better method than the CSS technique described above. An example:

The following sections discuss issues surrounding the structuring of text. Elements that present text (alignment elements, font elements, style sheets, etc.) are discussed elsewhere in the specification. For information about characters, please consult the section on the document character set.

URI: Paragraphs, Lines, and Phrases.

The XHTML for that:

<div>
	<blockquote cite="URI">
		<p>Quotation text…</p>
	</blockquote>
	<div>
		URI: <cite><a href="URI">Paragraphs, Lines, and Phrases</a></cite>.
	</div>
</div>

In this example I grouped the blockquote and cite elements by wrapping them in a div to be able to treat them as a unit.

Conclusion

Phew. This ended up being much longer than I had originally intended. If you’ve skipped straight to the end, here’s the short version:

Posted on November 24, 2004 in Web Standards, (X)HTML, Accessibility