Transliteration Using Google API

Posted By : Lovish Pahwa | 24-Nov-2017
 
There is an  API "GOOGLE TRANSLITERATE" provides by Google for text transliteration (not translation) and here i am going to explain that api so lets start,
 
Google Transliterate is an open source api and any one can use this api for transliterating the text from any one language to any other language.It comes with a very appropriate documentation and by following that anyone can use this api and here i am pointing out some important guidelines to use this API:-
 
JavaScript API Source :-
 
  <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
 
  where ever you are using GT API you have to include this source URL or you can dwonload the source and can put on your local
  This will load many apis of google having many packages in it.
 
Load Transliterate API :
 
 After including the api source in module, now its time to put the code which will load the google transliterate in your module
 By using method "google.load(module, version, package)" you can import your transliterate package.
 for example:-
 <script type="text/javascript">
   google.load("elements", "1", {
   packages: "transliterate"
   });
 </script>
 For more about google.load refer *https://developers.google.com/loader/*
 
Performing Transliteration :-
 
 Now after including source and load the transliterate package now you can start coding for transliteration.
 It also provides a mthod to check your browser that whether the browser supports transliteration or not and that method is:- google.elements.transliteration.isBrowserCompatible()
 
 Here you have two ways for transliteration:-
 
 a.) Simple transliteration
 b.) Transliteration by control
 
a.) Simple Transliteration:-
 
In this way transliteration happen on action performing and there is a method which to be called when you want to do transliteration.
   google.language.transliterate(wordsArray, srcLang, destLang, callback) 
 
Where:-
wordsArray refers to the text to be transliterated.
srcLang provides refers to language code of source lang. See the LanguageCode here https://developers.google.com/transliterate/v1/getting_started#LanguageCode
 
destLang refers to language code of destination lang. See the LanguageCode here https://developers.google.com/transliterate/v1/getting_started#LanguageCode
 
callback is the callback function that receives the result.
 
Result will be like:-
result = {
                error{
                          //Present if there was an error in transliteration.
                          code : ""
                         // An HTTP error code.
                         message : ""
                         //A human-readable string error.
                          }
                transliterations{
                                          //An array of size equal to the size of the input wordsArray.
                                         transliteratedWords : []
                                        //An array of maximum size 5, with transliterations for the corresponding word in //wordsArray.
                                        }
                }
 
example:- 
 
//Load the Language API.
google.load("language", "1");
 
//Call google.language.transliterate() 
google.language.transliterate(["Namaste"], "en", "hi", function(result) {
  if (!result.error) {
var container = document.getElementById("transliteration");
if (result.transliterations && result.transliterations.length > 0 &&
result.transliterations[0].transliteratedWords.length > 0) {
  container.innerHTML = result.transliterations[0].transliteratedWords[0];
}
  }
});
 
b.) Transliteration by control :-
 
This way enables you to do transliteration on runtime and by applying this approach your text field will be controlled by a control and which will watch your text field on every entry in it and when ever input occurs in that text field and on entering data when user pressed space bar then control will come there and fetch the input that just before the last space and trasnliterate that and replace the input with trasnliterated text.
 
    For instantiate control there is a method ".TransliterationControl(options)" where options is a json object having imp parametes for making control.
some are:
 
var options = {
sourceLanguage: 'en',
destinationLanguage: ['hi'],
shortcutKey: 'ctrl+g', // to toogle the transliteration
transliterationEnabled: true // by default set true (on runtime by ctrl+g it will get false)
}
    example :-
 
function onLoad() 
{
  var options = {
  sourceLanguage: 'en',
  destinationLanguage: ['hi'],
  shortcutKey: 'ctrl+g',
  transliterationEnabled: true
  };
 
  // Create an instance on TransliterationControl with the options
  var control = new google.elements.transliteration.TransliterationControl(options);
}
 
Tip:- In AngularJS you need to call this method in ng-init of text field.
 
Now here is an example to demonstrate the transliteration on a text area
 
<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">
 
  // 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
};
// checking compatibility of browser.
if (google.elements.transliteration.isBrowserCompatible()) {
// Create an instance on TransliterationControl with options.
var control = new google.elements.transliteration.TransliterationControl(options);
 
// Enable transliteration in the textbox with id "transliterateTextarea"
control.makeTransliteratable(['transliterateTextarea']);
}
else
{
document.getElementById('errorDiv').innerHTML = 'Sorry! Your browser does not support transliteration';
}
  }
  google.setOnLoadCallback(onLoad);
</script>
  </head>
  <body>
Type in Hindi (Press Ctrl+g to toggle between English and Hindi)<br>
<textarea id="transliterateTextarea" style="width:600px;height:200px"></textarea>
  </body>
</html> 
 
Thanks!

About Author

Author Image
Lovish Pahwa

Lovish is an experienced Manager with strong knowledge of Spring Framework, Play Framework, Java, Javascript, JQuery, AngularJs, and SQL. He is a great problem solver and always ready for new challenges.

Request for Proposal

Name is required

Comment is required

Sending message..