Google: Transliteration with Custom Control

With the AJAX Language API for Transliteration, you can enable transliteration on any textfield or textarea in you webpage. This will help your website users to type in any language using an English keyboard.

What is transliteration? Transliteration is the process of phonetically converting a word written in one script into another. Transliteration should not be confused with translation, which involves a change in language while preserving meaning. With transliteration, it is the sound of the words that are converted from one alphabet to the other.

This is an advanced example which shows how to create your own custom control to control the transliteration. It uses a checkbox for toggling between English and Hindi typing modes and a dropdown to change the destination language. It also registers event handlers for various events that can be raised by the Transliteration Control. See the API class reference for details on the possible events.



<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>

<script type=”text/javascript” src=””></script&gt;

<script type=”text/javascript”>

// Load the Google Transliteration API

google.load(“elements”, “1”, {

packages: “transliteration”


var transliterationControl;

function onLoad() {

var options = {

sourceLanguage: ‘en’,

destinationLanguage: [‘ar’,’hi’,’kn’,’ml’,’ta’,’te’],

transliterationEnabled: true,

shortcutKey: ‘ctrl+g’


// Create an instance on TransliterationControl with the required

// options.

transliterationControl =

new google.elements.transliteration.TransliterationControl(options);

// Enable transliteration in the textfields with the given ids.

var ids = [ “transl1”, “transl2” ];


// Add the STATE_CHANGED event handler to correcly maintain the state

// of the checkbox.




// Add the SERVER_UNREACHABLE event handler to display an error message

// if unable to reach the server.




// Add the SERVER_REACHABLE event handler to remove the error message

// once the server becomes reachable.




// Set the checkbox to the correct state.

document.getElementById(‘checkboxId’).checked =


// Populate the language dropdown

var destinationLanguage =


var languageSelect = document.getElementById(‘languageDropDown’);

var supportedDestinationLanguages =



for (var lang in supportedDestinationLanguages) {

var opt = document.createElement(‘option’);

opt.text = lang;

opt.value = supportedDestinationLanguages[lang];

if (destinationLanguage == opt.value) {

opt.selected = true;


try {

languageSelect.add(opt, null);

} catch (ex) {





// Handler for STATE_CHANGED event which makes sure checkbox status

// reflects the transliteration enabled or disabled status.

function transliterateStateChangeHandler(e) {

document.getElementById(‘checkboxId’).checked = e.transliterationEnabled;


// Handler for checkbox’s click event.  Calls toggleTransliteration to toggle

// the transliteration state.

function checkboxClickHandler() {



// Handler for dropdown option change event.  Calls setLanguagePair to

// set the new language.

function languageChangeHandler() {

var dropdown = document.getElementById(‘languageDropDown’);





// SERVER_UNREACHABLE event handler which displays the error message.

function serverUnreachableHandler(e) {

document.getElementById(“errorDiv”).innerHTML =

“Transliteration Server unreachable”;


// SERVER_UNREACHABLE event handler which clears the error message.

function serverReachableHandler(e) {

document.getElementById(“errorDiv”).innerHTML = “”;






<center>Type in Indian languages (Press Ctrl+g to toggle between English and Hindi)</center>

<div id=’translControl’>

<input type=”checkbox” id=”checkboxId” onclick=”javascript:checkboxClickHandler()”></input>

Type in <select id=”languageDropDown” onchange=”javascript:languageChangeHandler()”></select>


<br>Title : <input type=’textbox’ id=”transl1″/>

<br>Body<br><textarea id=”transl2″ style=”width:600px;height:200px”></textarea>

<br><div id=”errorDiv”></div>



The demo on the Custom Transliteration can view on the below URL,



  1. Nishant said,

    August 22, 2009 at 10:04 am

    Thanks a lot sir,
    This content is very useful.

    • rafeekphp said,

      August 25, 2009 at 5:40 am

      Hi Nishant,

      Thanks 🙂


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: