The presentation of correctly formatted measurements - feet and inches, meters and quarts - is often neglected on web pages. The challenge of presenting measurements in an intelligent and attractive way is further complicated by the fact that the entire world - with the exception of the United States, Liberia, and Burma - uses the metric system. This makes correctly coded measurements on web pages (which are, by their very nature, international) vital for easy conversion, comprehension and translation.

Imperial Typography

The correct typographic symbols for feet and inches are not the double and single “dumb” quote marks on your keyboard: they’re the ′ ″ characters, typically encoded on a page as HTML entities.

Correctly rendering 3 feet 6 inches would require both glyphs:

3′6″

Which would result in:

3′6″

Similarly, use the correct symbol for degrees (°) when measuring temperature or angle: °. Don’t forget to specify Fahrenheit, Celsius or Kelvin when talking about temperature.

Metric Measurements

For all other common forms of measurement, shortcuts are fine: 3 m to represent three meters, etc; in and ft are fine too. A few other points:

• Never abbreviate miles to m, to avoid confusion with meters
• Metric units should be seperated with a space. Use a non-breaking space to ensure that the number and unit are not broken across lines during line wrapping: 2 m, for example.
• use ordinals where appropriate for area and volume
• use the correct symbol for “times” or “by” when specifying area: × For example, 30 cm × 60 cm, which renders as: 30 cm × 60 cm
• use vulgar fractions with measurements (particularly imperial) if they don’t resolve to a precise decimal (e.g. 1⅔″)
• ideally, provide a means for the user to convert all data presented on a page between imperial and metric

Measurements & Microdata

If you can’t provide a method of converting units, consider marking up measurements on the page with microdata. This reduces confusion (a poorly coded 30 K for thirty kilometres could otherwise be read as 30 degrees Kelvin, depending on the context). It will also make comprehension and conversion by browsers, search engines, and other tools much easier. For example, a product listing for a desk:

Before Microdata:

<section>
<h1>Proteus Desk</h1>
<img src="desk.jpg" alt>
<p>A stylish desk with a glass-top surface and steel legs.</p>
<ul>
    <li>Dimensions:
        <ul>
            <li>Depth: 50 cm
            <li>Width: 60 cm
            <li>Height: 60 cm
        </ul>
    <li>Weight: 10 kg
</ul>
</section>

After Microdata:

<section itemscope itemtype="http://schema.org/Product">
<h1 itemprop="name">Proteus Desk</h1>
<img src="desk.jpg" alt="Proteus desk" itemprop="image">
<p itemprop="description">A stylish desk with a glass-top surface and steel legs.</p>
<ul>
    <li>Dimensions
        <ul>
            <li>Depth:
            <span itemprop="depth" itemscope itemtype="http://schema.org/QuantitativeValue">
                <span itemprop="value">50</span>
		     &nbsp; 
                <data itemprop="unitCode" value="CMT">cm</data>
            </span>
            <li>Width: 
                <span itemprop="width" itemscope itemtype="http://schema.org/QuantitativeValue">
                    <span itemprop="value">60</span>
                         &nbsp; 
			<data itemprop="unitCode" value="CMT">cm</data>
                </span>
            <li>Height: 
            <span itemprop="height" itemscope itemtype="http://schema.org/QuantitativeValue">
                <span itemprop="value">60</span>
		   &nbsp; 
                <data itemprop="unitCode" value="CMT">cm</data>
            </span>
        </ul>
    <li>Weight
    <span itemprop="weight" itemscope itemtype="http://schema.org/QuantitativeValue">
        <span itemprop="value">10</span>
      &nbsp;  
	<data itemprop="unitCode" value="KGM">kg</data>
    </span>
</ul>
</section>

A few notes:

• obviously, this solution involves far more markup, but provides significant advantages in precision and accuracy: anything that touches the page can know exactly what each component of the markup means.
• For product lines larger than three items, a MySQL database and some intelligent parsing with PHP would be used to generate this code, as opposed to creating it by hand.
• The HTML5 <data> tag is used to encode information on the measurement unit.
• The values for unit type are UN/CEFACT Common Codes.

In the next article, I’ll look at in-page conversion of measurements between metric and imperial units.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.