Journal / Smartypants

“I am really looking forward to learning from–and socialising with–the best web people in the business.”

The above quote is from my post yesterday. On Monday I started listening to the SXSWi 07 podcasts. I wanted to learn from what these panels had to offer, and also get a better insight into what I can expect at SXSW 08. One of the first ‘episodes’ that caught my eye was Web Typography Sucks by Richard Rutter and Mark Boulton, two of my British web design heroes. The audio was very interesting to me, even though I was not at my computer and therefore did not have access to the slides. This is a subject I have been pondering for while, especially recently, as I have been working on a new print magazine. Print typography is a very different beast to web typography, and these guys make a strong argument–to my designer mind, at least–that the two should follow as many of the same rules as possible. The point is made that in a print production environment, everyone cares whether typographic styles are adhered to, whereas in a web production environment, most of the time the opposite is true. The magazine I have been working for recently has refreshed my interest in typography and the way things are meant to be done, and made me ponder the best way of applying this to my web work. Enter Smartypants. For some reason, I came across Smartypants a while back, and thought it was somethign completely different. The podcast made me revisit it, and I found that it will do exactly what I want. It also works with WordPress, which is ideal for me. A description from the official site:

PHP SmartyPants is a port to PHP of the original SmartyPants written in Perl by John Gruber.

PHP SmartyPants is a free web publishing tool that translates plain ASCII punctuation characters into “smart” typographic punctuation HTML entities.

SmartyPants can perform the following transformations:

  • Straight quotes ( " and ' ) into “curly” quote HTML entities
  • Backticks-style quotes (``like this'') into “curly” quote HTML entities
  • Dashes (“--” and “---”) into en- and em-dash entities
  • Three consecutive dots (“...”) into an ellipsis entity

SmartyPants does not modify characters within <pre>, <code>, <kbd>, or <script> tag blocks. Typically, these tags are used to display text where smart quotes and other “smart punctuation” would not be appropriate, such as source code or example markup.

For more details, read the SmartyPants home page.

So back to my quote at the top of this post. You should be able to see the use of curly quotes and em-dashes, used in the way they were intended, but generated not by me hand coding the html entities, but by Smartypants taking regular ‘typist’s’ punctuation and converting it to ‘typographer’s” punctuation. I would strongly recommend anyone using WordPress who cares even a little about typography to install the plugin. I takes very little time, and will then do all this great work for you. Make your blog better.

Leave a comment