A Column on Columns

Note: This will probably only appeal to the geek crowd... You've been forewarned!

People looking at the recipes on this blog may notice that I use some special formatting that most people may not be aware the can be achieved in HTML.

When I first started collecting recipes on the Internet, I used to just save a text file containing the recipe. After a while, I had a bunch of recipes that defied any sort of ability to classify. Some of my recipes were in "final form" (HTML or PDF); some were just collected off USENET and were in text form.

Being a person that likes to keep his information in order, I decided that I needed to put some semblance of order into my recipes. After looking at a lot of recipes, I decided that a good format would include the following:

• Recipe Title
  
• Summary: recipe yield, time to cook, where I found the recipe
  
• A description of the recipe
  
• Ingredients list
  
• Directions
  
• A few notes on the recipe

Since I've never considered HTML as a good way to store this information, I turned to XML, which is well suited to mark up just about any kind of textual information. I decided on a few good XML tags that should help me organize my existing recipe collection.

My markup tags included a header and a details section. The header basically contains the summary of the recipe--all information somebody would need without actually getting into the ingredients or preparation of the recipe itself. The details contains the ingredients list and the directions (sometimes more than one of each for recipes where there are multiple parts, such as spaghetti sauce and meatballs).

In the header, I allow the following tags:

• recipe: Names the recipe
  
• image: a pointer to a picture of the prepared recipe (this doesn't print on hardcopy versions of my recipes)
  
• source: Where did I find this recipe? Food Network? AllRecipes.com? Local paper? Usually contains a hyperlink to the site or the actual recipe.
  
• time: Length of time it takes to prepare. There can be more than one of these tags, with the attribute "type" that can be, for example, Preparation, Totol, Cooking, etc.
  
• yield: How much does this recipe make?
  
• cdate: The date that I cataloged the recipe
  
• desc: A short (or long) description of the recipe. It depends on the site from where I get a recipe. I happen to like the descriptions on Simply Recipes and Smitten Kitchen, so I usually include portions of them verbatim.

In the details section, I have two main sections, either of which can be repeated and in any order.

• ingredients: A list of ingredients, enclosed in "item" tags for each item. The item contains a "qty" attribute to allow me to specify a particular quantity. Maybe in the future, I'll write a program that will allow me to "double" or increase a recipe; the "qty" attributes will make that easier. The ingredients usually appear first in the details section.
  
• directions: A step by step list of directions for creating the recipe. Consists of "step" tags, although I have specialized "notes" tags that may appear as well ("nutrition" for nutritional information, "itemized" for itemized information within "item" tags, "hdr" for any kind of headers, etc.).

The tags within the details section also allow for a generic "notes" tag for superscript information (footnotes) or other information that may be noteworthy.

I have a Perl script that is rather clever at parsing most recipes I find into the proper tags (even determining where the recipe looks like it came from and properly adding the "source" tag). If it sees a reference to a picture, it downloads the image to my web server and adds an "image" tag as well.

Finally, I have an XSLT (a language for transforming XML documents into other XML documents, including HTML) to translate my XML recipes into HTML for easy reading using a web browser.

That XSLT has some clever code within it as well: It counts the number of items in my "ingredients" section, and divides them into two columns (the first half into the left column, and the second half into a right column). My transformation code also changes complex fractions (for example, "1/4") into HTML entities (for example, ¼).

The generated HTML is matched with one of two style sheets (one for display screens, one for printed copies) that provides the necessary formatting code to make my recipes appear consistent.

My recipe collection is stored on my home web server, accessible by myself and any member of my family. I copy them out of my recipe collection into the blog when I'm sharing them out.

And that, my dear readers (if you managed to get this far), is how and why my recipes appear the way they do on this blog.

Bon Appetit!