Styling Microformats: Vote Links

Posted
July 26 2005

Vote Links is a microformat that consists of three link types that can be applied to the (x)html rev attribute in order to indicate whether the author supports, opposes or is in indifferent about the remote source. A very valuable extension to the semantics of hyper links (whether they be a, link, or different), but with no visual indicator by default.


Markup

First, we need to look at the way the Vote Links are implimented, markup wise.

Unordered list

Let�s assume we have an unordered list (according to xoxo � another microformat) of which each item contains a link that uses one of the possible Vote Links values; vote-for, vote-abstain, and vote-against:

<ul class="xoxo">
<li><a href="http://www.example.com/" rev="vote-for">Alan Smithee</a></li>
<li><a href="http://www.example.com/" rev="vote-abstain">John Doe</a></li>
<li><a href="http://www.example.com/" rev="vote-against">Joe Black</a></li>
</ul>

Style

Secondly, we�ll style the links appropriately, using Cascading Stle Sheets (css).

Ballot boxes

When trying to visualize it, the first thing that comes into [my] mind are ballot boxes � a checked one for vote-for, a crossed one for vote-against, and an empty one for vote-abstain � that follow up the links.

As oftentimes, Unicode provides appropriate typographic representations; in this case BALLOT BOX (U+2610), BALLOT BOX WITH CHECK (U+2611), and BALLOT BOX WITH X (U+2612). In combination with a NO-BREAK SPACE (U+00a0), and some css generated content, my visualization can easily* be realized:

[href][rev="vote-abstain"]::after { content: ' 
ACJ

Comments

0 comments so far.

Comment

Identify
Remember Me?
Note
Markup allowed. Linebreaks and paragraphs are automatically converted. Email and ip addresses are logged but never shared with third parties. Comments are not moderated on opinion or use of language, but on relevance. I hate spam with a passion.