beautifying text area using html and javascript

[mixand]

I am creating english to hindi transliteration webpage.Currently I have created two separate text areas (one where the user can type while other is read-only which shows 'what will become of the english word when user presses space or enter'I want to emulate like google transliteration tool webpage . That is , on-the-fly output should appear somewhere near the word being typed in the same user textbox (no need of read-only area).I am creating this webpage which should work offline.Please suggest ?Thank you , for listening.