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 datetime attribute. 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.

Published December 12, 2004 · Updated September 17, 2005
Categorized as HTML and CSS
Short URL: https://snook.ca/s/297

Conversation

9 Comments · RSS feed
Rob Mientjes said on December 13, 2004

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.

Richard@Home said on December 13, 2004

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. :-)

Cameron Adams said on December 13, 2004

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).

Andreas said on December 13, 2004

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.

Mark Wubben said on December 13, 2004

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.

Matt said on December 14, 2004

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.

Jonathan Snook said on December 14, 2004

Matt: the biggest dilemma would be having a newer insert inside an older delete. The display:none would 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.

Ivan said on August 07, 2006

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.

Mag said on August 30, 2006

It's already tested and proven. Indeed hidden text is one of the most elements a search engine penalizes for.

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.

Want to learn about scaling CSS for large projects?

I'm available for full and half-day workshops on scalable CSS architecture. I can provide on-site training for your team. Interested?
Get in touch.