Quotations In The HTML Document

The Blockquote

The blockquote element is mostly familiar to everyone. In the early days of moveable type printing, quotes were placed at the beginning of each line of the blockquote. As the practice died out, the text was indented from each side to create the separation from the rest of the text. This has become the default rendering in browsers. There are some who will use the element simply to indent text, and not to describe the content as being a quotation. This is semantically wrong.

We can see this rendering below.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In eu sem. Phasellus cursus. Mauris turpis. Nam fermentum rhoncus sem. Morbi placerat elementum felis. Nullam dignissim.

The W3C has this note to add about blockquotes — and I’ll put it in a blockquote :)

Note. We recommend that style sheet implementations provide a mechanism for inserting quotation marks before and after a quotation delimited by BLOCKQUOTE in a manner appropriate to the current language context and the degree of nesting of quotations. W3C HTML4 specs

Do you see the quotation marks the browser added? Neither do I. That's probably because no browser that I know of adds them. In fact, the Firefox stylesheet has only this:

blockquote {
  display: block;
  margin: 1em 40px;
  }

In English, a block quote would have opening quotation marks at the beginning of each paragraph, and a closing quotation mark at the end of the last paragraph. Modern typographical convention calls for the opening quote marks to be outdented. The text-indent: property lets us do the outdent easily. Unless you want to add the quotes manually, we can use pseudo elements and classes from css. That will work for some modern browsers. So, what about IE? My attitude in this case is forget IE. The block indention sets aside the quote sufficiently, and the <blockquote> tag should set it out for screen readers.

We can properly quote the text in some modern graphic browsers by adding a bit of css style rules.

blockquote#bq-fixed p {
  text-indent: -.5em;        /*value equals approximate
                               width of quote-mark face*/
  }

blockquote#bq-fixed p:before {
  content: open-quote;
  }

blockquote#bq-fixed p:after {
  content: close-quote;       /*we have to close each paragraph
                                else following quotes would all
                                be inner quotes*/
  visibility: hidden;         /*so we hide them until the last
                                          paragraph*/
  }

blockquote#bq-fixed p:last-child:after,
blockquote#bq-fixed p.last-p:after {
  visibility: visible;
  }

Let's look at an example.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In eu sem. Phasellus cursus. Mauris turpis. Nam fermentum rhoncus sem. Morbi placerat elementum felis. Nullam dignissim.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In eu sem. Phasellus cursus. Mauris turpis. Nam fermentum rhoncus sem. Morbi placerat elementum felis. Nullam dignissim.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In eu sem. Phasellus cursus. Mauris turpis. Nam fermentum rhoncus sem. Morbi placerat elementum felis. Nullam dignissim.

Works great if you have Firefox, not at all in IE. Opera and Konqueror/Safari don't understand the last-child pseudo element. Ah, well. So, it seems if cross browser compatibility is important right down to the small detail, you will add the quotation marks manually, or leave them off completely.

In the great majority of cases, you may add the the quotes automagically, as a progressive enhancement for folks using modern browsers. For the UAs without the capability to support the rulesets, no functionality is lost.

The <q> Element: the Inline Quote

Let's start by looking at two examples. They both use the <q> tag to mark the inline quotation. In the first, we depend on the browser's rendering. In the second, we manually add quotation marks. The example is taken from W3C.

John said, I saw Lucy at lunch, she told me, Mary wants you to to get some ice cream on your way home. I think I will get some at Ben and Jerry's, on Gloucester Road.

Now again, with the added quotation marks.

John said, “I saw Lucy at lunch, she told me, ‘Mary wants you to to get some ice cream on your way home.’ I think I will get some at Ben and Jerry's, on Gloucester Road.”

If we view these example in a modern browser, we see that the first example is just fine, with proper quote marks even for the nested quote. The second example shows all quote marks doubled up. This is true even of Lynx, a non graphic text browser.

Now view in IE. The first example has no quote marks at all and the second example looks OK.

If you're like me, you took the easy way out and stopped using the <q> tag, and simply typed in the quote marks. Looks right in all browsers. The trouble arises in assistive techologies such as screen readers. As Stacey Cordoni, a Devshed forum member (stacey1985), pointed out, screen readers don't treat something as being quoted just because of a double prime or an actual quote mark. It needs the proper tagging. Of course, that's what semantic markup is all about.

So what do we do? The good browsers add the marks on their own, and unless we add them manually, IE won't render any marks. Stacey suggested we override the browser's default style rules with our own. In Firefox, the rules for the <q> element look like this:

q:before {
  content: open-quote;
  }

q:after {
  content: close-quote;
  }

So if we add the following to our stylesheet, we should be OK.

q:before {
  content: "";
  }

q:after {
  content: "";
  }

So let's look at that second example again with the new rules.

John said, “I saw Lucy at lunch, she told me, ‘Mary wants you to to get some ice cream on your way home.’ I think I will get some at Ben and Jerry's, on Gloucester Road.”

We have a plan. We use the <q> element for its semantic properness, and we kill the browser's built in quotes and add them ourselves. Of course, Lynx still has the double quotes.

Second Thoughts

Why do I feel so dirty? Maybe it's because we're overriding a proper behavior to satisfy one browser that doesn't support an html4 element that became standard in 1996. Is there a way out? I think so.

IE has a proprietary conditional comment. We can use it to feed only IE the typed quotation marks, and allow modern browsers to behave as the standards demand.

Microsoft promises that IE8 will support html4 and css2.1, so we need only address IE7 and previous versions.

The first step is to go back to the default presentation of the <q> element. Then, we wrap the inserted quotation marks in IE's conditional comment.

<p>John said, <q><!--[if lte ie 7]>“<![endif]-->I saw Lucy
at lunch, she told me, <q><!--[if lte ie 7]>‘<![endif]-->Mary
wants you to to get some ice cream on your way
home.<!--[if lte ie 7]>’<![endif]--></q> I think I will get some at
Ben and Jerry's, on Gloucester Road.<!--[if lte ie 7]>”<![endif]--></q></p>

As you can see, all browsers now treat the inline quote properly, with neither doubled, nor missing quote marks.

John said, I saw Lucy at lunch, she told me, Mary wants you to to get some ice cream on your way home. I think I will get some at Ben and Jerry's, on Gloucester Road.

That adds additional markup to the content, and I won't say that's the way everyone should handle the issue. I feel right doing it this way; not bringing good browsers down to IE's level for the sake of a few key-strokes.