I am currently working on a project that deals with language learning (ie; German, Chinese, etc...) there is one function in particular that we are having issues with - in short, we are trying to display "ghost" text (very faint grey) and allow the user to type over this text.
The project will have several thousand different sentences to type, so generating some sort of dynamic 'edit in place' is ideal.
I assume this will be best done via Javascript of some sort?
We currently have implemented a system that uses typical HTML forms, overlaid ontop of the text the user should then repeat-type. Forms being manually positioned via CSS and crude. I've attached a picture below to give an idea of what we currently have (3 manually coded and placed HTML forms laid over static text).
Make yourself a jQuery plugin. http://jsfiddle.net/ppuGL/
Some HTML:
Invoke the plugin:
And some CSS:
Addendum
Inspired by brbcoding, here's another CSS-only idea. http://jsfiddle.net/trevordixon/ppuGL/1/