Pairing Wine and Microformats

While working on Cork’d, I realized this was a perfectly fine excuse to implement some microformats. What goes great with a nice 2003 Pinot Noir? Meaningful markup, naturally.

We’re currently using three microformats on Cork’d:

  • hCard (for member profiles)
  • hReview (for wine reviews or “tasting notes”)
  • rel-tag (for indicating tag links)

Our implementations aren’t perfect, but it’s a start. The rest of this article will talk about how we implemented hReview for member-entered tasting notes (example) and specifically how I used CSS to style the markup.



The Markup


Thanks to the hReview Creator, setting up the markup is a snap. Just enter in a sample review, and let the Creator do the work for you. Many thanks go to Tantek, who was also kind enough to give me some markup guidance in how I could improve our initial implementation. A somewhat simplified example of a single review would be as follows:


<div class="hreview">
<object data="#wine-name" class="include" type="text/html"></object>
<abbr class="dtreviewed" title="20060518">(23 days ago)</abbr>
<span class="reviewer vcard">
<img class="photo" src="/img/icon-user-64.gif" height="48" width="48" alt="member icon" />
<a class="url fn" href="/people/simplebits">simplebits</a></span><abbr class="rating" title="3"><img src="/img/icon-rate3.gif" alt="***" /></abbr><blockquote class="description">This is probably my favorite every day (well, not <em>every</em> day) wine. It's light, subtly sweet, ripe fruit, slightly spicy oak. It's a bit "slippery", if that makes sense (in a very good way). Highly drinkable.</blockquote><br />
</div>

Since these blocks are almost like “blog style” comments, we’re opting not to repeat the wine name in every review. Instead, we’re using the crafty method of placing an id and class on the wine’s name back up at the top of the page, then using the <object> element to include that title and type information into each review (we’ll later “hide” that <object> element using CSS).

So, added to the main <h2> of the wine’s page is the following:

<h2 id="wine-name" class="item fn">Firesteed 2003 Pinot Noir</h2>

Notice the id and class (which is denoting type). More info on the object include pattern method is described in detail on the microformats wiki (tip of the cap to Tantek>

Also in the hReview markup is a thumbmail photo, name and profile link of reviewer (bundled together using the hCard microformat), the date it was reviewed, the star rating and review description. The Creator has applied the appropiate class values to the markup, and our semantic-ness has now just bumped up a few notches.

Here’s how the review appears unstyled (Note: you’ll see some weirdness caused by <object> if viewing things unstyled in Safari):

unstyled review

display: block is your friend

A true friend to microformats, and semantic markup in general, is the display: block; rule in CSS. When choosing the most appropriate elements for the task at hand, often you’re faced with an inline element that you’d like to have on its own line. Instead of adding unnecessary <br /> or other block-level elements as wrappers, we can instead keep the markup clean and lean, and force elements that normally flow inline to behave like block-level ones. Mixing in a little float here and there, and presto—we’ll have ourselves an attractive little review.

Applying Style

First, we’ll style the outer wrapping <div class="hreview"> with some margins, padding, and the border-on-two-sides-to-look-subtly-three-dimensional trick:

div.hreview {margin: 15px 0;padding: 15px;border-bottom: 1px solid #E5DFC7;border-right: 1px solid #E5DFC7;background: #fff;}

We’ll want to “hide” the <object> element, namely for the benefit of browsers that handle it awkwardly (Safari being one). Setting the width and height is a harmless way of getting <object> out of the way, while still preserving the title and type information of the wine in each review without repeating it:

div.hreview object.include {width: 0;height: 0;}

Next, we’ll float the thumbnail image left, giving it some margins, padding, and border:

div.hreview img.photo {float: left;margin: 0 10px 4px 0;padding: 4px;border: 1px solid #E5DFC7;}

With the image floated left, let’s now float the date to the right. We’ll also want to override the default treament for <abbr> elements (oftentimes in italics and sometimes with a bottom border):

div.hreview abbr.dtreviewed {float: right;margin: 3px 0 0 0;font-size: 90%;font-weight: bold;font-style: normal;color: #963;border: none;}

Finally, we’ll adding some spacing and minor tweaks to the reviewer’s name, the star rating (using display: block; to force it on its own line) and the description itself:

div.hreview span.reviewer {margin: 0 0 6px 0;font-weight: bold;font-size: 120%;}<br />
div.hreview abbr.rating {display: block;margin: 5px 0;}<br />
div.hreview blockquote.description {margin: 2px 0 6px 0;padding: 0;line-height: 1.5em;}

The final, styled review:
styled review

Why I Bothered to Write This

The styles we’re using here aren’t groundbreaking, but my main motivation for writing this all up was this: don’t let microformat markup (or semantically rich markup in general) scare you off from turning that structure into something visually attractive. By utilizing display: block; and/or float on those conventionally inline <span> and <abbr> elements, the possibilities are endless.

Promise

Firefox screenshot With reviews marked up using hReview, the promise is that this info can now be indexed, searched for, remixed, etc. As a connoisseur of meaningful markup, I’d care about how these reviews were marked up regardless of whether there was a microformat to plug in. It only makes sense to use hReview here, and maybe this extra clarity in describing the reviews will lead other, interesting things. And that’s the fun of microformats.

For a glimpse into what’s possible, check out the Tails extension for Firefox. It’ll auto-detect certain microformats on the page, and allow you to bring up a sidebar with the microformats data neatly collected (for instance hCard and hReviews found on Cork’d pages). Pretty neat.

Update

It seems that Safari has spotty handling of the <object> element, and this was causing the page to “jump” when multiple reviews appeared on one page.

I’ve replaced the <object> with a heading containing the wine name in each hReview. Yes, we’re duplicating the info for each review, but then “off-lefting” it with CSS using text-indent: -9000px;.

It’s not ideal, but for now, it’s far simpler and safe for all browsers.