Styling quotations
Posted on 23 August 2006 (02:51 PM)
I've always liked the way most standards-compliant browsers display inline quotations (marked up with <q>). In case you don't have such a browser at your disposal; it's an easy concept to grasp, these browsers put quotation-marks around the text like this:
Internet Explorer however, does not use this default styling. But since you probably want quotation marks around your quotations, you've got two options:
- Insert the quotes yourself like this:
<q> " To be or not to be. " </q>
- Don't bother about semantics and use different markup.
Since I'm advocating accessible coding in my articles, option 2 is out of the question. Semantic markup really helps assistive devices, so it shouldn't be abandoned.
Option 1 however, looks allright in Internet Explorer, but in most other browsers you end up with a double set of quotation marks, like this:
That just looks plain silly. Luckily, this is easy to overcome using the following CSS:
q:before,q:after {content: "";}- Download this code: /code/styling_quotations1.txt
And that's that. IE won't understand the :before and :after pseudo-selectors, more advanced browsers will cut the default quotation marks off. It's a small problem, with an easy solution, but tiny details like this can really be a finishing touch.
Edit: turns out I was wrong
As pointed out to me in the comments, the W3C certainly has a different opinion on the matter. Explorer is wrong and this time it isn't the author's job to rectify their mistake. Related reading, as provided by Sébastien Guillon:
- http://www.w3.org/TR/HTML4/struct/text.HTML#h-9.2.2
- http://acjs.net/weblog/2005/06/10/language_specific_styling_quotation_marks/index.PHP
- http://sebastienguillon.com/journal/2005/07/guillemets-francais-en-CSS
Filed under HTML and CSS
- ← previous article: Image popups that fit
- → next article: Nested lists bug
Comments:
Option 1 is not acceptable according to the HTML spec (see:
http://www.w3.o...xt.HTML#h-9.2.2 ) :
"Visual user agents must ensure that the content of the Q element is rendered with delimiting quotation marks." So Internet Explorer IS failing.
"Authors should not put quotation marks at the beginning and end of the content of a Q element." But it seems your option is also incorrect. So if you add quotation marks manually you shouldn't enclose the text in Q tags."
Related:
http://acjs.net...marks/index.PHP
http://sebastie...francais-en-CSS (in French)
this comment has been quoted by Harmen Janssen
Thanks a lot, Sebastien, I wasn''t exactly sure what my solution would do to accessibility.
Too bad though, if this means developers should just stay away from the q-tag.