Smarten Up

Thursday, April 24th, 2003 @ 10:28 pm | Mac

Thanks to Raena’s insight on Not so Smart Quotes, I had some new tools in my arsenal to smarten-up Safari’s <q> implementation. It’s certainly been an enlightening experience.

First of all, who’s have thought the large green table containing hex codes for common quotations would be so useful? This is just more proof that I’ve got to stop letting my eyes gloss over when I’m reading specs — I read this page several times, but my mind was pretty much gone by the time I got to this table. Second, does anybody else find the usage of table-based layout in the CSS 2 spec as ironic as I do?

So, revised Plan A was the ‘quotes’ property. According to the spec, the ‘quotes’ property not only lets you specify characters for opening and closing quotations, it lets you specify different quote marks for different levels of quotations. “This sounds great,” I thought to myself. Not only could this let me use smart quotation with the <q>, but it could also make it possible to use single quotes inside of quotations. Time to try out some CSS and view the results.

q { quotes: "\201C" "\201D" "\2018" "\2019"; }
Safari and the Quote Property
Camino and the Quote Property

That’s Safari on the top and Camino on the bottom. As you can tell, not a whole lot luck. Safari completely ignores the ‘quotes’ property while Camino only uses the first pair of quotes.

Now, it’s hunting time. Thanks to the magic of application packages, I was able to dig around and find the default style sheet that Safari uses for rendering fun tags like <q>. The style sheet is named html4.css and can be found in

As I was starting to suspect, Safari use the :before and :after pseudo-elements in conjunction with the <q> tag to specify what quotes should be used. In fact, here’s what specified in the Safari style sheet:

Q {
display: inline;
Q:before {
content: '"';
/* content: open-quote; */
Q:after {
content: '"';
/* content: close-quote; */

Finally, for anyone who’s still reading this, I had the solution to my problem. Here’s the CSS:

q:before { content: "\201C"; }
q:after { content: "\201D"; }

…and now, instead of a graphic showing non-working quotes, actual use of the <q> tag.

This discovery also provides a likely answer to John Gruber’s comment on Michael’s entry that quotes don’t resize when you change the text size. Safari doesn’t appear to resize any text applied with the ‘content’ property. To see this in another way, go to my Walk-Off entry from a few days ago. My style sheet includes a note-style paragraph that uses the ‘content’ property to prepend “Note: ” to the front of any such paragraph. If you change the text size, the “Note: ” text remains the same.

Ugh. As I was pasting this into MoveableType, I happened to copy some text out of the browser, including the oh-so imaginative quote used above. The quotation marks don’t copy. This isn’t specific to my changes, it happens with the normal use of the <q> tag. So, semantically-correct quotations or copy-able text?

Sigh. One of these days, I’ll actually remember to upload my images at the same time I submit a post. Sorry about that. I’ll also learn to proofread paragraphs I add in the process of posting — cleaned up the “Ugh” paragraph.

4 Responses to “Smarten Up”

  1. Scott Says:

    Hey GeoURL neighbor,

    I was just checking out “The World as a Blog” ( and your site briefly came up on their radar map. I had recognized it because your site is in my aggregator.

    When I went to see what you did, I found it a very useful tip and added it to my CSS sheet as well. Thanks for the insight!

  2. Michael Tsai's Weblog Says:

    Smarten Up

    Eric Blair writes about the <q> tag in Safari.

  3. Raena Says:

    Safari’s implementation of generated content isn’t so hot anyway. I’m caring a lot less about it than other browsers, simply because it’s still beta.

  4. Eric Says:

    I expect Safari to get better, but I figure documenting problems can only help the process of fixing them.

    The sad thing is, even in it’s beta state, Safari handles generated content better than either IE Mac or IE Win. I’ve perused my access logs, but I don’t have any analysis packages installed as of yet. I think it’ll be interesting to see what people are using to view this site.