If you are of the Internet Explorer browsing persuasion, you may have noticed that often, when I quote another website, the style of the font will be in italic but there won’t be any quotes around the reference. I released a change to the site today that should take care of this issue.

The problem was that Internet Explorer—all the way up to version 6.0—does not fully support a tag standard that has been around for about five years now, namely: the <q> tag. According to the W3C specification, the browser is required to put quotes around anything surrounded by this tag. Mozilla does it, as does Opera. IE does not.

Mark Pilgrim has addressed this issue before, initially offering a CSS solution, but eventually settling for some server-side scripting that would insert the HTML quote entities en masse throughout his site. While this is probably an ideal solution, server-side scripting—even of the MT-Plugin variety—is not something that I have taken the time to learn.

Today, though, Mark provided links to JavaScript solutions provided by Simon Willison and Stuart Langridge. While the Willison solution involved proprietary IE scripting, Langridge took it one step further to make it more standards-friendly. Both of these implementations got the ball rolling for me and after hacking around for a little under an hour, I came up with this code:

function checkQuotes ()
{
   quotesElements = document.getElementsByTagName(“q”);
   if (quotesElements.length > 0) {
      q=quotesElements[0];
      if (q.currentStyle) {
         s = q.currentStyle;
      } else if (document.defaultView && document.defaultView.getComputedStyle) {
         s = document.defaultView.getComputedStyle(q,”);
      }
      supportsQuotes = false;
      for (prop in s) {
         if (prop.toLowerCase() == ‘quotes’) {
            supportsQuotes = true;
            break;
         }
      }
      if (!supportsQuotes) {
         for (var i=0; i<quotesElements.length; i++) {
            q = quotesElements[i];
            q.innerHTML = ‘&#8220;’+q.innerHTML+’&#8221;’;
         }
      }
   }
}

According to this code, any browser that supports the quotes will simply implement the CSS rules that I got from reading Mark’s article. Those that don’t, like Explorer, will have them dynamically added to each q element in the page.

I’ve tested this in my limited “QA” environment, and it works without error in the Mozilla variants, Opera 7, and Internet Explorer 6.0—which includes quite a chunk of the internet community. Netscape 4.76 did generate an error, however, quietly whining that the document.getElementsByTagName function does not exist.

Thanks to Mark, Simon, and Stuart for their work. Click here to see an article that employs the <q> tag.