Simon Willison’s Weblog


Fixing quotes with Javascript

3rd April 2003

Marek Prokop has a cunning way of getting Internet Explorer to style <abbr> elements (IE, for reasons unknown, usually ignores their existence both as stylable elements and through the DOM). A comment by Mr. Farlops on diveintomark inspired me to have a go at fixing IE’s equally faulty quotes behaviour using javascript. Rather than detecting IE by checking for the presence of document.all, I decided to use a Microsoft specific proprietary extension: DHTML Behaviors.

The HTC file ( like this:

<public:attach event="oncontentready" onevent="init();" />
function init() {
  element.innerHTML = '&#8220;'+element.innerHTML+'&#8221;';

The additional CSS required to use it (and to make quotes look pretty in better browsers), based on Mark Pilgrim’s code from The Q tag, looks like this:

q {
  behavior: url(;
  quotes: '\201C' '\201D' '\2018' '\2019';
q:before {
  content: open-quote;
q:after {
  content: close-quote;

There are two main disadvantages to this solution: It introduces an invalid property to your CSS, and it could result in duplicated quotes in IE 7 should that browser finally fix the lack of quote element support.

Mark Pilgrim advocates using a server side script to mark up quotations with the relevant HTML entities. I’m not too keen on this solution purely because I tend to surf the web using Lynx 2.7 from University every now and then, and Lynx 2.7 displays some entities untranslated resulting in sites looking like this:

   The guy in charge of &#8220;doing techie stuff for The Register&#8221;
   emailed me today to say that The Register is now sporting a shiny new
   RSS 1.0 feed. It validates and everything. Woohoo! Guess I&#8217;ll
   have to find somebody else to pick on now. [winking face]

(This issue is fixed in Lynx 2.8).

Time for bed, said Zebedee.

This is Fixing quotes with Javascript by Simon Willison, posted on 3rd April 2003.

Next: css-discuss archives back online

Previous: Mozilla changes focus

Previously hosted at