In search of the missing run-in value

Patience isn’t something I naturally possess, particularly when I really want to solve a problem. As many designers and developers know, a large part of our job requires patience - with ourselves; with software companies developing production and productivity tools; and of course with our good friends, the browser vendors.

But I’m beginning to lose patience regarding the widespread adoption of a wonderfully useful display property value for the CSS display property, run-in. This value was introduced with the CSS 2 specification, and is also in the still-not-recommended CSS 2.1 spec. It was implemented by IE 5 for Mac, ironically, and is supported for the purposes described in this article in Opera, Konqueror and Safari. No IE for Windows supports the value, nor does Mozilla Firefox. How’s that for a change of pace?

Display Property: Common Value Usage

Most people working with CSS are already familiar with the CSS display property. We use it regularly for a number of techniques including:

Displaying lists to create horizontal navigation using the inline property value:

item
item
item


ul {display: inline;}

Displaying inline elements as block elements, in this case to ensure each link extends to the width and height of the list item rather than just the link itself:

item
item
item


a {display: block;}

We’ve even used the none value for display, particularly in early image replacement techniques:

Take Your Vitamins

h2 {background-image: url(images/tyv.png);}
span {display: none;}

What Does run-in Offer?

Displaying an element as run-in causes boxes to display either as inline or block, depending upon the context of the markup - a perfect example, and one of the primary reasons I’d like to encourage implementers to make run-in a priority implementation in upcoming revisions. Since that will take time, I’ll show you a simple but extraordinarily elegant use of run-in display for typographic enhancement. Consider the following markup:

Take your vitamins!

It’s imperative you think about your nutrition. Whether that be what you eat or what you read, nourishment is not only desirable, but necessary.
Feel great, look fabulous, work better.

After several weeks, you’ll find that taking your vitamins will make you have more energy than ever. Your skin will clear up, your mind will be sharp, and your colleagues are sure to take notice.
Impress your friends, your family and even your boss.

Who knows, maybe your boss will see the results and you’ll find yourself with a pay rise, a corner office, and a brand new car. Okay, I can fantasize, can’t I?

Here we have a simple, semantic example of marking up some headers and text. Assuming that the rest of the document retains its required structure and content is marked up semantically, this markup will be very accessible and logical to everyone, including those with special needs. Here’s the content displayed with no additional style in Opera 9:

Using run-in display, I can display the headers visually in a traditional typographic manner that we’ve not truly had available to us without using additional elements. Here’s some styles, including the run-in display value, that add this typographic option without ever adding presentational elements:

h2 {display: run-in;font-family: Verdana; font-size: 1.5em; color: violet; margin-right: 10px;}
p {font-family: Georgia; font-style: italic; font-size: 1.0em; color: #333;}

The fun results can be seen here:

Digressive Enhancement

The good news is that you can still use the run-in value if you’re willing to sacrifice the effect in IE Windows and Gecko browsers such as Firefox, and in this case, Camino. Here’s what those users will see:

Not too terrible, but again, nowhere near as pretty. And real designers could have a field day with this sort of thing, including background images, image replacement and so on to really enhance the typographic texture and visual flow of the document’s presentation.

There’s a reason it’s important to advocate this for certain useful aspects of a spec that might not have full implementation. Without interest and support from the community, such features could easily get dropped from future specifications.

It’s difficult enough getting features we want into the specs in the first place, so let’s not let the good stuff we do have, such as the run-in value for display, disappear before we have a chance to see it properly implemented and available for consistent use.

Like this article? Digg it¹!

URLs in this post:

1. Digg it: http://digg.com/design/in_search_of_the_missing_run_in_value