slayeroffice - web experiments gone horribly awry

03.20.2005 - Show Titles Favelet

A lot of the sites I read on a daily basis have blogmarks -- a column of links to external destinations of things the site author finds of interest and assumes I might as well. Most of the links have fairly short text, and the site author will place an additional description in the title attribute of the anchor tag.

The value of the title attribute can be an explanation of why they are linking the item, who they saw it from first, etc, but its almost always of interest to me and often tells me if I want to click the link. However, I don't like having to physically move the mouse over the link to read the title value, and often times its too long and has been truncated by the browser so I can't read the entire thing anyway. So, here's a really simple favelet that will display the title attribute's value directly after the link:

Show Titles

The only trouble here is that this is going to show irrelevant titles (well, not irrelevant, just nothing we're interested in) like "Permanent link for this item" and things like that. That got me thinking about the rel attribute and Tantek Çelik's "Elements of Meaningful XHTML" presentation from SxSW.

In it, he talked about using the rel attribute as a means of better describing what a link is or its "relationship" to the refering document (thats what its for, after all). Examples of this are XFN and the "license" rel value. I would think that a rel of "blogmark" could be beneficial as well. It's Profile:


<dl class="profile">
 <dt id="rel">rel</dt>
 <dd><dl>
      <dt id="blogmark">blogmark</dt>
      <dd>Indicates that the referred resource is an item 
of unique interest to the author of the referring page.</dd>
 </dl></dd>
</dl>

First, this favelet would know to skip title attributes who's anchor elements aren't related to a blogmark. Second, it could go a long way towards a spider of some kind classifying an author's interests. You could even aggregate blogmarks pretty easily this way.

I suppose it could be argued that a rel value of "bookmark", as described by MSDN would work as well...but I don't see anyone using that. Anyhow, just a thought. Let me know of any problems you run into with the new favelet.

Unrelated: For anyone interested, my gaming rig is still dead. Hooking an alternate power supply up to the mainboard had no effect, so I've ordered a replacement board from a different manufacturer. Thanks to everyone that dropped by with suggestions on fixing it.

I don't think that's an appropriate use of rel. What you're saying with that construct is that the referred resource is the current page's "blogmark". It can be confusing, but think back to the linked style sheet example. Specifying rel="stylesheet" means *that* document is *this* document's style sheet.

There's really no way to assign the kind of meta info you're looking for here, so I'd just fall back to the class attribute, which, according to HTML 4.01, can be used "For general purpose processing by user agents."

Whatever that means.

But, the biggest drawback to using class is that, AFAIK, there's no way to assign any particular meaning to a given value via a profile.
Posted by kevin c smith on March 21, 2005 @ 8:43 pm


Cool favelet, btw.
Posted by kevin c smith on March 21, 2005 @ 8:44 pm
What I am saying is that the relationship of the linked resource to the current document is one of interest to the author. If its a question of wording in the definition, ok - or, do you think that "rev" is a better attribute? The semantics of the rev attribute are the opposite of rel.

Either way, I dont think that saying *that* document is of special interest to *this* document's author is an incorrect useage of the attribute.
Posted by Steve on March 21, 2005 @ 8:58 pm


Nah, 'rev' doesn't work at all. The illustration I keep in my head for 'rev' is adding 'rev="bibliography"' to a link in biblio.html that refers to a document which was built upon the works cited in biblio.html. (This doc is the bibliography for that doc.)

Regardless, you nail it when you mention that document being of interest to this document's *author*. The 'rel' attribute refers to the relationship between documents. It has no concept of an author.
Posted by kevin c smith on March 21, 2005 @ 9:15 pm


What about XFN then? It's entire purpose is to define the relationship of the author of document "a" to the author of document "b". You could almost say that it has no concept of a document.

Really, this concept is similiar to that - rather than saying "this is a friend of mine", this is saying "check this shit out - i think its especially cool".

It also gives the link some semantic meaning since most blogmarks dont appear within any kind of context other than that they exist as a link among other links. How do I know the difference between a link to site "A" in my sidebar that is always there and a link to site "B" in my blogmarks that is gonna get rolled off the page in a day or two? By defining that relationship in the "rel" attribute.
Posted by Steve on March 21, 2005 @ 9:48 pm


Well, I happen to think XFN is a bastardization of the 'rel' attribute ;)

Even if you buy into the notion that you are your URL (which I might yet - haven't decided), then 'met' still doesn't make sense.

What is this person to me? Is he a 'met'? Maybe 'friend', or 'acquaintance', but not 'met'.

Anyway, off to pick other nits...
Posted by kevin c smith on March 21, 2005 @ 10:02 pm


Ya know, as soon as I submitted that comment, it occurred to me that 'met' means 'person i have met', which makes sense, I guess.

Anyway, I need to think about all this in the context of being personified by my URL.
Posted by kevin c smith on March 21, 2005 @ 10:09 pm


Just wanted to duck back in here & clarify what the hell I thought 'met' meant: I was thinking In terms of the verb itself, not its subject.
Posted by kevin c smith on March 21, 2005 @ 11:44 pm
I did the same thing not too long ago. Only the bookmarklet imports a CSS file with...

*[title]:after { content: "- " attr(title); color:; margin:0 0 0 4px; padding:0 4px; background:#f1f1f1; }
Posted by France on April 2, 2005 @ 12:03 am


Comments have been closed for this post.