Home/ Questions/Q 8493575
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T23:03:14+00:00

I am creating a little diff -/ offset display and I would like to

  • 0

I am creating a little “diff -/ offset” display and I would like to draw somekind of a “line” to certain places within the text, to visualize where a “diff” occured. Basically I want to get from this:

enter image description here

to this or something similar:

enter image description here

I know about the canvas element and I can draw lines with that, but how could I place such an image in the correct place?

Is there maybe a “easy” CSS solution for an approach like this one ?

Are there any best practices I can follow? For instance, any ToolTip plugin/script must use something similar to point to a certain place.

I’m thankful for any helping hint on this. The original link to my jsfiddle:
http://jsfiddle.net/bKng6/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’m not sure what is the expected behavior your application should do ( talking about the interaction with your end user ). you didn’t mentioned how cross-browser the solution would be. Any way, I don’t think pure CSS (also CSS3) would solve it without some JavaScript snippets. So, I would like to complement tucuxi and FelipeAls’s sugestions.

    Basically, about the line, some things to keep in mind during its development:

    • theres a lot of solutions to draw the line. As mentioned Canvas its can be a choice, but I’m sure it isn’t the simplier one.

    • the working example suggested by tucuxi was done through CSS annitations, what is a good choice, simplier than canvas, and can be improved to accomplish the same design proposed by FelipeAls’s.

    • If your expected visual interaction with the end user is near to FelipeAls’s suggestion a div with a 2px border width by default, plus both right and botton border width set to 0 will solve your line doubt. I’ve made working sample right here. On the proposed sample I’ve use DOM relative position to measure the correct line position. Although I did it using jQuery, you always will be able to do this in pure JS or another DOM based library as Mootools.

    I really hope it helps you.

    • 0