<q> Element Testing

Abstract

"Visual user agents must ensure that the content of the Q element is rendered with delimiting quotation marks. Authors should not put quotation marks at the beginning and end of the content of a Q element."

In short, the <q> element should be rendered automatically with speech marks. The trouble is, is that they haven't for a long time, and browser makers seem reluctant to put them in.

This page allows browsers to be tested as to their support. The <q> element is coloured red, purely to identify it.

Example

This is a normal paragraph with a short quote of a few words in it.

This quote doesn't have a cite attribute. Shame.

This quote is supposed to have the cited url after it.

This quote says that I am a nested quote, so there! (Look at the difference in quote marks if there are any).

Code Used

  1. <p>This is a normal paragraph with a <q cite="http://example.com/">short quote of a few words</q> in it.</p>
  2. <p>This <q>quote doesn’t have a cite attribute</q>. Shame.</p>
  3. <p><q class="showcite" cite="http://example.com/">This quote is supposed to have the cited url after it.</q></p>
  4. <p><q>This quote says that <q>I am a nested quote</q>, so there!</q> (Look at the difference in quote marks if there are any).</p>
  1. q.showcite:after { content: close-quote " ~ " attr(cite); }
  2. q { color: red; }
  3. q q { color: green; }

Conclusion

No browsers seem to make natural use of the cite attribute in any way. IE doesn’t put any quote marks in. Firefox does until the cite is actually used as part of the generated content, so have to be added back in. Opera seems to do best, but by no means bug-free, as overriding the :after content obviously removes the final quote mark.

Tags