While some have attempted to solve this by adjusting the size of the images, there is one serious omission in the logic:
How high is the html text?
[...] To do this we need to stop talking in pixels and dpi (the term dpi is for print and doesn't really apply to screen images) and use a dynamic unit such as 'em' or 'en' or % to size the images for the math.
I'm well aware of this weakness. However, I don't see a practical way to use dynamic units. Could you be a bit more specific?
Normally, text on a screen is sized in px - that is pixels, the little coloured squares that make up your monitory/lcd display. The image is also normally sized in the same way. So technically you can just adjust the px sizes of the text and images until they look neat. But since the actual size of the text varies, you will never get it perfect.
Other units of measurement are available. One I suggested was 'em'. An 'em' is defined as the length of the letter 'm' in the font. If you make the font size bigger, then the em size is bigger. If you use arial font, you will get one size of em and if you use Verdana as your font, the the em will be a little bigger. So the pixel size of an em varies along with the font. We can thus use em sizes for the size of our images and as a result the image will re-size to match the size of the users font.
I have made a small web page to demonstrate the effect. If you look at
http://www.dnselite.com/math2.html and try altering the size of the font in your browser (FireFox users press Ctrl++ and Ctrl+- to go up and down sizes) you should see the images increase and decrease in size to keep in step with the text.
One final tweak I added was to use relative positioning to shift the image 0.2em down so that the baseline of the text inside the image matches the baseline of the real text. For those who can read html and css, here's the code I used.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style>
.inline {
width:7.7em;
position: relative;
top: 0.2em;
height: 1em;
}
.open {
width:10em;
height:1.2em;
}
</style>
</head>
<body>
<p>This image is sized using em unties
<img src="96b3a471449ac598a4e8fa4d38a461f7.png" alt="\scriptstyle N-1 = p_1 p_2 \cdots p_n" class="inline">
as you resize your fonts, the image will get bigger and smaller along with the text.</p>
<p><img src="96b3a471449ac598a4e8fa4d38a461f7.png" class="open"></p>
<p>This is a fixed images sized in px units
<img src="e4b4138f031b6fece66f522372f52025.png" alt="\scriptstyle N-1 = p_1 p_2 \cdots p_n" width="95" height="12" >
Nomatter what you do with your browsers font settings, the image will stay the same size.</p>
<p><img src="96b3a471449ac598a4e8fa4d38a461f7.png" width="161" height="18"></p>
</body>
</html>
