It would be nice if the LaTeX equations that are generated were vertically aligned.
For example, the input Hello [$]3_\textrm{World}[/$], renders as
whereas something like
would be better. Fractions are especially ugly in the current way.
For the implementation details, dvipng generates a depth file which indicates the offset of the image: from the dvipng manpage
--depth*
Report the depth of the image. This only works reliably when the LaTeX style preview.sty from preview-latex is used with the
active option. It reports the number of pixels from the bottom of the image to the baseline of the image. This can be used
for vertical positioning of the image in, e.g., web documents, where one would use (Cascading StyleSheets 1)
<img src="<filename.png>" style="vertical-align: -<depth>px">
The depth is a negative offset in this case, so the minus sign is necessary, and the unit is pixels (px).
Also note that in the latter version, the image has been rescaled so the font size matches the one of the surrounding context. This can also be achieved by dvipng, with the -D option: from the dvipng manpage
-D num
Set the output resolution, both horizontal and vertical, to num dpi (dots per inch).
One may want to adjust this to fit a certain text font size (e.g., on a web page), and for a text font height of font_px
pixels (in Mozilla) the correct formula is
<dpi> = <font_px> * 72.27 / 10 [px * TeXpt/in / TeXpt]
The last division by ten is due to the standard font height 10pt in your document, if you use 12pt, divide by 12.
Unfortunately, some proprietary browsers have font height in pt (points), not pixels. You have to rescale that to pixels,
using the screen resolution (default is usually 96 dpi) which means the formula is
<font_px> = <font_pt> * 96 / 72 [pt * px/in / (pt/in)]
On some high-res screens, the value is instead 120 dpi. Good luck!
By the way, the latter output was generated by a firefox extension called LaTeX It!, which does exactly that, converting pieces of mail surrounded by $ into images and inserting them back inlined. Here is the link to their implementation.