|
The Q tag. I'm experimenting with less well-known structural elements in HTML, including the Q tag, which is supposed to be used for inline quotations. I already use the BLOCKQUOTE tag for longer quotations, and it would seem that the Q tag would be perfectly suited for a weblog, since so many weblog entries involve quoting short snippets of linked external articles.
The Q tag was added in the original version of HTML 4, and has therefore been around for over 4 years. The specification mandates that browsers must ensure that the content of the Q element is rendered with delimiting quotation marks . I did a little testing, and all modern browsers do this... except Internet Explorer on Windows. Yeah, the one with 70% market share. Even IE 6 doesn't display quotation marks; content in a Q tag just looks like everything else. Shit.
But never mind that. I have a partial solution to IE's stupidity, which I'll get to in a minute.
One of the things you're supposed to be able to do with the Q tag is use CSS to specify curly quotes around your quoted text, instead of the default straight quotes. (The other thing is language-specific quote marks; most native English readers don't realize that other languages use different symbols around quotations.) Most people who care about curly quotes (Dean Allen, Michael Barrish, Jeffrey Zeldman, and so forth) do it by inserting the Unicode representation of the curly quote characters into their HTML directly. You can read how to do this on A List Apart: The Trouble With EM 'n EN.
If you are an absolute purist and are willing to thumb your nose at 70% of your readership, here's how to do it in CSS instead:
q {
quotes: '“' '”' "‘" "’";
}
q:before {
content: open-quote;
}
q:after {
content: close-quote;
}
The "quotes" property defines the characters to use around quotations marked up with the Q tag; the first pair of characters is for quotations, the second pair for nested quotations within quotations. The q:before and q:after declarations tell your browser to use those characters we just defined. Your browsers also keeps track of nested quotations automatically, and uses the appropriate quote character. You can learn more about the "quotes" property in Generated content, automatic numbering, and lists, part of the W3C's CSS2 specification.
Now then, if you're an absolute purist but are not willing to thumb your nose at the millions of IE/Win users out there, you can do what I'm doing now: put curly quotes around quotations in browsers that support the Q tag properly, and put quotations in italics for IE 5 and 6 on Windows. You can combine the above example with these two additional CSS declarations:
q {
font-style: italic;
}
p>q, li>q {
font-style: normal;
}
The first half puts quotations in italics, and the second half puts them back to normal text. The trick is that IE/Win doesn't understand the second half, because its CSS parser is almost as buggy as its HTML renderer. You can take advantage of this and other browser bugs to Hide CSS from Browsers.
IE sees the italics declaration, ignores the normal text declaration because it's buggy, and ignores the quotes declaration because it's stupid, then renders quotations in italics. Standards-compliant browsers like Opera, Mozilla, and IE/Mac see the italics declaration and the normal text declaration, which cancel each other out, then see the quotes declaration and surround quotations with curly quotes. Text browsers like Lynx ignore all stylesheets, but Lynx still sees the Q tag and correctly surrounds quotations with straight quotes. (And remember, having this site look good in Lynx is one of my design goals.)
Here are the results, and a quick test to see if your browser supports the Q tag and my associated stylesheets:
- This sentence has no quotes.
- This sentence has "manual quotes" that should appear straight.
- This sentence has
marked up quotes . If that phrase has curly quotes around it, your browser passes, congratulations. If it has straight quotes around it, your browser supports the Q tag but not the associated CSS declarations that make the quotes curly. If it appears in italics, you're using IE or a similar non-compliant browser that doesn't support the Q tag. Bad browser, no biscuit.
Tomorrow: aural stylesheets for voice browsers. No, really. [diveintomark]
12:18:32 AM 
|
