Michael J. Hehir's Radio Weblog

Monday, February 9, 2004

JavaScript Image Gallery

Making an online gallery of pictures should be a quick process. The gap between snapping some pictures and publishing them on the web ought to be a short one. Here's a quick and easy way of making a one-page gallery that uses JavaScript to load images and their captions on the fly. [A List Apart: for people who make websites]

10:05:29 PM — permalink

Multivalued CSS class attributes

A reader named Jemisa wrote last week with this proposal:

Just another proposition for
...
Why not use
...
I know it's less "semantic" than your experimental attribute, but it might be useful (to style python code with different color than perl code for example)

This is a great idea which I at first completely failed to understand. My objections were twofold. On the CSS front, that you'd want to be able to style 'code' things independently of 'python' things. And on the XPath search front, that you'd want to be able to search independently.

But then Jim Roepke sent me the exact same proposal, and set me straight on the first point:

You can specify more than one class name in the class attribute.... you could say:
...
I don't know if your XPath stuff can handle that, but it's a valid way to specify the class of an element. In terms of CSS, both the code and python classes will be applied to the element.

OK. Now I finally get it. I can use XHTML like this:

import re
import sys
...

 

"..."

along with CSS like this:

blockquote.personQuote {
font-style: italic;
}
blockquote.StefanoMazzocchi:after {
content: 
  url(http://www.oio.de/public/web/stefano-mazzocchi.jpg)
}
pre.code {
border-style: solid;
border-width: thin;
padding: 10px;
}
pre.python:after {
font-weight: bold;
content: 
  url(http://www.python.org/pics/PythonPoweredSmall.gif);
}

This looks really promising. On the XHTML front, legal and even elegant. No extra namespace baggage. It's easy to write this way by hand, and tools that give people control over CSS styles could easily support this method if they wanted to.

On the search front, it's less than ideal. But the difference boils down to substring matching versus string equality. On a small corpus of XML content -- i.e., your own blog -- this won't matter, as I've already demonstrated to my own satisfaction. And on a larger corpus -- like the one I'm assembling now -- I'm presuming a database with indexing that can make a contains() query roughly as efficient as an equals() query.

Thanks, Jemisa and Jim! At the moment this looks like the winning strategy. I can't dive into this for a few days yet, but I'll watch for further feedback in case there's something else I've missed.

[Jon's Radio]

1:06:46 PM — permalink

Home