Webkoof

Mar 12 2009

Make a textarea Hindi transliterable

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.

<html>
  <head>
    <!-- Following line is necessary to include api -->
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">

      // 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);

    </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.

Note down id of your comment textarea in comments.php file of your theme. (say id=”comment”)
copy the lines between <head>and </head> in the script written above.
paste the copied code in header.php file of your theme, inside head section.
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.

If you like this post then consider subscribing to the Feed for receiving new posts. This entry was written by Vikash and posted on March 12, 2009 at 10:30 pm and filed under javascript. Bookmark the permalink. Follow any comments here with the RSS feed for this post.

4 Responses to “Make a textarea Hindi transliterable”

Peeyush Says:
August 9th, 2009 at 3:09 am
Great to know about your plugin, would be very useful for writing hindi blogs.

I have one query here –
The google transliteration tool types in a particular hindi font. Is it possible to change this font to some other hindi font.

Thanks,
Peeyush

[Reply]
arvind kumar Says:
October 31st, 2009 at 4:44 pm
plese explain in only hindi how cap create opening account

[Reply]
arvind kumar Says:
October 31st, 2009 at 4:47 pm
how can create account chart please explain only hindi on my email id soon if you are interested donot any comments

[Reply]
arvind kumar Reply:
October 31st, 2009 at 4:48 pm
@arvind kumar,

[Reply]

Make a textarea Hindi transliterable

4 Responses to “Make a textarea Hindi transliterable”

Leave a Reply