JavaScript library to type Hindi with international keyboards

Question

I am developing a website using HTML5 and AngularJS. I want to develop a site in Hindi language. One requirement is that the site should allow to enter text in the Devanagari alphabet even in devices that do not have the appropriate keyboard.

Time ago I hot-linked a Microsoft bookmarklet that's no longer available (http://ilit.microsoft.com/Bookmarklet/Script/Hindi.js) which would convert from English to Hindi: you type "kya" and then get the corresponding Hindi characters.

Can you suggest tools to do the same, using this or other system?

I don't know if you can speak Hindi but your profile says you're from India. Don't you just have keyboards in your country? I'm pretty sure the problem is clear in your mind but you must be aware that you haven't really explained it to us. — Álvaro González, Jan 27 '14 at 10:54
@ÁlvaroG.Vicario Im from India but I need to input hindi next in normal keyboard — Parvathy, Jan 27 '14 at 10:56
@ÁlvaroG.Vicario This is client's need not mine, they want to use normal keyboard and want to convert it from English to Hindi, see updated question — Parvathy, Jan 27 '14 at 10:59
"normal" means "non-Indian", doesn't it? Alright, that finally makes sense. — Álvaro González, Jan 27 '14 at 11:06
I've reworded your question to hopefully make it more clear; I apologise in advance if I've messed anything. While "help me find a library" kind of questions are technically off-topic, I think we can give this the benefit of the doubt. Also, are virtual on-screen keyboards acceptable or you're looking for a pure conversion tool? — Álvaro González, Jan 27 '14 at 11:19
BTW, a simple Google search shows that your resource has simply moved to http://www.bhashaindia.com/ilit/Hindi.aspx — Álvaro González, Jan 27 '14 at 11:23
@ÁlvaroG.Vicario for using that I have to install web or desktop version right? And its for windows. I am using linux — Parvathy, Jan 27 '14 at 11:32
Oh, I thought you had been using that in the past and wondered where it had gone. Feel free to edit the question and correct whatever I misunderstood. — Álvaro González, Jan 27 '14 at 11:34
@ÁlvaroG.Vicario I used it in past but that time I just needed to include the path(http://ilit.microsoft.com/Bookmarklet/Script/Hindi.js) , So I can use this for windows and linux. But this new site is not like that. — Parvathy, Jan 27 '14 at 11:38

score 2 · Accepted Answer · answered Jan 29 '14 at 06:33

Download code from http://www.gamabhana.com/?q=node/3

Extract downloaded folder. Now your folder have the following content enter image description here

gamabhana_js have all js files that you need. Open the index.html in browser and enter something in textarea. Then you can see corresponding Hindi fonts instead of English. You can edit that index file and use according to your need.

Following is a sample code that I edited If I click on hindi then I will get Hindi fonts instead of English

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>


<script language="JavaScript" type="text/javascript" src="./gamabhana_js/GA1000.js"></script>
<script language="JavaScript" type="text/javascript" src="./gamabhana_js/GA0010.js"></script>
<script language="JavaScript" type="text/javascript" src="./gamabhana_js/GA0640.js"></script>
<script language="JavaScript" type="text/javascript" src="./gamabhana_js/gamabhanaLib.js"></script>
<script language="JavaScript" type="text/javascript" src="./gamabhana_js/fileio.js"></script>
<script language="JavaScript" type="text/javascript" >
gw1=null;
var hindi=false;
function myCustomOnInit()
{   try{

if(hindi==true){
                  gw1= new gamabhanaPhoneticHandler("elm1_ifr",'__devanagari__','__roman__','#gamabhana#');
                  gw1.MrAutoCor=true;
                  GphRegisterForMasterUpdates(gw1);
}
     }
     catch(e){}
}

function LanguageList_onchange() {
gw1.SetPriLanguage(document.getElementById('LanguageList1').value);
}

function arrangekbhelp()
{
document.getElementById('kbhelpdiv').style.left=(window.document.body.clientWidth-400) + "px";
if((window.document.body.clientWidth-400)<0)
 document.getElementById('kbhelpdiv').style.left=0 + "px";
}
function hindi1(){
hindi=true;
myCustomOnInit();
}

function togglekbhelp()
{
arrangekbhelp();
if(document.getElementById('kbhelpdiv').style.display=='block')
   document.getElementById('kbhelpdiv').style.display='none';
else
   document.getElementById('kbhelpdiv').style.display='block';

return;
}
window.onresize=arrangekbhelp;

</script>



<!-- TinyMCE -->
<script type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
    tinyMCE.init({
        // General options
        mode : "textareas",
        theme : "advanced",
        plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

        // Theme options
        theme_advanced_buttons1 : "newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect,langselect",
        theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
        theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl",
        theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true,

        // Example content CSS (should be your site CSS)
        content_css : "css/content.css",
            oninit : "myCustomOnInit", 
        // Drop lists for link/image/media/template dialogs
        template_external_list_url : "lists/template_list.js",
        external_link_list_url : "lists/link_list.js",
        external_image_list_url : "lists/image_list.js",
        media_external_list_url : "lists/media_list.js",

        // Replace values for the template plugin
        template_replace_values : {
            username : "omkar",
            staffid : "9383"
        }
    });
</script>
<!-- /TinyMCE -->

</head>
<body>

<form>

<textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 80%">   </textarea>

</form>
<button onclick="hindi1()">Hindi</button>


</body>

</html>

good one.. but is there any library that can allow me to type in a particular in a particular language that you select? I'm using angular JS. any help would be appreciated — Shri, Feb 08 '16 at 05:57

JavaScript library to type Hindi with international keyboards

1 Answers1