It’s dangerous to go alone

HTML version of Starcruiser Anonymous

By Dave Menendez
Thursday, September 25, 2003, at 1:52 AM

Starcruiser Anonymous, the critically-acclaimed tale of a spaceship, a planet, an empire, a robot, a student of heroism, and the most dangerous Mexican meal in the universe (among others), is now available in HTML. You might be tempted to ask, as I have, why I would bother to do this, rather than work on a current project, such as Out of Space. I guess it’s just one of those things.

Also new is a synopsis of the series, which attempts to retell the story in a highly-condensed form. I originally started writing it for my own use, but somewhere along the line it became a more general-audience document. I suppose it could be useful for people reading Out of Space who haven’t read SA recently—or at all—but I know the stories well enough that I don’t feel I’m a good judge on that score. Anyway, it’s available. Enjoy.

The HTML version of SA marks my most ambitious use of CSS in presenting fiction. As a result, it requires a fairly recent browser to get the full effect. (That is to say, Netscape Navigator 4.0 really isn’t gonna do it.) The big trick is the way I indicate scene breaks. I typically use a system of major and minor scene breaks, indicated by a trio of asterisks and a blank line, respectively. In the past, I’ve specially marked the first paragraphs of scenes to create the blank lines and included the asterisks explicitly. In this new version, scenes are contained in div elements, and the style sheet adds the blank lines—and the asterisks.

Generated content. It’s a good thing.

Other tricks involve the use of text-transform to create most of the all-caps text. The series title, for example, is given in mixed case in the original documents and transformed into all-caps by the style sheet. Shouting is also normal mixed-case which is transformed to all-caps for the display. (I had originally intended to use small-caps, but the lack of support in Safari killed that for me. Of course, that will be easy to change once Safari gets better support.) Shouting also marks the first time I’ve used strong to actually indicate strong emphasis, which feels like a nice milestone.

One trick I reluctantly decided against was using q elements to indicate quotations. None of the browsers support CSS’s rules about nested quotes well enough to make it worth it. It’s a pity, really, because I currently have to do stuff like:

<i class="alt-quote">“My voice is electronically filtered!”</i>

When I’d really rather be doing something like:

<q class="alt">My voice is electronically filtered!</q>

(And yes, “electronic” would be a better class name than “alt” or “alt-quote”, but it’s late in the day.) The place where this really becomes useful is when quotes interact with other elements that are traditionally indicated with quotation marks, such as the titles of songs, articles, and short stories. Currently, you’d have to code them as:

“We sang ‘Ain’t she sweet?’”

But it’s more useful to be able to code it:

<q>We sang <cite class="song">Ain’t she sweet?</cite></q>

Note in particular that this technique would make it impossible to confuse an apostrophe with a right single quote. Sadly, it will have to wait until someone actually gets decent support for the CSS quote rules.

I also had some uncertainty about including acronym expansions, since providing the meaning of EDIT too early would spoil the joke. I eventually decided to leave it unadorned in the earlier parts of the story and provide the expansion later. I think anyone who knows what the EDIT is unlikely to forget it, but I figured I might as well be nice. It’s just a search-and-replace, after all.

Anyway, this is something I’m always interested in learning more about, so I’d love to hear any suggestions, comments, bug reports, or questions. Just drop me a line or leave something at the message board.