Axxlog

In “Big, Stark & Chunky” (Axxlog passim), I described a set of design guidelines authors could use to transform their multicolumn sites with small type into single-column sites with big (and usually reverse) type. The resulting site is more usable to low-vision people who blow up the screen display to a nice big size – and you avoid the disadvantages of “alternative” sites that aren’t updated as frequently as the main site. It still is the main site, merely with a different graphic design.

Now, how do we implement these zoom layouts?

Isn’t this a media type?

You can custom-write stylesheets for different media types, like screens or printouts. The whole topic of CSS media types is complicated. In CSS2.1, media types are understood as having properties of media groups. The groups are the superset and the types are the subset. You can view the entire grid of media groups and types.

It takes approximately forever to update and redefine CSS media groups, and almost as long for user agents like browsers to support them. As mentioned in the article, we don’t have a media type for zoom layouts. We don’t even have one for screen-reader layouts. That’s not gonna change for a while, if ever.

But we have a hack available to indicate to our browsers that a CSS file is intended for zoom layouts.

The link element

Of the many ways to include stylesheets in documents, the only one this technique works with is the link element. Here are some actual examples I use (with URLs simplified):

Regular or default style

<link rel="Stylesheet" href="fawnyblog-sans.css" type="text/css" media="screen" title="DEFAULT: Black background" />

Alternate style (one of many)

<link rel="Alternate Stylesheet" href="fawny-modular.css" type="text/css" media="screen" title="Script type" />

Print style

<link rel="Stylesheet" href="fawnyblog-mono.css" type="text/css" title="Printable stylesheet" media="print" />

In these constructs:

• Through the media attribute, the browser knows which format the stylesheet applies to (almost always screen or print).
• The browser knows you are linking to a Stylesheet.
• It knows that one of those links is to an Alternate Stylesheet.

Now, what does this rel="" business mean? It’s very imperfectly defined in the HTML spec, along with its conjoined twin, rev (edited; emphasis added):

rel

This attribute describes the relationship from the current document to the anchor specified by the href attribute.

rev

This attribute is used to describe a reverse link from the anchor specified by the href attribute to the current document.

Now, who the hell can understand that?

And how about this actual example from the HTML spec, which is all they give us to explain the whole thing?

The rel and rev attributes play complementary roles – the rel attribute specifies a forward link and the rev attribute specifies a reverse link.

Consider two documents A and B.

• Document A: <LINK href="docB" rel="foo">

Has exactly the same meaning as:

• Document B: <LINK href="docA" rev="foo">

Both attributes may be specified simultaneously.

Not at all an example of circular reasoning, is it?

In practice, rel and rev merely indicate link relationships in two directions. Or, if you prefer, they indicate two different relationships; you can, in fact, use anything you want for a rel or rev value: “Authors may wish to define additional link types not described in this specification.”

Smart people are already doing that, as with XFN and Technorati tags. So let’s do something similar.

A preference for running code

If we want to indicate that a stylesheet of media="screen" or ="projection" is also of the subtype zoom, we can use code like this:

<link rel="Alternate Stylesheet" href="fawnyblog-zoom.css" type="text/css" media="screen" title="Zoom layout" rev="zoom" />

Just add rev="zoom" to your link element.

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? That way we add to the repertoire of methods to activate such layouts:

1. A link or stylesheet-switcher on the homepage
2. A preference page
3. Selecting via Opera or Mozilla menu
4. Hitting a favelet in your toolbar

A really good favelet would open the zoomed layout in a new tab just to be safe. A Mozilla and/or Firefox extension could auto-open such a tab whenever you load a new page coded with link rev="zoom".

Why not use type?

The type attribute can be and is used within link, but the range of values is not open-ended and what it refers to is substantially different – the MIME type of the resource being referred to. So that one’s a no-go.

Indefensible violation of sacrosanct semantics?

Listen, the rel and rev attributes are so ill-defined in the specification, and so plainly intended for wide-open use according to that same specification, that I don’t see this as doing any harm. Maybe in 2008 we’ll be granted actual reader and zoom media types by the CSS Working Group (or, more likely, by WHAT TF), but I’m not keen on waiting.

I’m sure Tantek, Hixie, and T.V. Raman will disapprove. I am not sure they will be able to demonstrate that I’m misusing the holy and inviolable HTML specification.

It’s worth a try. Give it a whirl, why don’t you?

This entry was posted on Friday, January 14th, 2005 at 20:09 and is filed under Web accessibility. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.