Quotes 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 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.

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 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. Sure seems like a PITA just because of one faulty browser.

Recommended Reading