Most web-developers know that IE has fallen behind in the race for standards and being able to show the latest and greatest. Many CSS2 properties are unsupported. Some of the more useful ones, are properties such as max-width, max-height, min-width and finally min-height. I will argue, how max-width is a crucial property, when it comes to on line readability, and then I will show you how to make IE emulate the behavior of max-width, and in turn, how to make it emulate many other properties that Internet Explorer for Windows is not directly capable of.

Note, that this article is concerned mainly about using max-width, to limit line-lengths, and maintain a readable page. Therefore, the hack described on this page deals alot in em's. If you merely wish to set a pixel width constraint, it's even easier, I've described how this can be done at the bottom. There, you can also see how this trick can easily be used to emulate any of the other max/min/width/height combinations.

Readability and line lengths

It's been an unwritten (though often written down) rule between web developers, that "pure" pages should be as loose as possible in their presentation. That means no huge tables, 1-pixel GIF's, or any other nasty stuff. It also meant letting line-lengths run as far as they needed. That policy has given us pages like usability guru Jakob Nielsen's rather unreadable site (shame, since it has a lot of good content). The problem with Jakob's pages (though these are far from the worst), is that the lines simple run into infinity, becoming extremely long, and in turn harder to read. Ever notice how line-lengths in most books are no more then maybe sixty letters? There's a good reason for it.

"Yeah, but users can adjust their browser windows!" I hear you say? Why yes they can, but all web developers also know, that this isn't what users do. Very few users are typography aware , as Jakob Nielsen also warns us against. It's important to note, that I'm not advocating small fonts, but only advocating setting a reasonable line length. Doing this, will ensure, that for most users, they will get a pleasurable experience, reading your site.

The usability studies

There has been several studies, on the topic of on line line-lengths, one of the better was done by the department of psychology at Wichita State University, entitled "The Effects of Line Length on Children and Adults' Online Reading Performance", and it clearly shows, in many different situations, and under different speed requirements, how people read on-line. More on the subject can be found in the company Human Factors Internationals' newsletter, " Reading Text Online".

While from reading these articles, you get the clear image, that there are no firm rules, but only vague ideas, and "maybe this is best". But still, some conclusions are drawn by the researchers:

From this study, as well as the studies mentioned above, it is suggested that full-screen line length should be avoided for on-line documents, especially if a large amount of text is presented. For adults, it is suggested that medium line lengths should be presented (approximately 65 to 75 CPL). Children, on the other hand, indicated their preference for the narrowest line length (45 CPL) and, thus, it may be beneficial to use narrow line lengths when possible.

The emphasis added are mine. Further, we can also discern, that a good reading width, should be around 60 CPL (characters per line).

Limiting Line lengths

If we want a page, to be no wider then say x pixels, it's as easy (let's not bother with boring stuff like valid HTML for just this OK?) as going: 

<html>
<body>
<p style="max-width:400px;">
[alot of text goes here]
</p>
</body>
</html>

The file max_width_px.html can be seen here also, in it's full glory. If you're using a decent browser (Mozilla, or Opera, you will see how the max-width effect comes into play with this much text.

Of course, the researchers advised, that we make the lines wide, not in X number of pixels, but instead, in an X amount of characters!. While we hit a little snag here, in that there is no unit in CSS, for letter-widths there is one which comes close enough, the em and ex units. I won't go deeper into what these units mean, other then that em specifies the width of the capital M, in the font set. For a better, and deeper explanation, also concerning line-widths, Russ Weakly has done a great article, on the issue of ideal line length for content.

It takes some experimenting, but we get around sixty chars per line, when using 30em:

<html>
<body>
<p style="max-width:30em;border:1px solid red;">
012345678901234567890123456789012345678901234567890123456789<br>
[alot of text goes here]
</p>
</body>
</html>

The file max_width_em.html can be seen here, and of course again, you'll need a good browser to see the effect. To make the effect visible, I've written in sixty numbers, as the top row, and also included a border around the box.

How to do this in Internet Explorer

That's what you came for after all. The key is using Internet Explorers relatively little known expression() property. Microsoft has their page on what they call "Dynamic properties". While being extremely useful in IE only environments, or to augment IE, it's a property I rarely see used.

Basically, here's how expression works (imagine a style tag):

p {
    width:expression(some javascript goes here);
}

So, going:

p {
    width:expression(400 + "px");
}

Is exactly the same as going:

p {
    width:400px;
}

Of course, you can go further, and reference the whole DOM, let's say you want a property to appear position:fixed, in IE, this could be done ala:

<html>
<style>
#fixed {
position:absolute;
left:10px;
top:expression(body.scrollTop + 50 + "px");
background:white;
border:1px solid red;}
</style>
<body>
<p id="fixed">Here is some text, which is fixed.</p>
<p>
[many times: "stuff <br/>"]
</p>
</body>
</html>

