Placing words directly below or above other words

Question

I want to do the following in div tags:

Words will be colored differently using span s.

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

What is the best way to do this?

Will it include a monospace font?

Will this be related to writing "hidden" text?

I want to make whole paragraphs this way.

This may seem strange, but the research that I am doing requires that I present certain words from a given text with several colors, and I think that this can be a good 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

To do this, you need a monospace font. *

Basically I see two options: 1. use spaces 2. fields.

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 distance. The browser does everything for you. Example: http://jsfiddle.net/PYXdr/

* _{Well, it is possible with any font using a lot of JS, but I think it is not worth it.}

Option 2

Since you probably don't want spaces between your intervals, you might prefer this:

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

Now you need to reflect on the interval manually. Each range should receive margin-left , which pushes it to the desired position. But before we can do this, we need to know the width of one character (using JS, since CSS does not provide this). Ok, 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 release and move the gaps:

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

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

Putting it all together

Now here is 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 really don’t see which parts you want to highlight, and b) I do not want to spoil all the fun. But you have an idea.

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

Answer 2

The use of additions is possible, but also has absolute control, assigning text to the selector, for example, "p" for the class: fiddle http://jsfiddle.net/3NDs3/1/

  .one { width:200px; } .one p { font: normal 14px Futura, sans-serif; text-align:left; padding-left:130px; } .two { width:200px; } .two p { text-align:center; font: normal 14px Futura, sans-serif; } .three { width:200px } .three p { text-align:left; font: normal 14px Futura, sans-serif; padding-left:35px; } <div class="one"> <p>above me</p> </div> <div class="two"> <p>i am under the text above me</p> </div> <div class="three"> <p>under</p> </div>