Google
Transliterate
is used to transform a given written language into dozens of other scripts like
English to Russian, Chinese, Tamil, Hindi, Telugu and etc. Google
Transliterate
API provides the transliteration capabilities to websites.
It’s cross platform API that we can implement in any website. According to the
google Transliterate documentation Transliterate API can support almost
every browser.
Browser compatibility
Google
Transliterate API supports Firefox 1.5+, IE6+, Safari, and Chrome. The
Transliterate API can be loaded without errors in almost every browser, so you
can safely load it before checking for compatibility.
Load JavaScript
API:
First we have to include
following script to our webpage.
<script type="text/javascript"
src="https://www.google.com/jsapi">
Load Transliterate API:
Load
Transliterate API with three element, google.load(module, version, package)
Module: Specific API module we wish to use in our page
Version: Version number of the module
package: specifies the specific elements package you wish to load
// Load the
Google Transliterate API
google.load("elements",
"1", {
packages: "transliteration"
});
Specify Languages:
Here we have to specify languages need
to be transliterate to different scripts.
function onLoad() {
var
options = {
sourceLanguage:
google.elements.transliteration.LanguageCode.ENGLISH,
destinationLanguage:
[google.elements.transliteration.LanguageCode.TAMIL],
shortcutKey: 'ctrl+g',
transliterationEnabled: true
};
Create an instance on Transliteration Control:
//
Create an instance on TransliterationControl with the required
//
options.
var control
=
new
google.elements.transliteration.TransliterationControl(options);
// Enable transliteration in the textbox with id
//
'transliterateTextarea'.
control.makeTransliteratable(['transliterateTextarea']);
Calling the onLoad handler:
google.setOnLoadCallback(onLoad);
.setOnLoadCallback(callback) is a static function that registers the specified handler
function to be called once the page containing this call loads, where callback is a required function called when the
containing document is loaded and the API is ready for use (e.g., after onLoad).
Add Control:
<textarea id="transliterateTextarea"
style="width:600px;height:100px"></textarea>
Put it all
together:
<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.TAMIL],
shortcutKey: 'ctrl+g',
transliterationEnabled: true
};
//
Create an instance on TransliterationControl with the required
//
options.
var
control =
new
google.elements.transliteration.TransliterationControl(options);
//
Enable transliteration in the textbox with id
//
'transliterateTextarea'.
control.makeTransliteratable(['transliterateTextarea']);
}
google.setOnLoadCallback(onLoad);
</script>
</head>
<body>
<span> English to
Tamil </span><br>
<textarea id="transliterateTextarea" style="width:600px;height:100px"></textarea>
</body>
</html>
Reference:
https://developers.google.com/transliterate/v1/getting_started