The Document Version Switcher
People handle web page updates in different ways. Some add extra text and bold it so people know it's been updated. Others use ins and del tags to highlight changes. Others couldn't be bothered, make their updates and move on.
Allow me to present a new approach: The Document Version Switcher. The premise is simple. A control on the page allows users to "go back in time" and view previous versions of a document.
To do this, any time we make a change to our document, we mark those changes up with the appropriate ins and del elements. We add a version class to each one so that we can track the changes over time.
Here's an example:
...pellentesque <ins class="ver1">turpis</ins>. Maecenas <del class="ver1">elementum</del> enim ut <ins class="ver2">sem</ins>. Sed non erat quis diam c...With our content marked up, we then use JavaScript and CSS to show and hide the different versions of a document. The JavaScript cycles through all the ins and del elements on the page and sets the display on or off based on the version number based through to our version switcher function.
See the code in action.
Future Enhancements
While this example does what I had intended it to do, it's not the most eloquent solution. There are a number of ways that this functionality can be improved:
- The function doesn't do any multi-class checking. Therefore, the version class has to be the first class in the list.
- I'd actually like to do away with using classes and instead, use the more semantically filled
datetimeattribute. The script could then dynamically build a control with a list of dates and times to revert back to. - Further to that last point, the function could accept any datetime parameter and display anything inserted or deleted up to that point.
When I have time, I'll look at turning this into a more solid solution.
Conversation
Awesome! When somebody once told me del and ins had their unrevealed tricks, I would never have thought of this. I might be using this soon.
Coo, I was going to sit down and write something very similar this week, although mine was to just show/hide inserts and deletes.
Kudos for a good description and implementation. :-)
Good stuff Jonathan.
Just thinking that for more static documents, you could probably just use CSS to hide/display content, and rely on stylesheet switching (either through browsers like Opera, or through JavaScript).
You can look into using the datetime attribute on the ins and del elements for control. It's probably necessary to use the classes for styling purposes, but for data handling the datetime should be very useful.
I was going to suggest you should use datetime... but you had already thought of it :)
Assuming when you edit a page, the ins elements all have the same datetime, so you can make versions for each unique datetime. Create a function to build a HTML index from that and you'll have a really cool version switcher!
Another thing you could do is changing the CSS rules for the classes, instead of all affected elements. You could also give the elements an id and use that id to retrieve them, so you have to do less matching.
Does this work well with overlapping changes? Good thing that ins/del are weird elements that are both block and inline, it makes things much easier.
Matt: the biggest dilemma would be having a newer insert inside an older delete. The
display:nonewould hide both elements. Although, one might wonder if such a thing is semantically correct. It doesn't make much sense to insert new content within a deleted section of text.Yes, this is a very good idea but here you are thinking about visitors only. There is nothing wrong with that, but we all know about the search engines that doesn't like hidden texts and this may be a reason search engines to penalize your page or the worst - your site.
I am not sure that this can gonna happen so I will appriciate if you test it and after several week check back if this page is cached by G.
After all this is again a great idea.
It's already tested and proven. Indeed hidden text is one of the most elements a search engine penalizes for.