Ex-cite-ing Works of Art
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:
-
HTML
<cite>Tenet <time datetime="2020">(2020)</time></cite> -
HTML
<cite>Bridgerton <time datetime="2020">(2020)</time></cite>: Season 1 -
HTML
<cite>Signal to Noise <time datetime="2015">(2015)</time></cite> by Silvia Moreno-Garcia
(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.
- 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!↩