Web design: Styling metadata name–value lists

Index: 169
Date: 2013-10-17

While studying web standards and improving the markup of my own sites, I noted that the <di> element from XHTML 2.0 would be practical. In particular, it would make it much simpler to style metadata name–value lists that are semantically marked up using HTML5 description lists using currently-available CSS selectors and properties. I wrote a letter to Ian Hickson (the WHATWG HTML5 editor) about this. Already before I had received his reply, I realised how bad it sounds to ask for HTML changes to simplify styling, but in my defence, the DI element in itself has nothing to do with styling, and makes sense semantically (although it is superfluous). Naturally, Mr Hickson pointed this out in his reply, but he also informed me about the run-in value for the CSS display property, which I was not aware of. And, as it turns out, this is in fact perfect for my needs.

From the W3C (see below):

A run-in box behaves as follows:
If the run-in box contains a block box, the run-in box becomes a block box.
If a sibling block box (that does not float and is not absolutely positioned) follows the run-in box, the run-in box becomes the first inline box of the block box. A run-in cannot run in to a block that already starts with a run-in or that itself is a run-in.
Otherwise, the run-in box becomes a block box.

The example given in the spec. is about an H3 entering the paragraph following it. Consequently, using this value on DT elements (each followed by a DD element, like in a metadata name–value list) is very natural, and much more appropriate than using float.

run-in is a somewhat lesser known value, and it appears like it is only mentioned in the CSS basic box model Working Draft from August 2007. Turning to browser support, it is remarkably good in Internet Explorer, which supports run-in already in IE8. Google Chrome and Safari supports it as well. However, not even the latest version of Firefox supports this value.

As an example, consider the following hypertext document:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Run-in description list test</title>
<style>
dt {
  font-weight: bold;
  display: run-in;
}
dt:after {
  content: ": "
}
</style>
</head>

<body>

  <dl>
    <dt>Subject</dt>
    <dd>A Question</dd>
    <dt>From</dt>
    <dd>Mr Smith</dd>
    <dt>Time</dt>
    <dd>2013-08-05</dd>
  </dl>


</body>
</html>

which you can find live. It is beautiful.

Update (2013-10-17 21:44:33): I just saw that the W3C document has a current version.

Update (2014-03-24 22:15:55): A month ago, I noticed that Google Chrome no longer implements run-in. Therefore, I suppose we will not see any universal support for this value any time soon.