Drawing links among words in a web page

Question

I would like to know if something like this (see the picture above) is possible in HTML/CSS/Javascript and if so, what are the frameworks/technology that I should look at.

I have a text in a HTML page and I would like to highlight some words in it using different colours according to different meanings (let's say 3 types, 'name of software': blue, 'numbers': grey, 'name of people: 'red'). Then, an this is the tricky part for me, I would like to draw directed arrows among these highlighted words in a way that resizing the window will automatically keep anchored the arrows regardless to the changed position of the words.

Right now I am solving the highlighting part using a particular tag for the words to be highlighted and an ad-hoc CSS decorator with the property background colour accordingly set. The linking part is literally a mystery for me.

I thank you all for your help, michele.

PS. I would prefer doing that on the client side.

Answer 1

You need to do loads of JavaScript code for this but I will simply tell you the steps. To achive your goal you need to:

• parse every word in your paragraph by using split() method.

  var words = yourparagraph.split(" ");

• create an array that contains called name_of_software and push the software names in this array.

• do the very above thing for people names and call the array people_names .

  var name_of_software = ["html", "css", "javascript"];

  var people_names = ["michele", "george", "john"];

• create corresponding css for the highlightings.

  span.red { background: red; overflow: hidden; display: block; }

  span.grey { background: grey; overflow: hidden; display: block; }

  span.blue { background: blue; overflow: hidden; display: block; }

• Do a loop like this:

.

for(var i = 0; i < words.length; i++)
{
    if($.inArray(words[i].toLowerCase(), name_of_software)) {
        // The word is a name of a software. Give blue class.
    } else if($.inArray(words[i].toLowerCase(), people_names)) {
        // The word is a name of a person. Give red class.
    } else if(isNaN(words[i])) {
        // The word is a number. Give grey class.
    }
}

I didn't test it or create a working version of it. Hope this steps will guide you to achive your goal.