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

SearchMonkey
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