RSS
people
Mar 12 2009

Make a textarea Hindi transliterable

By | Filled under: javascript

Transliteration is not an unfamiliar word these days. When you write Hindi in roman script and it automatically converts in Devanagari, then the user of your application feels happy. Like google indic transliteration page or orkut scraps, you can make any textarea. All you need to know is about “Google AJAX Language API“.

Without much discussion, let’s see how this works. This is the minimal code required.

1
2
3
4
5

<html>
  <head>
    <!-- Following line is necessary to include api -->
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

      // Load the Google Transliteration API
      google.load("elements", "1", {
            packages: "transliteration"
          });
 
      function onLoad() {
        var options = {
          sourceLanguage: 'en',            //en for English
          destinationLanguage: ['hi'],    //hi for Hindi
          shortcutKey: 'ctrl+g',   //key combination to toggle between languages
          transliterationEnabled: true
        };
 
        var control =
            new google.elements.transliteration.TransliterationControl(options);
 
        // List all the IDs of textarea/textboxes below
        // These IDs should be present in HTML code
        var ids = [ "transl1", "transl2" ];
 
        control.makeTransliteratable(ids);
      }
      google.setOnLoadCallback(onLoad);
29
30
31
32
33
34
35
36
37

    </script>
  </head>
  <body>
  <center>Type in Hindi (Press Ctrl+g to toggle)</center>
    <br>Title: <input type='textbox' id="transl1"/>
    <br>Body:<br>
    <textarea id="transl2" style="width:600px;height:200px"></textarea>
  </body>
</html>

Right now transliteration is supported for Arabic, Hindi, Kannada, Malayalam, Tamil & Telugu. (Language codes: ar, hi, kn, ml, ta, te respectively).

If you want to write text in Malayalam instead of Hindi then only line 14 of above script will change as

14

      destinationLanguage: ['ml'],

Optionally we can also show a button control to toggle between English and the indic language. We just need to add one line in onLoad function of script.

25

      control.showControl('translControl');

How to enable Hindi writing in wordpress comment box?

We can use the same concept to make wordpress comment box transliterable in Indian languages. Only 4 simple steps.

  1. Note down id of your comment textarea in comments.php file of your theme. (say id=”comment”)
  2. copy the lines between <head>and </head> in the script written above.
  3. paste the copied code in header.php file of your theme, inside head section.
  4. replace the line var ids = [ "transl1", "transl2" ]; with id of your comment textarea. (var ids = [ "comment" ]; if ID noted in step 1 was comment)

Based on this concept, I have created a wordpress plugin which allows visitors to comment in Hindi. (Other languages to be added soon). Once you install the plugin, none of the steps are needed. Visit plugin page here.

3 Comments | Tags: , , , , , , , , , ,