Following on from the last post on adding inserted and deleted tags to Movable Type (or at least adding automation for them), I was having a bit more of a think about how to display that information on a site. While searching for info about online readability, I came across this thread on the WebAIM Forums from last year:

At present, there is no markup that you could use to indicate changes in any reliable way, except for mere insertions such as new material added. (And even for that only if it is not necessary to indicate it as inserted, since <ins> is not consistently supported, and even then probably with a style sheet rule that tries to make the rendering better. Internet Explorer uses underlining for <ins>, and this tends to create confusion with links. It’s probably best to use CSS to remove the underlining and to add a coloured dashed bottom border, or something.)

There’s a serious argument against <del>, <strike>, and text-decoration: line-through especially in situations where the “work”: the line through feature very often has the effect of making the text almost impossible or very difficult to read. Besides, although the line through probably conveys the idea of deletion to most people, many of us will be puzzled by the question what this really means. Is the user expected to read, or to be able to read, what has been deleted? If it has been deleted, why is it there at all?

Now, the issue of support for <del> & <ins> is pretty much a non-event these days, as just about every browser currently usedin use supports it (except for those people who still refuse to upgrade from NS4). But never the less, the other points Jukka makes are valid. Using underlines to denote inserted texts confuses readers as they just look like links. I chose to use a yellow tinged background because it’s similar to what Microsoft Word uses for showing insertions into documents. Also, I used to use a light grey strike-through text for deleted text, but that is very difficult to read. I still use strike-though now, but I’ve changed it to red. However, both of these changes don’t address the other issue, readability. For example, this is what a properly marked up, revised web page could look like

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed urna. Suspendisse eleifend porttitor felis. Etiam ullamcorper massa nec arcu. Proin sit amet urna. Nulla pretium risus aliquam ligula. In a elit. Cras aliquet pharetra leo. Pellentesque sit amet mi ut magna volutpat auctor. Mauris imperdiet eros tincidunt mi. Mauris ac lacus. Ut accumsan ligula eu odio dictum luctus. Quisque turpis lacus, vehicula sed, dapibus quis, fringilla quis, dolor. Mauris et lectus vitae lectus consectetuer sodales.

Pellentesque tempor. Mauris augue quam, eleifend sed, sollicitudin eget, mollis sed, elit. Sed purus. Nulla enim diam, consequat ac, lobortis sed, luctus eget, lacus. Donec quis lectus. In semper viverra arcu. adipiscing elit. Sed urna. Suspendisse eleifend porttitorDonec accumsan vestibulum enim. Vivamus aliquet, erat ac ultrices mollis, sapien orci volutpat neque, quis congue nisl massa nec arcu. Sed non magna vitae justo aliquam eleifend. In accumsan laoreet dolor. Mauris in nunc eget erat malesuada tristique. Curabitur dolor. Fusce tristique quam ac felis commodo pharetra. Nulla eu massa. Duis vitae libero. Vivamus lorem massa, aliquet non, luctus consequat, rhoncus eget, arcu. Suspendisse potenti. Curabitur ac metus nec magna vestibulum tristique.

Now, leaving aside the fact that lorem ipsum isn’t the easiest thing to read at the best of times, this is still not easy text to read, and it’s far from appealing from a design perspective either. So what to do? We want to have the intellectual integrity to correct our mistakes, but we also want to have a site that is readable & visually appealing. The solution is found in a little-used feature of HTML/CSS, that is, the alternate stylesheet. What we’re going to do is have the <del> tags hidden & have the <ins> tags just show up as normal text by default. Then give the user the ability to "turn on" the tags so that the revisions show up.

As a rule, this is what a standard stylesheet link in a HTML document looks like:

<link rel="stylesheet" href="/screen.css" media="screen" type="text/css" />

You can, however add alternate stylesheets, eg

<link rel="alternate stylesheet" href="/alternate.css" media="screen" type="text/css" />

Some browsers will actually detect this by default and give you a nice little menu to swap between them (Firefox does this, go get firefox!) But for everyone else, if you want to be able to switch between them there’s a little bit of javascript that can do it for you.

First you‘ll need to setup your normal css file, call it screen.css or something like that. The only change you’ll need to make to this file is to remove any style information related to the <del> & <ins> tags. Then you need 2 new stylesheets, default.css & displayrevisions.css (that’s what I called them, you can call them fish.css & chips.css for all the difference it makes). From the names you can probably guess what they’re for. default.css will be what will display normally when someone loads your site. In it you want to have this:

del {display:none;}
ins {text-decoration: none;}
#revisionslegend {display: none;}

That turns off the <del> tags and formats the <ins> tag like normal text. Then in the displayrevisions.css file, you’ll want something like this:

del {color: #FF0000; text-decoration: strike; display: inline;}
ins {text-decoration: none; background-color: #F5F5DC;}
#revisionslegend { display: inline; }

That will cause the tags to be displayed as they are in the lorem ipsum above. You can format it however you like. The #revisionslegend is for later, when we come to the switching mechanisim

Next, you need to add these to your HTML page. Basically you’ll need these three lines in the <head></head> section of your page(s):

<link rel="stylesheet" href="/screen.css" type="text/css" />
<link rel="stylesheet" href="/default.css" type="text/css" media="screen" title="Default Stylesheet" />
<link rel="alternate stylesheet" href="/showrevisions.css" type="text/css" media="screen" title="Show All Revisions" />

(This is of course assuming you put all your stylesheets in the root directory of your site)

Note, the titles on the last two link tags are important, as they allow us to identify the stylesheets & swap between them.

So far, this would be enough for users of Mozilla/Firefox as those browsers provide a menu to swap stylesheets by default. And tempting as it is to stop, there are enough people using Internet Explorer that we should give them an option too. So next I’ll show how to add a few lines of javascript to enable your readers to swap between stylesheets.