jQuelements — fixing <q> for IE
According to the W3C, visual browsers should render quotation marks around text marked up with the HTML quote element, q. Modern browsers do, but not Internet Explorer versions prior to 8. This problem was discussed a lot a few years ago, but I haven’t seen much about it lately.
Additionally, the W3C say in the HTML4 specification that:
User agents should render quotation marks in a language-sensitive manner (see the lang attribute). Many languages adopt different quotation styles for outer and inner (nested) quotations, which should be respected by user-agents.
IE8 is currently the only major browser to apply the appropriate quotation marks according to the specified lang attribute by default. Fixing this for Firefox and Opera is relatively straight forward with a little bit of CSS. David Hellsing wrote a good article on this, and how to get it to work in (older versions?) of Safari as well. First, we specify the quotes property of our q elements, here for English and Swedish:
q:lang(en) { quotes: "\201C" "\201D" "\2018" "\2019"; }
q:lang(sv) { quotes: "\201D" "\201D" "\2019" "\2019"; }And then the before and after content.
q:before { content: open-quote; }
q:after { content: close-quote; }Some languages (such as French) have quotation marks that contain spaces, but we don’t want a quotation mark to appear on a new line. Therefore, it’s a good idea to add white-space: nowrap; to the before and after code above.
So far so good — except for Internet Explorer 6 and 7. With JavaScript / jQuery, we will use a method I learned from Stuart Langridge check if the browser has applied the quotes property to the document or not.
The IE version of accomplishing this is called currentStyle. The q variable is here the first occurrence of a q element in the document. We go through its properties in a for loop, just like we learned from Stuart.
if ( q.currentStyle ) {
for ( prop in q.currentStyle ) {
if ( prop == 'quotes' ) {
supportsQuotes = true;
break;
}
}
}In IE8, this script will find quotes in the applied properties, and we won’t have to add any quotation marks with JavaScript. More about that later. To be sure we won’t add quotation marks for other browsers, we would use a script explained by Peter-Paul Koch, using the getComputedStyle method. However, WebKit has a bug preventing this as a reliable method, we will simply have to assume that any browser recognizing the getComputedStyle function will add quotes without JavaScript…
else if ( document.defaultView.getComputedStyle )
supportsQuotes = true;Now we know if we need to add quotes with JavaScript or not. If we do, we’ll use some jQuery code. After grabbing the qs with $("q"), we go through the quotes, adding quotation marks. If the quote itself doesn’t have the lang attribute specified, it will go to the closest parent element with a lang attribute, until it gets to the document root.
lang = q.closest("[lang]").attr("lang").toLowerCase();In the jQuelements settings, we have previously specified a qMarks array for different languages, with a syntax similar to the CSS above:
qMarks['en'] = new Array('\u201D','\u201C','\u2018','\u2019');
qMarks['sv'] = new Array('\u201D','\u201D','\u2018','\u2019');This is what we will now get with the help of our lang variable and apply with some jQuery.
qMark = qMarks[lang];
if ( q.parents("q").length == 0 )
q.before(qMark[0]).after(qMark[1]);
else
q.before(qMark[2]).after(qMark[3]);There is some more code involved, obviously. You can download that, the CSS and more examples with different languages in my lab.