It’s always bothered me to see entry titles formatted like this, where the title of the work isn’t distinguished from the rest:

I am nothing if not obsessive, so I thought a lot about how to improve this, and ultimately adopted the cite element, which is designed for this purpose, together with time. The HTML then looks like this:

(A key feature of this markup is that it inherently behaves correctly on any compliant device and I can improve the presentation with CSS.)

I had to adjust my templates to allow raw HTML in the titles. I couldn’t blindly apply it to every existing template—neither did I remember offhand every single title and whether it was HTML-safe, nor did I want to add a potential trap for myself. Instead, I added support for an htmlTitle property. It’s used, if it exists, only where markup is supported, such as on the front page and on entry pages. All other occurrences of titles (such as in the RSS feed) continue to use the title property. Any entry with only an htmlTitle computes a title as well by removing the HTML—simplistic yet entirely sufficient for my purposes.[1]

I adopted the new structure with small alterations in titles, in the information boxes that appear next to Thoughts & Spoilers, and in the entry bodies themselves by means of a new :work directive, rendered thusly:

Which brings us to their appearance. I won’t lie: I chafe at being forced to use both font weight (semi-bold) and font style (italics), but I already use each of those individually for, well, emphasis, or for the occasional non-English turn of phrase. As such, italics on their own cannot distinguish the title of a work to my satisfaction.

As far as the vintage goes, I began by rendering only the title in italics and the vintage in upright characters. Then I thought the fact that the vintage is placed inside the cite meant it should be styled the same way. In the end, I returned to the upright presentation. It might be a little illogical, but it makes more visual sense.

  1. I can finally give GG WP, DotA its rightful title, and you can’t even tell Adobe Garamond Pro only has semi-bold small caps since the entire thing is made up of abbreviations!

Next in series: (#21 in Colophon: Finding A Place For My Head)