Klaus Hartl – Stilbüro - Klaus Hartl

Fix quotations (with the help of jQuery)

February 19th, 2006

Category:

CSS,

JavaScript,

Web Development,

jQuery

I wrote a little snippet to fix quotations for Internet Explorer/Windows. Why is that? Because EOMB automatically generates quotations marks for the q element, but not IE (which is not a modern browser).

First I specified quotation marks in a style sheet:

q {
    quotes: "\"" "\"" "'" "'";
}
q:before {
    content: open-quote;
}
q:after {
    content: close-quote;
}

With these rules applied, a browser wraps the content of the q element in double quotation marks and single marks if the q is nested in another one.

To achieve the same result in IE, I am adding the quotation marks via JavaScript:

/*@cc_on
$(document).ready(function() {
    var innerqClass = "innerq";
    $("q q").append("'").prepend("'").addClass(innerqClass);
    $("q:not(." + innerqClass + ")").append("\"").prepend("\"");
});
@*/

Note that I used Conditional Compilation: /*@cc_on ... @*/. The code shall only be executed in IE and this is much more reliable than doing some other browser sniffing.

Don’t forget to include jQuery:

<script src="http://jquery.com/src/latest/" type="text/javascript"></script>

See the whole thing in action.

You don’t know jQuery yet (New Wave Javascript)? jQuery is a superb, lightweight library, which allows for writing short and easily understandable – in other words elegant – code. I am planning to use it in all of my next projects.

Update: Use this snippet for IE 7 as well, it does not support generated content either (at least the second beta).

Comments disabled · Trackbacks disabled · Permalink