Placing words directly under or above other words

Question

I wish to do the following within div tags:

The words will be coloured differently using spans.

I will be given some text in a text box and via JavaScript I will need to dynamically update to div to show something like the above.

What is the best way to do this?

Will it involve a monospaced font?

Will it involve writing "hidden" text?

I wish to do entire paragraphs in this manner.

This might seem weird but the research I'm doing requires me present certain words from a given text with multiple colours and I think this might be a nice way of conveying this information.

Updating the text in the text box will update the following variables, and in turn I will need to convert these two variables into something like the image above.

text = "I am under the text above me and there is lots more text to come./n I am even moving onto a new line since I have more text"

color_per_word_position =  {0:green, 1: red, 2: cyan, 4: yellow, 5: red, ...}

Answer 1

You will have to use a monospaced font for this.*

I basically see two options: 1. use whitespace 2. margins.

Option 1

Your text will look like

I•am•under•the•text•above
••am•under•••••text•above

where • denotes a space character. Pretty straight-forward in terms of CSS, since you don't have to worry about the spacing. The browser does it all for you. Example: http://jsfiddle.net/PYXdr/

*_{well, it may be possible with any font, using a lot of JS, but I guess it's not worth it.}

Option 2

Since you probably don't want whitespace in between your spans, you may prefer this:

I•am•under•the•text•above
  am•under     text•above

Now, the spacing needs to be taken care of manually. Each span should get a margin-left that pushes it to the desired position. But before we can do that, we need to know the width of one character (using JS, since CSS does not provide that). Okay, pretty easy:

var el = document.createElement('pre');
el.style.display = 'inline-block';
el.innerHTML = ' ';
document.body.appendChild(el);
var width = parseFloat(getComputedStyle(el).width);
document.body.removeChild(el);

Now let's go ahead and move the spans:

span1.style.marginLeft = (2 * width) + 'px';
span2.style.marginLeft = (5 * width) + 'px';

Example: http://jsfiddle.net/JC3Sc/

Putting it all together

Now here's a basic example of how this might work:

var text = "I am under the text above me and there is lots more text to come.\nI am even moving onto a new line since I have more text"

var highlightBorders = [[2, 3, 4, 6], [6, 7]]; // YOUR TASK: implement the logic to display the following lines

var color_per_word_position =  {0:'lime', 1: 'red', 2: 'cyan', 3:'orange', 4: 'yellow', 5: 'red'}

/* generate CSS */
var style = document.createElement('style');
for (var i in color_per_word_position) {
    style.innerHTML += '.hl' + i + '{background:' + color_per_word_position[i] + '}';
}
document.head.appendChild(style);


/* generating the text */
text = text.split('\n');
var pre = document.createElement('pre');
text.forEach(function (line, i) {
    var div = document.createElement('div');
    var words = line.split(' ');
    var result = [];
    highlightBorders[i].forEach(function (len, j) {
        var span = document.createElement('span');
        span.innerHTML = words.splice(0, len).join(' ');
        span.className = 'hl' + j;
        if (j) {
            span.style.marginLeft = width + 'px' // YOUR TASK: implement the logic
        }
        div.appendChild(span);
    });
    pre.appendChild(div);
});

document.body.appendChild(pre);

This is not a complete solution, since a) I don't really see which parts exactly you want to highlight and b) I don't want to spoil all the fun. But you get the idea.

Example: http://jsfiddle.net/tNyqL/