Bangla with Google’s Transliteration API

For Alpona, a site I have been working on for most of June and July, I wanted to include support for Bangla without all the hassle that usually comes with it. Thanks to Google and a friend who introduced me to it, the transliteration API works magic in helping bring Bangla to Alpona.


There are only few things required for the API to work on the site. First, a reference to Google’s AJAX APIs and secondly add the or script calling to the API.

<script type="text/javascript" src=""></script&gt;
<script src="<%= Url.Content("~/Scripts/Custom/transliteration.js") %>" type="text/javascript"></script>

This script loads and activates transliteration on selected controls.

google.load("elements", "1", {
    packages: "transliteration"

function onLoad() {
    var options = {
        shortcutKey: 'ctrl+g',
        transliterationEnabled: true

    // Create an instance on TransliterationControl with the required
    // options.
    var control =
            new google.elements.transliteration.TransliterationControl(options);

    // For the given ids
    var ids = ["tinput", "tarea"];

    // Enable transliteration in the textbox/area of ids


All that’s left to do is assign the above ids to respective elements. Doing that should activate transliteration on the input controls. For example:

<input id="tinput" type="text" />


Google by default styles the controls that have transliteration applied on them. That of course, can be changed using CSS.


For Bangla to be rendered by the browser, an Unicode based font such as Boishkhi or Vrinda is required. On Windows systems, the transliteration and any Unicode Bangla content should render without issues but the Bangla fonts don’t render properly altogether in Mac OS X systems due to a bug in Apple’s Cocoa API’s Unicode rendering engine (as explained in Ekushey’s Mac FAQ).

Having done this, I am trying to implement transliteration on the server side since Alpona needs to be able to transliterate long, existing strings. It’s not something that is included in the API but there is an way around and I will be posting about it as soon as I am done.


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