Dynamically detect Language and add CSS accordingly

by Noman Muhammad

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.

Filed under 1 comments

Simple cURL example using PHP

by Noman Muhammad

cURL library allows us to connect to different servers using a variety of protocols. This is used for transferring files with URL syntax. In most of the cases we use cURL to display a specific portion of another site in our site. By using cURL at first we retrieve the contents of the site that we targeted and then parse the retrieved contents to show the specific portion using preg_match(). Here I'll show a simple example to retrieve and show the stock market price in my site from Yahoo!. At first I have to open Yahoo! in my browser. Then view the source of the page and identify that the stock market price is shown in between <dl class="markets clearfix strong small"> and </dl>. So this is my targeted portion. I'll use this tag to excerpt my targeted portion from the total contents. Full code is as follows:


<html>
<head>
<title>cURL Example</title>
</head>
<body>
<div style="margin-left:30px">
<?php
//URL of targeted site
$url = "http://m.www.yahoo.com/";
$ch = curl_init();

// set URL and other appropriate options
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

// grab URL and pass it to the browser

$output = curl_exec($ch);

//Regular expression to excerpt the targeted portion
preg_match('/<dl class="markets clearfix strong small">(.*)<\/dl>/is', $output, $matches);
echo $matches[0];

// close curl resource, and free up system resources
curl_close($ch);
?>
</div>
</body>
</html>


Very simple, isn't it? Now by using our own css we can show the data in our own way.

Filed under , 0 comments
Newer Posts Older Posts