Stuff I'M Thinking About

This post explains how to mark up durations so that they render nicely visually and for screen readers.

On www.radionz.co.nz we are very particular about typography when we can be.

A duration of 32′ 51″ (32 minutes 51 seconds) would be rendered as ’32 prime 51 double prime’.
Note that the marks slant to the right slightly? Most people use single and double quotes – they look like this: 32′ 51″. Yuk!

To fix this I made some tweaks to the underlying HTML. Firstly I hid the primes from screen readers and secondly added a visually-hidden colon ‘:’ between the minutes and seconds. It looks like this (as an image because I cannot the code to work in Blogger):

Note the hidden text and thin spaces to control the layout. This reads as ‘duration thirty-two fifty-one’. And it looks exactly the same as it did visually.

The code that generates this also disambiguates durations if they have only seconds or only minutes. In those case the words ‘minutes’ or ‘seconds’ are added as needed. And it knows to use the singular versions of the words for 1 minute too.

Why bother? Imagine having to listen to ‘prime’ and ‘double prime’ again and again as you move down through a page of 20 Morning Report itema. They aren’t needed in this context and it improves the user experience dramatically. So we do it.

EDIT: The latest iteration of this code is available as a gist.