The Q Conundrum
Apart from being an entire continium all on its own, <q> is a potentially useful, and under-used, piece of markup. So what’s <q>?
According to the W3C specification:
qis intended for short quotations (inline content) that don’t require paragraph breaks.
So far, so good. We can use q to markup short inline quotations such as:
<p><q>We think this should be useful</q>, said W3C</p>
The problem arises when you start to look how q is implemented cross browser.
The W3C spec also goes recommends:
Visual user agents must ensure that the content of the
Qelement is rendered with delimiting quotation marks. Authors should not put quotation marks at the beginning and end of the content of a Q element.
Got that? No adding " or ‘ before and after quotations. The browser will take care of it. Except one particular browser doesn’t…
So you know have a situation where, if you leave out quotation marks (as per the spec recomendations), Internet Explorer (up to, and including v6) will render your quotations without any of the expected punctuation whilst Firefox and Mozilla will follow the spec and add quotation marks automatically. If you opt to add the quotation marks manually, you’ll end up with a double set of them on the latter two browsers.
Still with me?
One option might be to use IE-specific CSS to generate quotations marks - except that this would rely on browser sniffing (an inexact art at the best of time) and would depend in IE to implement the CSS :before and :after attributes… which it doesn’t. So that’s a non-starter!
Plan B would be to use the CSS 2 ‘quotes’ attribute to supress all auto-generated quotation marks in compliant browsers and add all the punctuation manually. But that is actively working against all of the specs for the sake of 1 (admittedly very popular) non-compliant browser. Added to which, what happens if the next version of browser X implements q but doesn’t support the CSS ‘quotes’ property? You will have now come full circle!
If you’ve managed to get this far, the obvious question has to be - is there a workable comprise that stays within the recommendations for authors but that won’t come back and bite you a year down the line? At present, the only practical solution appears to be to use a bit of basic CSS to add some styling to any q elements. Something like:
q {font-style:italic;}
would seem to be pretty foolproof. The readability of quotations, within the graphical browsers, is now, no longer completely dependant upon the browser’s ability to auto-generate quotation marks and if a currently non-compliant browser is suddenly upgraded to become 100% compliant, there’s no risk of your pages suddenly looking like they’ve developed a quotation mark stutter.
There’s just one problem - italic fonts aren’t exactly easy to read and may even create an accessibility issue.
See Q Tag Unleashed for a possible solution…
seems to be badly implemented in Firefox, in that it destroys automatic paragraph wrapping. Thus a 50-word paragraph that has a quote delimited with will stretch out in a single endless line. Worse still, every succeeding paragraph will also lose its paragraph wrapping. In other words, seems to have been implemented with an automatic functionality.
The comment above (assuming it’s still there) eliminated all the examples, I supposed because I didn’t use decimal character entities. This is how it was supposed to look (crossing our fingers):
seems to be badly implemented in Firefox, in that it destroys automatic paragraph wrapping. Thus a 50-word paragraph that has a quote delimited with
will stretch out in a single endless line. Worse still, every succeeding paragraph will also lose its paragraph wrapping. In other words, seems to have been implemented with an automatic
I’ve used <q> on a number of occasions and I’ve never come across the Firefox bug that you seem to have seen.
Have you got an example somewhere?