Type Over Words (Shadow Typing)

Question

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).

Answer 1

Make yourself a jQuery plugin. http://jsfiddle.net/ppuGL/

$.fn.typeOverText = function() {
    var $ = jQuery,
        $this = $(this);

    $this.addClass('type-over');
    $this.append('<input type="text" class="type-over-input">');

    return $this;
}

Some HTML:

<span class="text">Type over me</span>

Invoke the plugin:

$('.text').typeOverText();

And some CSS:

.type-over {
    position: relative;
    color: #ccc;
    display: inline-block;
    padding: 5px;
}

.type-over-input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    font-family: inherit;
    font-size: inherit;
    border: none;
    margin: 0;
    padding: 0;
    padding-left: inherit;
    padding-right: inherit;
}

.type-over-input:focus {
    outline: 1px solid #ccc;
}

Addendum

Inspired by brbcoding, here's another CSS-only idea. http://jsfiddle.net/trevordixon/ppuGL/1/

<span data-shadow-text="Type over me">
    <input>
</span>

<style>
[data-shadow-text] {
    font-family: sans-serif;
    font-size: 24px;
    position: relative;
    padding: 5px;
    display: inline-block;
}

[data-shadow-text]:before {
    content: attr(data-shadow-text);
    position: relative;
    color: #ccc;
    display: inline-block;
}

[data-shadow-text] input {
    position: absolute;
    left: 0;
    top: 0;
    background-color: transparent;
    font-family: inherit;
    font-size: inherit;
    border: none;
    margin: 0;
    padding: inherit;
    padding-left: inherit;
    padding-right: inherit;
    width: 100%;
}

[data-shadow-text] input:focus {
    outline: 1px solid #ccc;
}
</style>

Answer 2

I thought of a different solution, using just CSS and some cool html5 stuff.

HTML

<!--// first we create a container to hold our boxes //-->
<div class="container">
<!--// we will use divs instead of inputs with the contenteditable attribute set to true -->
<!--// we will also take advantage of the data-* attribute in html5 w/ content: attr(data-word) //-->
<div data-word="Foo" contenteditable="true"></div>
<div data-word="Bar" contenteditable="true"></div>
<div data-word="Baz" contenteditable="true"></div>
</div>

CSS

/* just some basic layout stuff, do what you want with this */
.container {
    position: relative;
    width: 100%;
}
div {
    position: relative;
    display: inline-block;
    width: 25%;
    z-index: 0;
}

/* absolutely position the pseudo-element :after so it sits right behind the div */
/* set the z-index to -1 so that we can type over it -- change the color as needed */
div:after {
    position: absolute;
    top: 0;
    left: 0;
    content: attr(data-word);
    z-index: -1;
}

DEMO