User:Dmharvey/Inline PNG discussion
From Wikipedia, the free encyclopedia
[edit] Introduction
I've spent a bit of time trying to understand Maynard Handley's ideas (see m:Help_talk:Formula#Maynard Handley's suggestions) about how to make PNGs look better for inline equations. There's a few things I like about what he's done (and these are partly incorporated below), but there's a few things I would do differently.
Please take a look at my demo page.
I'm interested to hear your comments on this article's talk page. Before telling me how horribly ugly the demo looks, please have a brief look at #How various browsers cope with this.
[edit] What's the demo all about?
What you're seeing there is a few PNGs that have been generated differently to how mediawiki currently does it.
If you look at the HTML source, you'll see that each image has its own customised "height" and "vertical-align" setting. The purpose of these is twofold: to make the font size in the PNG match the font size of the surrounding text, and, even more importantly, to make the base line of the equation match up with the base line of the surrounding text. This is not as easy as it sounds because different equations stick up and down to different extents.
I didn't make up these height and alignment values by hand. I wrote some simple C++ code that computes them. You can get the code here. Basically you tell it the output file name and the input latex string, and it spits out a PNG whose filename is something like output.4.png, plus an HTML file output.htm which has an <img> tag pointing to that PNG file, plus a zillion other intermediate files (sorry!).
How does this computation work? In a nutshell, as follows. Suppose we want to render the latex code "\sqrt{\cos \theta}". First we stick a diamond on the left and put a line over the top, like this: "\overline{\diamond {\sqrt{\cos\theta}}}" (that was pretty random hey!) which gets shunted through latex and dvips and ImageMagick to obtain this:
Then we use ImageMagick to peel off a certain fixed number of pixels on the left, obtaining
We can use ImageMagick's "identify" command to get the height/width of this image. Then we run a trim command, yielding
We get the height/width of this also. Now we have enough information to work out where the baseline should be, because we know it's at the bottom of the diamond.
Finally we run another crop to get the desired equation
and it's now just a matter of turning our height computations into explicit values to stick into the "height" and "vertical-align" style attributes on the image.
Obviously there are lots of possible variations on this procedure; this is just the first that occurred to me.
Instead of calling imagemagick at the command line several times like I've demonstrated above, one could incorporate all the steps into a C++ program (or indeed probably a PHP script). This was the first way I tried to do it, but I couldn't get ImageMagick linking properly with my C++ code (porting and compiler compatibility issues with Mac OS 10.4.2).
Some other random comments.
- I've used ImageMagick's gamma correction option to darken the images slightly.
- I've used $ instead of $$ in the latex sources, so that things are drawn in latex's "math mode" instead of "display math mode". For example, on the demo page, the integral is drawn small instead of large.
- Maynard's transparency switches have not been enabled here, but would be easy to add (and I think that would be a Good Thing).
[Maynard here:
I took David's essential idea and modified it in various ways to get it to work a little better. We use essentially the idea above but rather than using \overbar to generate a fixed upper edge, we use \left\ceil. This does not cramp some equations that use superscripts, unlike \overbar. Also rather than using \diamond as the baseline marker we use \_. (We want the baseline marker to be as short as possible so it doesn't generate extra, unrelated to the essential image, height). Finally when using ImageMagick to crop and trim the images along the way there are a few technicalities one has to be careful of.
The bottom line is that the whole thing does actually work and work well. At some point I'll write this up in more detail, or I can give the code to anyone who wants it.]
[edit] How various browsers cope with this
The aim here is not to get output that's as good as something TeX spits out; that's simply not possible by using embedded PNGs.
Rather, I want to get something that is good enough to encourage people to start writing inline equations with <math> tags instead of disgusting HTML!
I am not proposing that we replace the current method for generating PNGs for displayed equations. Therefore necessarily we need to introduce markup to distinguish inline and displayed equations; I think it's high time this happened anyway.
Keeping this in mind, I can report that the demo page looks (in my opinion):
- gorgeous on Safari 2.0 + Mac OS X 10.4.2 at all font sizes
- decent on Firefox 1.0.6 + Mac OS X 10.4.2 at all font sizes
- decent on Safari 1.3 + Mac OS X 10.3.9 at all font sizes
- Internet Explorer 6.0 + Windows XP:
- almost passable with "text size" set to "Largest"
- horrendous with "text size" set to anything smaller
- Firefox 1.0.6 + Windows XP:
- almost passable above a certain font size (which is quite a bit larger than I would prefer by default)
- horrendous below that critical font size
I also bravely tried a nightly build of Deer Park alpha (windows): I get identical results to the Firefox 1.0.6 releases.
Please add your own assessment for any browsers you have handy.
As you can see from the above list, there are serious issues on the major Windows browsers. The difficulty seems to be that Windows' underlying image scaling code is just awful, and it looks like both Internet Explorer and Mozilla/Firefox are using the same code. (The scaling code in Safari 2.0 is truly miraculous, I take off my hat to the hackers over at Apple.)
