Drawing arrows on an HTML page to visualize semantic links between textual spans

Question

I have an HTML page with some textual spans marked up something like this:

...
p50
...


        

Answer 1

If you don't need curved arrows, you could use absolutely positioned divs above or below the list. You could then use css to style those divs plus a couple of images that make up the arrow head. Below is an example using the icon set from the jQuery UI project (sorry about the long URL).

Here's the CSS to get things started:

Now we can start to assemble arrow divs. For instance, to style the arrow from "requires" to "promoter" in your example above, you could do left,bottom, and right borders on the div with and upward facing arrow graphic in the top left of the div.

The inline styles would be need to be applied by script after you figured out the locations of the things you would need to connect. Let's say that your list looks like this:

PromoterSomething ElseRequires

Then the following script will position your arrow:

Go ahead and paste the examples above into a blank html page. It's kind of neat.