I wondered if there wasn’t a better, more “natural” way of visualising edits in a web page.
Obviously, <ins> and <del> are the weapons of choice for this, but I never really liked the default looks of it, because when I write something on a piece of paper and want to change it later I don’t cross out the old phrase with a ruler and set the color to grey, I just cross it out. And when I add something, there is usually no space left to write it. So I write it over the crossed out part.

And this is exactly the effect I was looking for, so I’ve devised a technique that tries to do just that, you can
download the whole package (CSS, sample HTML, and Images).

Be aware, however, that this technique has some shortcomings:

• You’ll need an extra <span> inside the <ins>
• The insert can wrap sometimes when the insert-text is too long and too near the end of the line
• You can’t currently use the insert without the delete

However, these issues might be solved at a later time.

Its tested and proven to work in FF3, FF2, Safari 3, Opera 9, IE7, IE6 (if you change the pngs to gifs).