RSS feed for this blog QuantitativeValue with accessibility and typography

By Paul Watson on .

This is a short post about how to use in a way which is machine-readable, human-readable, accessible, and typographically correct. is used to express the height, width, and depth properties on instances of and I’m going to use VisualArtwork as an example, but the procedure is exactly the same for a Product.

I’m going to use an example height of 700 millimetres and a width of 500 millimetres. Without any use of or typographical niceties this would probably be marked-up like this:

<p>Size: 700mm x 500mm</p>

So far, so good? Not really.

Step 1: Getting the typography right

That “x” character is the letter X not the symbol for “by”. The proper symbol is “×”, the multiplication sign (type “Alt 0215” in Windows or the HTML entity &#215; - you can find more information at

So what I should change it to is this:

<p>Size: 700mm × 500mm</p>

If you need to you can use the HTML entity in your mark-up:

<p>Size: 700mm &#215; 500mm</p>

On a related typographical note, if you’re using feet and inches then the correct symbols are ′ and ″ (the prime and double prime characters), not ' and " (the plain apostrophe and quotation mark).

Step 2: Making it accessible

I’ve got a couple of abbreviations there that I should mark up so that screen-reading software can understand what I’m trying to say:

<p>Size: 700<abbr title="millimetres">mm</abbr> × 500<abbr title="millimetres">mm</abbr></p>

That’s the basic mark-up and typography done, now the

Step 3: Adding the mark-up

The main properties I need to mark up are value (the actual value of each measurement) and unitCode (the UN/CEFACT Common Code of the units).

I’d never heard of UN/CEFACT Common Codes before (despite the name they’re not really that common!), but they are the chosen format for specifying units of measurement as laid out by the United Nations Centre for Trade Facilitation and Electronic Business (UN/CEFACT). You probably won’t recognise any of them either, but the GoodRelations wiki keeps a table of them for easy reference.

Anyway, the UN/CEFACT Common Code for millimetres is “MMT”. I’m not going to display that to my website visitors because they probably won’t recognise it, so I’ll hide that away in a content attribute where web crawlers can parse it:

<div vocab="" typeof="VisualArtwork">
    <span property="height" typeof="QuantitativeValue">
      <span property="value">700</span>
      <abbr property="unitCode" content="MMT" title="millimetres">mm</abbr>
    </span> × 
    <span property="width" typeof="QuantitativeValue">
      <span property="value">500</span>
      <abbr property="unitCode" content="MMT" title="millimetres">mm</abbr>

And that’s it. You can see this mark-up in the wild on any of my artwork pages on this website such as this linoprint. The only difference is that on this website I declare (and other vocabularies) in the prefix attribute on the html element, so I don’t need to use the vocab attribute in my RDFa as I can just prefix all the types and properties with “schema:”.