In blog sites the blog owner allows visitors to comment on his blog post. If the site is local or regional like Somewherein, Amar Blog some visitors have tendency to put comment in their native language, on the other hand some visitors always put comments in english. There is a small problem when displaying the comments on the site. If the blog owner has a class for the div where all the comments will be displayed and define font-family for english language then bangla comments will be very difficult to see and vice-versa. So if we can dynamically detect the language of each comments and define separate classes for different language we can show the comments in appropriate way. Google Code provides an API to detect the language of content. We can use this for our purpose. Here i'll show a simple implementation to assign different DIV class for different Languages.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script src="http://www.google.com/jsapi?key=API_KEY"></script>
<script type="text/javascript">
google.load("language", "1");
function initialize() {
var text = document.getElementById("text").innerHTML;
// Detect the language of the text.
google.language.detect(text, function(result) {
var detected = document.getElementById("detected");
// If there wasn't an error in the request
if (!result.error) {
var langCode = result.language;
var langName;
// Loop through the languages enum so that we can find the actual name of the language.
// Learn about the languages enum here:
// http://code.google.com/apis/ajaxlanguage/documentation/reference.html#LangNameArray
for (var i in google.language.Languages) {
var thisLangCode = google.language.Languages[i];
if (thisLangCode == langCode) {
// If we find the language code, store the language name.
langName = i;
break;
}
}
// Se the detected language.
if(langName == "BENGALI")
{
document.getElementById("text").setAttribute("class", "bn");
}
else
{
document.getElementById("text").setAttribute("class", "en");
}
}
});
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div id="content">
<div id="text">share-facts.blogspot.com</div>
<div id="detected"/>
</div>
</body>
</html>
Here content of the DIV with id="text" will be examined then the class of that DIV will added accordingly.
Note: on line 5 API_KEY will be replaced by a valid API key.
