In his presentation at @media, Joe Clark set CSS designers a homework challenge, the same one detailed in his article on A List Apart: offer a high-contrast, large text version of your site.
Roger and Douglas have already implemented some zoom layouts on their sites and very nice they look too.
The big problem that Joe identified was one of labelling. Even when zoom layouts are provided, there’s no clear way to unobtrusively offer the high-contrast alternative.
In an earlier blog entry, Joe created a new microformat by using rev="zoom" in a <link> tag.
"But only Opera and Mozilla, among widely-used alternative browsers, let you select stylesheets by name. And that name is taken from the title attribute, if present. Every other browser hides the available list of stylesheets from you. On the surface, then, this miraculous development I am proposing is of limited use. But what if somebody wrote a favelet that automatically turns on a zoom layout if one is available?"
I thought I’d give it a shot. Drag this link to your toolbar:
Here’s what happens when you use that link: it runs through all the stylesheets on offer and disables any of them that don’t have the rev attribute set to "zoom". This means that if a zoom layout isn’t offered, all the linked stylesheets will be disabled. At first I thought that this would need to be changed, but actually it could be a feature rather than a bug: disable all linked stylesheets and activate the zoom layout if one exists.
The problem is, there’s no way of preserving state with a simple JavaScript link. That means the bookmarklet would need to be activated on every page.
Clearly, this isn’t an ideal solution but I thought it would be fun to offer it anyway. If nothing else, it’s making use of a microformat: no committees, no specifications, just an agreed use of semantics.
I’ve added a simple zoom layout to this site, so you can test the bookmarklet here. I need to refine the CSS and add it to the list of themes on offer but for now, it’s a proof of concept.