Spider Trax

Q Tag Unleashed

I’ve long bemoaned the fact that Internet Explorer’s inability to correctly render content enclosed by the <q> tag severely limited its usefulness.

The issue lies with the fact that IE, incorrectly, renders any text inside <q>…</q> without the appropriate quotation marks. Firefox, in comparison, renders the text correctly enclosed with quotation marks. So if you manually add quotes to support IE, you risk Firefox users being confronted with a double set of quotes! If you omit the quotation marks, IE users may not be able to differentiate quoted text from plain text.

Which of the two browsers is correct?

Firefox.

The W3C HTML 4.01 specification states:

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.

So, by omitting the enclosing quotation marks, IE breaches the specification. No suprise there. But since IE is still the most commonly used web browser, its behaviour - correct or not - cannot be ignored. So, for the most part, developers (myself included) have simply avoided using the <q> tag altogether - which is a real shame.

Now Stacey Cordoni has published an article on A List Apart suggesting a blindingly simple workaround that makes use of the pseudo CSS elements :before and :after. The beauty of her solution is that it doesn’t actually break the specification - although it does bend it a fair bit - and it will continue to work even if/when IE does render quoted text correctly.

In a nutshell, the following CSS declaration supresses the automatic rendering of quotation marks on browsers, such as Firefox, that do follow the spec:

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

Now that we have a level playing field where both IE and non-IE browsers display quotes sans quotation marks, these can be added manually to the markup. In order to try and stay on the right side of the specification, Stacey suggests that hard-coded quotation marks should be used outside of the <q>…</q> tags but, there’s no doubt that, in principle, this is bending the rules just about a far as you can. Purists will also argue that adding markup for presentational purposes only is the Wrong Way ™ to go. In general, I’d agree but I think that in this case, the benefits in terms of readability and overall accessibility are worth it.

Top