An experiment with INS and DEL
In what, lately, is almost becoming a regular series, I've put together an experiment. This time in presenting INS and DEL.
If you've taken a look at the example, you'll notice that there are two shiny buttons that allow you to show and hide the insert and delete information embedded in the page. For those who aren't aware of the INS and DEL tags, they are used to indicate that changes have been made to the page after the fact. A good example of this would be those times where you made a typo in a blog post and go back to change it. You could mark it up using either the INS and DEL tags to let your readers know what was changed.
The default styling alone is fairly hum-drum. Normally, the INS is displayed with an underline and the DEL is displayed with a strikethrough. What I've done with the example is to loop through the document (using JavaScript), locate any changes and then create a new DIV within the page and copy the contents of the element into the DIV. A little CSS magic and things start to look alright.
These revisionary tags have two attributes: cite, for specifying a URL that would explain the revision, and datetime, for specifying when the change occurred. To actually make use of this information, I pull it out and insert it as part of my newly created element. Voila! Instant change tracking.
Conversation
Nice Work, I could also see this being used with the Fade Anything Technique to just fade the insert/delete blocks from red/green to plain text. Your markup does give some functionality that reminds me of the track-changes feature in Word. Now if you could manage those pesky red lines you'd have made it
;-)
The link: Fade Anything Technique
You might want to show which text changed in the document as well... make it bold or something.
Mark: That would be extremely easy to implement. One thing that I didn't go into any detail on was the actual implementation. To expand on that now, when looping through all the elements, I apply a class to the
INS/DELelements. Therefore, to have it highlight the change would be as easy as changing the stylesheet.