Baseline of the formula

Is there any way to get a baseline (or depth) together with the image of a TeX formula? Knowing the baseline, it would be possible to vertically align formulas correctly on a web page.

I can see that and are aligned more or less correctly on this page by setting the margin-bottom property, along with height and width. I see that margin-bottom is -1px for and -3px for .

Simply using a reference to http://latex.codecogs.com/gif.latex?x%5E2 looses this property. Is there a way to serve it for the web images?

We experimented with this a lot, but unfortunately there is no easy way to return the baseline with the image, however what we do offer is slight adaption of the call to our servers that gives you a load of meta data.

Try: http://latex.codecogs.com/gif.json?\inline \frac{x{y}} which generates:

ParseEqn({ "latex": { "type":"gif", "equation":"\\frac{x}{y}", "site":"unknown",
"file":"2b2cbdca03e1406378c8b4402b419d67.gif",
"url":"http://www.codecogs.com/eq/2b/2b2cbdca03e1406378c8b4402b419d67.gif", "width":"8", "height":"22", "baseline":"8" } });

The way this is structured it can be loaded into your webpage like any piece of javascript. You then have to define ParseEqn() to decide how you want the new formula to be treated. OR you can delete ParseEqn and process the remainder as a javascript object.

Now some caveats:

• This only works for gif images output
• This only works for equations that are designed to be shown inline with text. Hence you need '\inline ' at the start of any equation. This will also try to compress the vertical extent of the equations, which is you decide you don't want then you add \displaystyle after \inline, e.g. http://latex.codecogs.com/gif.json?\inline \displaystyle \frac{x{y}}
• The image url will remain valid for 1 week after the last access. So if your website refers to the image frequently then its ok; otherwise if you have some deep hidden page that nobody finds (not even Google), then the underlying image will drop off our servers to. This just means you need make a fresh call to our servers for that image using any method you like. OR, we would much prefer if you cache all this data locally, including download the image to your local server, and use that across your website.

Let me suggest a solution to the baseline problem. You can serve, perhaps at a different URL (so as not to break old images) images with a fixed baseline, given in percents, so that the links of the form

<img src="..." style="vertical-align:-30%">

automatically give the correct baseline.

This means that most of your images will have to be padded with extra space at the bottom. And perhaps some other value could work better than 30%.

That is actually an ingenious idea! Thank you.

Its not the sort of thing we'd want to do with large equations, however these aren't likely to be displayed inline anyway.

We could integrate this into the current render as an option that allows the user to specify the % offset or even a fixed offset. This which would give users the flexibility to make the necessary adjustments.

Check back towards the end of next week, when we'll hopefully have more time to experiment with this.

Any progress on the fixed-baseline idea?

The current tight cropping makes even single-letter formulas jump up if the letter has a descender:

I think it should be possible to accomodate descenders and even simple subscripts without noticably inflating line height, which would achieve correct baseline to say 90% of math. There is a tradeoff between accomodating tall formulas and not forcing high line spacing. While the only optimal solution is interrogating the JSON API, you can't beat the convenience of just styling all formulas in a fixed way.

One tweak: 'ex' units should work better than percentage. vertical-align in percents is relative to line height, which CodeCogs can't know. 1ex is the height of a lowercase letter (without de/ascenders), so set height, width and vertical-align in ex units should correctly size and position the image with *any surrounding font*.

In fact, I don't see a reason why the equation editor shouldn't automatically set width, height and vertical-align in the HTML it suggests? That leaves only people programatically referencing CodeCogs images with the dilemma whether to bother with the JSON API. Still, having the option of fixed baseline would be sweet.

It appears that the calculation of the baseline ignores the dpi setting. At 100 dpi it seems to be about correct (it may be 96 or so, it's not entirely clear because it rounds). If you ask for baseline at 100 dpi and then at 200 dpi, it will give different widths and heights but the same value for the baseline. If you scale to your current dpi (so b*2 in this example) it seems to work as expected. The default is 110 dpi, so it will mostly be incorrect, especially on larger items.