The Q tag has been around for nearly nine years, ever since the first version of HTML 4.0. Its purpose is to handle short, inline quotations that don’t require paragraph breaks. The Q tag is commonly associated with the blockquote tag, which is used for long, block-level quotations. Since the Q tag’s inception, it has never been fully compatible with Microsoft Internet Explorer for Windows.
Quotation marks are supposed to render with use of the Q tag but not with use of the blockquote tag (it’s not necessary since the blockquote tag separates its enclosed content from its surrounding content). However, IE/Win does not render these quotation marks, and because of this, most web authors choose not to use the Q tag. I’m here to change all that!
I’m sure we all know the difficulties in creating a web site that has valid CSS and XHTML, is fully accessible and usable, is consistent in its visual display and is in accordance with the W3C HTML 4.01 Specification, along with everything else. With this particular fix, the W3C HTML 4.01 Specification is jeopardized ever so slightly; accessiblity and consistent visual display rank higher on my priority list than perfect compliance with the W3C HTML 4.01 Specification. I’ll recommend some alternate solutions at the end of this article for those with different priorities.
The Q tag problem#section2
Example: Did you know The quick brown fox jumps over the lazy dog
contains every letter of the alphabet?
In the above example, you should see quotation marks around “The quick brown fox jumps over the lazy dog.” If you don’t, you’re using IE/Win, am I right? No, I’m not psychic (I wish!)—IE/Win does not render the quotation marks that are supposed to be rendered with use of the Q tag.
For those of us Browsing Happy, or even browsing with Lynx (a text-only browser), we see the quotation marks (straight quotation marks in Lynx). The problem lies with only IE/Win. Let us see what IE/Win sees:
Example: Did you know The quick brown fox jumps over the lazy dog contains every letter of the alphabet?
It’s grammatically incorrect gibberish, and there is no visual indication of a quotation even though the Q tag is being used. Preposterous! I will fix this.
Because of IE/Win’s lack of support for the Q tag, the Q tag is not used by many web designers or web authors. This may be because there has been no solid solution to rectify IE/Win’s faulty support for the tag. Most of the articles I have read on the Q tag (Simon Willison’s “Fixing quotes with Javascript”, Mark Pilgrim’s “The Q tag” and “The Q tag revisited”, and Richard Rutter’s “Citations and quotes”) rely on one or more of the following:
- Using CSS to italicize the
Qtag in IE/Win. - Using JavaScript to render the quotation marks.
- Ceasing to use the
Qtag altogether.
Other fixes (not from the above articles) I have read about include:
- Using the
blockquotetag instead. - Using the
Qtag, but also including your own quotation marks.
The trouble with these fixes#section3
- Using CSS to italicize the
Qtag in IE/Win.- This could cause confusion: I wouldn’t assume italicized text to be a quote unless I saw quotation marks around it.
-
Using JavaScript to render the quotation marks.
- Many people disable JavaScript, so the people using IE/Win with JavaScript disabled still won’t see the quotation marks.
- Double quotation marks will appear if and when IE/Win fixes the problem in a future release.
-
Ceasing to use the
Qtag altogether.- Why? The
Qtag is neccessary for semantic markup and for screen readers.
- Why? The
-
Using the
blockquotetag instead.- Using an incorrect tag is not the solution.
-
Using the
Qtag, but also including your own quotation marks.- This will result in double quotation marks in browsers other than IE/Win.
Then what is the solution?#section4
I’m stubborn, so I didn’t want to use any of the above fixes—I wanted to use the Q tag and have it work for everyone, even in the future when IE/Win supports the tag.
After much thought, I realized I should try to alter the other browsers instead of IE/Win. That is when I came up with the following CSS code.
q:before, q:after {
content: ""; }IE/Win does not recognize :before and :after pseudo-elements, but it is not neccessary for IE/Win to recognize them for this fix.
As you can see in the CSS code, the content property is blank. This overrides the browser’s default style for the Q tag and replaces it so that no quotation marks are shown. All browsers will now act like IE/Win does when it comes across the Q tag.
Simply add the above CSS code to your stylesheet and add quotation entities outside the Q tag and now all the browsers, including IE/Win, will display quotation marks—and we won’t have to worry about the other browsers having double quotation marks because we overrode the Q style with our own. It may be annoying to have to add the quotation entities, but it’s worth it to your IE/Win users.
Quotation entities:
Left double quotation mark (eg. “): “
Right double quotation mark (eg. ”): ”
left single quotation mark (eg. ‘): ‘
Right single quotation mark (eg. ’): ’
Straight quotation mark (eg. “): "
Example code:
Did you know “The quick brown fox jumps over the lazy dog
” contains every letter of the alphabet?
Returns:
Did you know “The quick brown fox jumps over the lazy dog” contains every letter of the alphabet?
What are the downsides?#section5
According to the W3C HTML 4.01 Specification:
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 aQelement.
As mentioned above, authors should not put quotation marks inside the Q tag. With this fix, I suggest the quotation mark entities be put on the outside of the Q tag, thus not disobeying the W3C HTML 4.01 Specification (the XHTML 1.0 specifications rely on HTML4.01 for the meanings of XHTML elements and attributes). If you need to use a quote inside a quote, you’ll have to place the single quotation mark entities inside the Q tag, which is not in accordance with the W3C HTML 4.01 Specification.
Conclusion#section6
Hooray! Now we have a way to use the Q tag to maintain semantic markup and accessibility and cater to IE/Win users. As far as future support for the Q tag goes, it’s not yet known if the developers of IE/Win will recognize and address the browser’s lack of support for the Q tag. As of IE/Win 7 Beta 3, the Q tag is still unsupported. To reinforce this, the Q tag is not even mentioned on IEBlog (other than in comments from users).
When the Q tag is finally supported by IE/Win, the above fix won’t damage the experience of users with new browsers, and it’ll still fix the problem for users of older, broken versions of IE/Win.
So there you have it folks, a backward- and forward-compatible fix for the Q tag. Enjoy!
Addendum: alternate solutions#section7
The Q has been written about by many and here are a few more solutions you may want to try:
- Simon Willison: “Fixing quotes with Javascript”
- Stuart Langridge: “The Q tag and JavaScript”
- Richard Rutter: “Citations and quotes”
I would recommend Simon Willison’s “Fixing quotes with Javascript” as the second-best solution to the Q tag. Currently it works fine, though it obviously relies on JavaScript. Also, this fix isn’t forward compatible: once IE/Win supports the Q tag, Simon Willison’s fix will cause double quotation marks for users with the new version of IE/Win.
Jim Gibbins writes: “It’s a disservice to disabled people to not be practical about what we do. It’s frustrating that there aren’t effective solutions in place, whether it be because of limited support or a swiss-cheesed basis. “?
But you keep saying that and it’s clearly not true. Why is that? I listed several solutions that I’m aware of and whether they are just aural browsers or screen readrs doesn’t matter. The point is the work correctly. Incidentally, you’re wrong about the screen reader issue too. VoiceOver aand EmacSpeark are also screen readers and they handle CSS aural / speech properties correctly.
There are so many falsehoods in whay you’re saying I don’t know where to begin. Here’s a list of corrections.
There are many effective alternative to JAWS than handle CSS and semantic markup correctly.
Using W3C recommendatikons for semantic markup and aural / speech presentation are effective ways of raching the visually impaired.
Firefox does expose aural properties in its’s DOM.
You keep saying the opposite of all of this is completely false. And all of your advocacy agasint the visually impaired seems to be only due to a misguided attempt to justify Internet Explorer”˜s lack of standards support.
What do you do in you’re spare time, steal Christmas?
Thanks Rob – another insightful and cogent post.
I just wanted to point out – noone’s encouraging web authors to use unsemantic markup. Far from it. It’s just the semantic description of a quote may include the surrounding quotation marks. Equally, it may not – this depends on context and the quote in question.
Some semantic markup languages (TEI-Lite, XHTML 2) give authors the flexibility to markup quotes in either fashion. HTML 4, unfortunately, does not and so workarounds are needed if the quote, semantically, includes quote marks and is enclosed by
Hope that clears up that bit of confusion.
No, it doesn’t clear up the confusion. It adds to the confusion in the same way you’ve been doing all along. In all practical terms, HTML 4 (1999) along with CSS 2 (from 1998) does allow flexibility with semantic markiup (just like the proposed XHTML 2 draft). IE does not provide this flexibility.
Rob, I think you are missing the point.
My personal opinion is that quotation marks should not be added by the browser as is required by the W3C recommendations, and that their addition by browsers rather than the author of the content could in fact be to the detriment of accessibility. Besides, to my mind, quotation marks are part of the content and not presentational information to be left to CSS.
Yes, it is unfortunate that Internet Explorer doesn’t support certain things, but that wasn’t the focus of what I have been saying. And I am not trying to justify anything about Internet Explorer. The point I rasied was about whether or not control over punctuation should be with the browser at all. The fact that browsers (except IE) allow you to control the delimiting quotation marks that they add via CSS is pretty much irrelevant to that discussion. If you turn off CSS, the browser’s default styles will still be active and the delimiting quotation marks they add will still be there. CSS rules you add will not fix the fact that the browser has control over your punctuation – your content.
And for the record, I find it unfortunate that you have felt it necessary to descend into rudeness – I will not waste my time replying to you if it continues. If you have a point, I suggest that you collect your ideas into a coherent post before hitting the submit button.
Another option: leave the good browsers’ generated content alone (cool idea though), and hack IE.
…Good for developers who are in those jobs with high-paying corporate clients, but want to stay as close to semantics as possible.
Hence only IE support it.
I tend to use straight quotes instead of using css to needlessly complexify your content to that degree. I’m sure that has been said by others in all of these pages of comments.
It may offend one’s web 2.0/css sensitivities, but it’s easy, simple, and takes no time to do a search-replace.