∞

Unordered Lists to Comma Separated List

I was tweaking some layout in Tumblr today and I really wanted to take a list of tags and display them with proper grammar. For example, I wanted to have commas in the right places and to use the proper singular and plural forms as needed. My goal was something like.

At 9pm with tags Mazie, Baseball and St. Paul Saints.

Or, if there was only one tag.

At 9pm with tag Mazie.

The trick is that Tumblr only provides a way to iterate through the list of tags and you can’t do any funky logic in there. This is actually a benefit, since it forced me to figure out the right way to do this with CSS. After a little searching I found a really old post from 2005 explaining comma-separated list elements that was pretty close to what I wanted. I did some tweaking on it and came up with the following CSS block to do exactly what I wanted.

/* Styling for a comma separated list of values from a ul */
ul.comma-separated { display: inline; list-style: none; margin: 0; padding: 0; }
ul.comma-separated li { display: inline; }
/* Put the correct label in front, this should be plural for multiple tags */
ul.comma-separated li:first-child:before { content:"tags "; }
/* The comma we are looking for. */
ul.comma-separated li:before { content: ", "; white-space: pre;}
/* The last element should not have a comma and should be followed with a period. */
ul.comma-separated li:last-child:before { content:" and "; white-space: pre;}
ul.comma-separated li:last-child:after { content: "."; }
/* Special case required to handle a ul with only one item. */
ul.comma-separated li:only-child:before { content:"tag "; }

This will take a block of HTML like this

<ul class="comma-separated">
  <li>Mazie</li>
  <li>Baseball</li>
  <li>St. Paul Saints</li>
</ul>

and display it exactly how I want.

This was a great exercise. I’m not a CSS guru and I don’t tend to look to CSS to solve this type of problem. I immediately wanted to start working some magic inside of a loop in the code and handle the logic there. This is much simpler, and has the huge benefit of being able to modify the contents after page load with Javascript and have the formatting dynamically adjust as needed.

Now I just need to move this super smart CSS into my WordPress site as well.

∞

Interviewing Your Kid?

Mazie is about to turn 4 years old and she is bubbling with excitement about it. She tells me regularly how many days until her birthday, and that she will be able to jump higher and possibly grow several inches when she turns 4.

I’ve been thinking that it would be really fun to setup the video camera and ask her some questions. Essentially an interview. My idea is to put together a set of questions that would stay pretty constant and to do a video like this on her birthday each year, until she tells me to bugger off. :-)

I love the idea of capturing this, and capturing how things change over time. It’s obvious to me that simple questions should be included, like…

  • What is your favorite color?
  • What is your favorite food?
  • Who are your best friends?
  • What is your favorite thing to do?

I’d like to get this right though and I’m positive that there are several questions that I’m not thinking of. That’s the reason for this post…

what would you ask your kid?

I would really like to get the perspective of those much wiser than me, so please chime in.

Update (June 9, 2011): I’ve started to maintain a list of questions that I ask Mazie on these videos.

∞

I want. 😊

∞

If a nation expects to be ignorant and free in a state of civilization, it expects what never was and never will be. — Thomas Jefferson

∞

Up

Mazie was ecstatic to see Up. She was giddy running to the theater to see it. We all really enjoyed it.

∞

Learning to make sausage with Craig from the North House Folk School.

∞

Freezer full of over 30 pounds of sausage from the sausage making class at the North House Folk School.

∞

Ya know what Dad? I actually don’t care. — Mazie (almost 4)

∞

The Hot Spots for Organic Food. This is a very interesting graphic for two reasons.

  1. I love to see that we in the upper-midwest have a real leadership position in organic farming. California and the Northeast are strong as well.

  2. This is a great infographic. It tells a story with nearly no words.

∞

Racks on the Big Green Egg.