Implementing multi-language HTML quotes

Spreading globalization has fostered a degree of international flexibility that’s raised the probability of a benign resolution to the U.S. current- account imbalance, Mr. Greenspan said in the article, Mine.

L’adoption unanime de la Charte par l’Assemblée nationale en 1975 signifiait l’affirmation de valeurs, comme la dignité, la liberté, l’égalité et la démocratie, dans le contexte politique, économique et démographique de l’époque, explique M. Pierre Marois, président de la Commission.

Explanation

The one HTML element the browsers have difficulty dealing with is q. Mozilla and Opera are able to add styled quotation marks (using slightly different implementations) automatically. By specifying the language of the q’s ancestor, you can also serve up the language specific quote (the following follows North American style):


q { quotes: "\00201C" "\00201D" "\002018" "\002019"; }

*:lang(en) q>q { quotes: "\002018" "\002019"; } /*For Mozilla versions from before summer 2004, hidden from Opera*/



*:lang(fr) q { quotes: "\0000AB" "\0000BB" "\002039" "\00203A"; }

*:lang(fr) q>q { quotes: "\002039" "\00203A"; } /*For Mozilla versions from before summer 2004, hidden from Opera*/

Internet Explorer does not do this, unfortunately, and requires JavaScript which can be “hidden” from other browsers using conditional comments. This simple script will add language-specific quotation marks around all qs on a page:


<!--[if IE]>

<script type="text/javascript">

   var d = document; 


		 
onload = function(){

   var qs = d.getElementsByTagName("q");

   quoteIt(qs,"en-ca");

} 


		
function quoteIt(qs,lang){	 

   var x,v,q;

   var qEn = ["\u201C","\u201D","\u2018","\u2019"]; //North America style

   var qFr = ["\u00AB","\u00BB","\u2039","\u203A"];

   if(lang.indexOf("en")!=-1) { q = qEn } 

   else if(lang.indexOf("fr")!=-1) { q = qFr }

   for(x=0;qs.length>x;x++){

      (qs[x].parentNode.nodeName!="Q") ? v = 0 : v = 2;

      qs[x].insertBefore(d.createTextNode(q[0+v]),qs[x].firstChild);

      qs[x].appendChild(d.createTextNode(q[1+v]));

   }

}	

</script>

<![endif]-->

Implementing multi-language HTML quotes

Sample

Explanation