Simon Willison’s Weblog

Fixing quotes with Javascript

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 (fixquotes.htc)looks like this:

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

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(fixquotes.htc);
  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 “doing techie stuff for The Register”
   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’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.