I've been porting a plugin to visualize latex like this: , this or this . The code is based on this guy's code. I've put effort in making sure the baseline is properly aligned.

1. The Latex is first rendered with a blue point which shows the baseline, like this: . The image is cropped to minimum size.
2. An external program "parses" the image to find the location of the blue point.
3. The IMG is aligned using a negative `margin-bottom`, based on the position of the blue dot.

style="margin-bottom: -Xpx"

Some tests for ascent/descent: , , , .

Moreover, size and margin of the images are specified in `em`s, therefore it is fine for the browser to change the font size (tested in Firefox/Safari).

This is a chunk of text to be latexified:

Equation not inline:

(1)

Align with multiple lines:

same thing, let latex render it

(2)

(3)

(4)

Test: 1, 2; pretty: (3), (4). Non-existent: ?.