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
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
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
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.
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
DELelements. Therefore, to have it highlight the change would be as easy as changing the stylesheet.