Not so Smart Quotes

Wednesday, April 23rd, 2003 @ 1:02 am | Mac

As Michael notes, Safari 1.0 Beta 2 now supports the <q> tag. Armed with this knowledge, I decided to try it out in a recent entry.

From the comments on Michael’s entry, I knew there were some oddities in the implementation of <q>, but I wasn’t prepared for the horror I saw when my posting was rendered — straight quotes on my beautifully SmartyPants-ified weblog!

I played around with a Safari, Camino, and bit of CSS and determined I can eliminate the drawing of the "s with the following CSS:


q:before { content: ""; }
q:after { content: ""; }

At this point, I started feeling pretty good about myself. After all, if I add the appropriate ASCII codes for “ and ” (&#8220; and &#8221;, respectively), I should be all set. Of course, this is what I saw in Camino and Safari.

Display ASCII codes instead of rendering smart quotes

I’ve perused the CSS spec, but I couldn’t find anything about whether or not HTML entities should be rendered. Anybody have some insight on this?

3 Responses to “Not so Smart Quotes”

  1. Raena Says:

    If you expect to use specific characters, html entities aren’t the way to go: use a hex code as specified in one of those ISO thingies. The table listed here shows you some of the common characters: http://www.w3.org/TR/REC-CSS2/generate.html#quotes

    (I know you said you looked at the spec, but this is the piece that refers to same.)

    The hex-coded character is enclosed in quotes in a stylesheet, and preceded with a backslash.

    So, it’d be:

    q:before { content: “201C”; }

    q:after { content: “201D”; }

    to get typograpically-correct English curlyquotes.

  2. Raena Says:

    to clarify: the character hex-code spec is ISO 10646. Cause I know I sound sreally intelligent when I refer to stuff as ‘thingies.’

    Also, the example I gave is for “doubles;” for ‘singles,’ use 2018 and 2019.

  3. Eric Says:

    What? ‘Thingies’ is a perfectly technical term :)

    I actually looked at that page in the spec last night, but completely missed what is was trying to say in the table. I think the approximate rendering of ” as '' sort of threw me off.

    At least, that’s my story and I’m sticking to it.