Post
Ask Question

Language translation using JavaScript

Introduction

 
In this blog, we are going to discuss how to translate languages on websites. Sometimes we need to save data in local languages instead of English. In cases such as these, we need to give an option for the user to type in local languages. We can achieve this using the Google Transliteration API.
 
First, create an HTML file, then write the code shown below
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0    
  2. Transitional//EN">  
  3. <HTML xmlns:o>  
  4.   
  5.      <HEAD>  
  6.           <TITLE>  
  7.                language transliteration  
  8.           </TITLE>  
  9.           <script type="text/javascript" src="http://www.google.com/jsapi"></script>  
  10.           <script type="text/javascript">  
  11.           google.load("elements",  
  12.                "1", {  
  13.                     packages: "transliteration"  
  14.                });  
  15.   
  16.           function onLoad() {  
  17.                var options = {  
  18.                     sourceLanguage: google.elements.transliteration.LanguageCode.ENGLISH,  
  19.                     destinationLanguage: google.elements.transliteration.LanguageCode.KANNADA,  
  20.                     shortcutKey: 'ctrl+g',  
  21.                     transliterationEnabled: true  
  22.                };  
  23.                var control = new google.elements.transliteration.TransliterationControl(options);  
  24.                control.makeTransliteratable(['transliterateTextarea']);  
  25.           }  
  26.           google.setOnLoadCallback(onLoad);  
  27.           </script>  
  28.      </HEAD>  
  29.      <BODY>    
  30. <div class="base" align="center">    
  31. <TABLE class="standard"  width="1200">    
  32. <TBODY>    
  33. <TR>    
  34. <TD class="mainPanel">    
  35. <TABLE>    
  36. <TBODY>    
  37. <TR>    
  38. <TD vAlign="top"width="800">    
  39. <TABLE cellPadding="5">    
  40. <TBODY>    
  41. <TR>    
  42. <TD>    
  43. <form name="convarea" action="" ID="Form1">    
  44.  <table ID="Table2">    
  45.  <tr>    
  46.  <td align="center">    
  47. <textarea id="transliterateTextarea" style="width: 550px; height: 220px" name="DraftxData"></textarea>    
  48. </td>    
  49. </tr>    
  50.  <tr>    
  51.  <td style="color:Gray">    
  52. (Press    
  53. Ctrl+g to toggle between English and    
  54. kannada)    
  55. </td>    
  56. </tr>    
  57. </table>    
  58.  </form>    
  59.  </div>    
  60. </BODY>    
  61. </HTML>     
Please run your HTML file in a browser and in the text area, type something in your destination translation language. In this example, my target translation language is "Kannada." Therefore, I will type "Hello C# Corner" and it will reflect in the Kannada language. Please check the below snapshot
 
 
Let's try with the Hindi language. To do this we need to set the destination translation language as Hindi. Please check the below code snippet that I am changing 
  1. function onLoad() {    
  2. var options =    
  3.  {    
  4.   sourceLanguage:    
  5.   google.elements.transliteration.LanguageCode.ENGLISH,    
  6.   destinationLanguage:    
  7.   google.elements.transliteration.LanguageCode.HINDI,    
  8.   shortcutKey:    
  9.    'ctrl+g',    
  10.    transliterationEnabled:    
  11.     true    
  12.   };    
After saving the above changes, please run your HTML file and type "Hello C# Corner." It will be translated into Hindi. Please check the below snapshot
 
 
You can now enable Indian language typing in websites. It will support all major Indian regional languages.
 

Summary

 
In this blog, we discussed how to enable Indian language typing on websites. I hope it's helpful.
 
Eat->Code->Sleep->Repeat. 
Next Recommended Reading Get And Set Variable Values From One JavaScript File To Another JavaScript File Using Local Storage