Theresa O’Connor

POSH tombstones

This post has been languishing in draft status since late 2007, so I’ve polished it up and published. I hope someone still finds this useful or relevant!

Typographic tombstones are special symbols appearing at the end of articles. They’re also known as end marks, and end signs, among other terms. You’ve probably seen hundreds of these. The Economist’s print edition famously uses a red square, The Onion uses a mini logo, and A List Apart uses a little leafy thing that looks like its favicon.

The mathematician Paul Halmos repurposed the tombstone to symbolize the end of proofs, and its use in math spread quicly. In fact, the tombstone entered Unicode from its use in mathematics, and so is represented as U+220E END OF PROOF, which looks like this: ∎ Mathematicians sometimes even call this character after Halmos.

You’ve always liked ALA’s leafy dudes, so you’d like to add tombstones to your blog as POSHly as possible. OK. First question: should we consider the tombstone to be part of the article content? Let’s go with yes and see where that leads us. Then we’ll come back and try again by answering no.

Well, the simplest way to include a tombstone directly into the article content is to simply type the tombstone character.

Obviously, we’ll need some kind of hook on this for styling purposes. We should come up with a class name which captures the semantic while also avoiding confusion & potential collision with other markup. I think using tombstone could be potentially confusing. How about halmos?

<span class="halmos">∎</span>

It might make sense to have the tombstone double as your permalink. I think I’ve seen some sites do this. If so, simply use the more semantically appropriate markup:

<a class="halmos" rel="bookmark" href="permalink-to-this-article">∎</a>

If you’d prefer to hide the character itself, so that you can use a CSS background image or the like, you could always use an inner <span> to style with visibility: hidden.

OK, so suppose we don’t want to include the tombstone in the article content. If you use hAtom, something like the following CSS should be sufficient:

.hentry .entry-content :last-child:after {
    content: " \220E";
}

The downside to this approach is that :last-child doesn’t work in IE6, and CSS generated content is harder to do dynamic things with in script. Seems to me like our first approach works a bit better, though both of these approaches provide enough hooks to style your tombstone however you’d like. So, there you have it. Share and Enjoy!