moddular

A run-in with bad browser support

27th March 2006

There are a couple of lesser known CSS display properties, run-in and compact that while probably not the most exciting (or useful) parts of the CSS specifications do still look fairly interesting. Recently I have found a couple of places where the use of run-in or compact would’ve been neater than the workaround solutions I ended up with.

run-in can take an element and make display as the first inline box in it’s next sibling. Here’s an example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
h1 { display: run-in; }
</style>
</head>
<body>
  <h1>Heading</h1>
  <p>Lorem Ipsum is simply dummy text of the printing 
    and typesetting industry. Lorem Ipsum has been the 
    industry’s standard dummy text ever since the 1500s, 
    when an unknown printer took a galley of type and scrambled 
    it to make a type specimen book.</p>

</body>
</html>

Which should result in a rendering that looks something like this,

display: run-in with Opera

Disappointingly from the point of view of ever getting to use this in the real world, of the browsers I have available (Internet Explorer, Firefox and Opera) only Opera appears to support this.

While Opera does have some support here, it’s by no means perfect. For example if we modify the original example to add a link in the heading,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
h1 { display: run-in; }
a { color: #c00; }
a:hover { color: #0c0; }
</style>
</head>
<body>
  <h1><a href="#">Heading with a link</a></h1>
  <p>Lorem Ipsum is simply dummy text of the printing 
    and typesetting industry. Lorem Ipsum has been the 
    industry’s standard dummy text ever since the 1500s, 
    when an unknown printer took a galley of type and scrambled 
    it to make a type specimen book.</p>

</body>
</html>

Both Opera 8 and 9 (tested in build 8265) behave somewhat differently. Both appear to correctly position the heading as an inline box inside the paragraph, however Opera 8 takes the text-decoration from the link and applies it to all the text in the paragraph. This is fixed in merlin (Opera 9) but now the a:hover has no effect.

compact is perhaps even more obscure than run-in, in fact it seems to be so obscure that it’s been removed from CSS 2.1 due to there having been too few implementations. compact could be useful for creating simple table like displays. Here’s an example with a definition list:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
dt { display: compact; }
dd { margin: 0 0 0 7em; }
</style>
</head>
<body>
  <dl>
    <dt>This is the title</dt>
    <dd>This is some definition 
      This is some definition 
      This is some definition</dd>
    <dt>This is the title</dt>
    <dd>This is some definition 
     This is some definition 
     This is some definition</dd>
  </dl>
</body>
</html>

Which should be rendered something like this:

display: compact with Opera

Again IE and Firefox don’t support this. Opera does, but when a link is introduced the same bugs that appeared with run-in also appear here. There is one interesting twist, if the content of the compact element is too big to fit into the margin of it’s next sibling then the use of compact doesn’t change the display of the element. In this case the link within the element correctly reacts to being hovered over.

Here are a couple of test pages for run-in and compact. It’s reported as Opera bug-202131.

Safari Update

After trying this out using SafariTest, it appears Safari also supports run-in (which is nice), although obviously with a static screenshot you can’t tell if the link hover would work. However it seems to mangle my compact test page.

Permalink. Posted on 27th March 2006 in Browsers, CSS, Web Standards.