Convert English Text Into Hindi Using Google Transliterate API

by Posted on

If you want to add english/hinglish to hindi converter text editor on your website then in this post i’ll show you how to quickly add a simple html textarea which convert english words into hindi words. It is helpful if someone not familiar with hindi typing. In that case you can add english to hindi typing editor on your website so that your user can write in hinglish and save text into hindi.
Note: Google Transliterate API V1 deprecated now but still work well for some languages.

Libraries

Include the Google Transliterate library on page.

<script type="text/javascript" src="https://www.google.com/jsapi">

HTML

create simple HTML textarea where user type in english/hinglish and while pressing space key it convert text into hindi.

<textarea id="english2hindi" style="width:600px;height:200px"></textarea>


JS

Now Load the Google Transliterate API

google.load("elements", "1", {
            packages: "transliteration"
          });
 
      function onLoad() {
        var options = {
            sourceLanguage:
                google.elements.transliteration.LanguageCode.ENGLISH,
            destinationLanguage:
                [google.elements.transliteration.LanguageCode.HINDI],
            shortcutKey: 'ctrl+g',
            transliterationEnabled: true
        };

You can also set shortcut key to toggle between English and Hindi.

google.load("elements", "1", {
            packages: "transliteration"
          });
 
      function onLoad() {
        var options = {
            sourceLanguage:
                google.elements.transliteration.LanguageCode.ENGLISH,
            destinationLanguage:
                [google.elements.transliteration.LanguageCode.HINDI],
            shortcutKey: 'ctrl+g',
            transliterationEnabled: true
        };

Create an instance on TransliterationControl with the required options and Enable transliteration in the textbox with id.

var control =
            new google.elements.transliteration.TransliterationControl(options);
            control.makeTransliteratable(['english2hindi']);
      }
      google.setOnLoadCallback(onLoad);

Here is the complete file look like this.

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="https://www.google.com/jsapi">
    </script>
    <script type="text/javascript">
      google.load("elements", "1", {
            packages: "transliteration"
          });
 
      function onLoad() {
        var options = {
            sourceLanguage:
                google.elements.transliteration.LanguageCode.ENGLISH,
            destinationLanguage:
                [google.elements.transliteration.LanguageCode.HINDI],
            shortcutKey: 'ctrl+g',
            transliterationEnabled: true
        };
        var control =
            new google.elements.transliteration.TransliterationControl(options);
        control.makeTransliteratable(['english2hindi']);
      }
      google.setOnLoadCallback(onLoad);
    </script>
  </head>
  <body>
 
    <textarea id="english2hindi" style="width:600px;height:200px"></textarea>
 Press Ctrl+g to toggle between English and Hindi
  </body>
</html>

See live demo

DEMO

Published by admin