You can see the file here position_fixed_ie.html and also how it's normally done, in browsers that support the CSS spec better. position_fixed_normal.html. Notice, how IE's rendition is visibly jerky, a clear indication of the scripting nature behind this. Sadly, this is as good as it gets.

What about max-width?

Getting IE to eat an expression, which'll work just like max-width isn't easy, but here is one, which I've tested and verified to work in IE6, and it even takes into account the font-sizes that a user can set for the document (through "View" > "Text sizes").

<html>
<style>
p {
border:1px solid red;
width:expression( 
    document.body.clientWidth > (500/12) * 
    parseInt(document.body.currentStyle.fontSize)?
        "30em":
        "auto" );
}
</style>
<body>
<p>
[alot of text]
</p>

This time, it'll only work in Internet Explorer, 5 and up, though I've only tested version 6. You can get the file max_width_in_ie.html here.

What I've done, is to make IE check, if a value is over a certain threshold, if it is, then use 30em, as the box width, if not, use auto, making the box shrink.

Basically, with document.body.clientWidth, we get how wide the browser window is. Using parseInt(document.body.currentStyle.fontSize), we get the font size in pt's, that the user has currently set. I experimented, and at 12pts (the normal size), the browser window gets wider then 30em's, at more or less 500 pixels. Of course, it's then a small matter, of calculating backwards, in the scale, and see, if that if the default font size is 14pt (larger), then 30em's will be exceeded at 583 pixels (roughly). The sad thing is, that you will need to find the magic number, for whatever width you want for your letters. For 30ems, 500 pixels is the magic number. Shitty, but at least it works and perfectly emulates max-width.

What about other browsers?

"Won't they die on this weird CSS bastardization from Microsoft?" you ask? No, they won't. Or they shouldn't. Simply put, when a browser, that doesn't know expression comes across it, it simply ignores it, and moves on the to the next property. Here, I've finally combined the above files, into one, showing how it all works together:

<html>
<style>
p {
border:1px solid red;
max-width:30em;
width:expression( 
    document.body.clientWidth > (500/12) * 
    parseInt(document.body.currentStyle.fontSize)?
        "30em":
        "auto" );
}
</style>
<body>
<p>
[alot of text]
</p>
</body>
</html>

Which can be found in the file max_width_final.html. Enjoy! I hope it was worth reading, and that you learned some new ways to make IE behave like you want to!

With pixels (easier!)

If the above didn't make much sense, not all hope is lost. You can, if you know how wide you want your page to be in pixels, still use this work around.

The following code will limit the <p> tag to no more wider then 800 pixels.

<html>
<style>
body {
width:100%;
margin:0;
padding:0;}

p {
border:1px solid red;
max-width:800px;
width:expression(document.body.clientWidth > 800? "800px": "auto" );
}
</style>
<body>
<p>
[alot of text]
</p>
</body>
</html>

The central line is this one:

width:expression(document.body.clientWidth > 800? "800px": "auto" );

Basicly, the code goes "is the body wider then 800 pixels? if so, set the width to 800 pixels, otherwise, just let it size itself (auto)".

I recommend you scouting out the source code, and checking it out. Especially the x-height are intersting, note the usage of the keyword this, to implement the effect.

I hope, if the first part didn't make sense, that the code for the pixels emulation is simple enough, that you can use it. If not, feel try to toss an email my way :)