Language translation using JavaScript

In this blog, we are going to discuss how to enable language translation on websites.

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. <HEAD>  
  5. <TITLE>  
  6.  language transliteration  
  7. </TITLE>  
  8. <script type="text/javascript" src="http://www.google.com/jsapi"></script>  
  9. <script type="text/javascript">  
  10. google.load("elements",  
  11. "1", {  
  12.  packages:  
  13.        "transliteration"  
  14.      });  
  15. function onLoad() {  
  16. var options =  
  17.  {  
  18.   sourceLanguage:  
  19.   google.elements.transliteration.LanguageCode.ENGLISH,  
  20.   destinationLanguage:  
  21.   google.elements.transliteration.LanguageCode.KANNADA,  
  22.   shortcutKey:  
  23.    'ctrl+g',  
  24.    transliterationEnabled:  
  25.     true  
  26.   };  
  27.  var  
  28. control =  
  29. new  
  30. google.elements.transliteration.TransliterationControl(options);  
  31. control.makeTransliteratable(['transliterateTextarea']);  
  32. }  
  33. google.setOnLoadCallback(onLoad);  
  34. </script>  
  35. </HEAD>  
  36. <BODY>  
  37. <div class="base" align="center">  
  38. <TABLE class="standard"  width="1200">  
  39. <TBODY>  
  40. <TR>  
  41. <TD class="mainPanel">  
  42. <TABLE>  
  43. <TBODY>  
  44. <TR>  
  45. <TD vAlign="top"width="800">  
  46. <TABLE cellPadding="5">  
  47. <TBODY>  
  48. <TR>  
  49. <TD>  
  50. <form name="convarea" action="" ID="Form1">  
  51.  <table ID="Table2">  
  52.  <tr>  
  53.  <td align="center">  
  54. <textarea id="transliterateTextarea" style="width: 550px; height: 220px" name="DraftxData"></textarea>  
  55. </td>  
  56. </tr>  
  57.  <tr>  
  58.  <td style="color:Gray">  
  59. (Press  
  60. Ctrl+g to toggle between English and  
  61. kannada)  
  62. </td>  
  63. </tr>  
  64. </table>  
  65.  </form>  
  66.  </div>  
  67. </BODY>  
  68. </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 langauge 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 in 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.