Typography and Microformats: adding small-caps to your state abbreviations

Robert Bringhurst’s book The Elements of Typographic Style: Version 4.0: 20th Anniversary Edition [Paperback]The Elements of Typographic Style is overwhelming me with typography details. Today I came across a description of using small caps for abbreviations, which inspired me to come up with this snippet for state abbreviations.

For abbreviations and acronyms in the midst of normal text, use spaced small caps

Many typographers prefer to use small caps for postal abbreviations (San Francisco, CA, 94119, and for geographical acronyms longer than two letters. Thus, the USA, or in Spanish, los EEUU, and Sydney, NSW.
The Elements of Typographic Style – Robert Bringhurst page 48

Continue Reading Typography and Microformats: adding small-caps to your state abbreviations

Yahoo Search Monkey in Paris

The Yahoo! Developer Network recently held an event in Paris to introduce SearchMonkey to local developers. I was on hand to help discuss microformats. I’ve got a brief write up of the event on the YDN blog: SearchMonkey in Paris.


SearchMonkey allows developers to create enhanced search result presentations for a web site. These appear when a user installs the easy to create application and then does a search query that provides the module as part of the normal search result.

Yahoo provides microformatted data to the SearchMonkey application at run time. This allows the developer to add great content while still building a very quick application. I’ll write more on this later as I think it is a great usage of Microformats at the user level instead of the developer level.

Beyond SearchMonkey, it’s great to know that search engines really are paying attention to this data. You’ll learn a lot about your site and its microformats as you build your first SearchMonkey application. Give it a try, it shouldn’t take you more than an hour to put together your first application.

La Cantine and the Paris Developer Scene

The event was held at a great space: La Cantine. This is a cross between a cafe and cooperative space for startups to use as an office, meeting space, and development center. It was a pleasure to meet the large crowd that turned out for the night.

Adding style to your rel attributes with CSS

View the finished example: Adding style to your rel link.

There’s a little attribute in HTML links that is starting to get a bit of attention lately. The “rel” attribute is a sparsely defined attribute that applies some meta information about a link’s relationship to other documents. Unfortunately, this information is usually hidden from your users. Let’s take a light-hearted stab at turning it into a visual element.

Rel attribute usage

While the W3C originally considered the rel attribute to describe the relationship of pages to each other, i.e. next, previous, directory, and start. The attribute has been adopted by the Microformat community for its inherit usefulness. The rel attribute is now used for tags, to define your relationship to someone, and even to tell search engines not to bother following a link.

The opportunities to use the rel attribute are seemingly endless. There are more proposals to define people you don’t like and links for voting.

But all of this flexibility comes at a small price. To remain valid, you need to tell the browser what these new rel values may actually mean. This is handled by linking to appropriate profiles. Just simply insert the profiles into your head tag. Multiple profiles may throw a validation error, but it’s ok. You don’t need to do this for the standard rel values.

We will be using the CSS3 attribute selector functionality to look at the value of the rel attribute and apply some style accordingly. First we’ll add some padding and a background image to any link that has a rel attribute. We’ll then use background positioning to display an icon that is appropriate for the link. It’s a fairly simple hack.

For more information on using attribute selectors, check out my previous posts:

Sample HTML Code

  • This link is ignored by search engines (rel="no-follow")
  • (rel="tag")
  • Sample CSS

    a[rel] {padding-left:20px; background:url(rel-sprite.png) no-repeat 0 0; }
    a[rel~="help"] {background-position: 0 -350px ;}
    a[rel~="license"] {background-position: 0 -1347px ;}
    a[rel~="no-follow"] {background-position: 0 -1200px ;}
    a[rel~="tag"] {background-position: 0 -47px ;}

    It’s all fun and games

    I’ll be the first to admit this exercise has significant issues. I’m assuming the following elements are true:

    1. All possible rel attribute values are accounted for in my CSS, if not there will be a blank space generated by the first rule
    2. You can only have one relationship defined by XFN. Unfortunately, most people are defined by multiple values, i.e. rel=”met friend colleague”. This CSS does not account for multiple values.

    So, the display of your rel attributes may be a bit off in the edge cases. Keep the spirit light and nobody will say anything… I hope. Have fun with your rel attributes. They’re just sitting there waiting to be used.

    View the finished rel attribute style example.

    Related Information

    Tails firefox extension updated

    microformats logoThe Tails extension for Firefox has been updated. This is great for those working in microformats. It allows you to quickly check your code.

    I was having trouble testing some hreview elements today and assumed I had the latest version of Tails. Fortunately, a link on Microformatique suggested visiting the Tails home page to really get the most recent version.

    If you have this extension in Firefox, do not count on the usual ff extension update thingamabob to work. Go to the Tails site today and get the latest version (.3.7). It is much, much better than the one I used to have (.3.1).

    The Future of Semantic Markup

    John Allsopp has an interesting set of articles about semantic markup on Microformatique. This last installment, the future of semantic markup is well worth reading.

    Future Semantics

    So far we’ve seen that there are three sources of semantics in HTML

    • The built in semantics of HTML itself – its elements and attributes
    • The ad hoc semantics of developers inventing their own vocabularies, which is typically “injected” into HTML largely using the class and id attributes of HTML
    • Semi structured approaches to developing richer semantics, in particular the microformats project.

    It would make sense that future semantic developments of HTML would come from these or similar sources or approaches. In this article I want to focus on each in turn, and consider the benefits and shortcomings of each approach to developing richer semantics for HTML.

    I’ll begin with the second approach, “bottom up” semantics, which I considered in the first article, and have paid no small amount of attention to with previous research. In short, despite the success of bottom up ontologies, what Thomas Vander Wal terms “folksonomies”, where common vocabularies for describing things emerge through ad hoc usage (well known examples are Flickr’s tags, and Del.icio.us), vocabularies for describing common data on the web simply haven’t emerged. This is not just an assertion, as my previous research indicates. It should in fact not come as a surprise, because class values, for example, are “hidden”, while tags at del.icio.us or flickr, by comparison are visible giving rise to a positive feedback loop – when I as a user see a tag for a particular kind of thing, I am more likely to use it myself for similar kinds of things. Over time, particular terms appear to “win”, and become the conventionally accepted tag for that kind of thing. With class and id values on the other hand, we simply don’t get the network effect to anoint particular words as the names of things.

    Semantics in HTML Part III – Towards a semantic web