Posted by Ben C on 11/20/06 08:08

On 2006-11-20, Chris Chiasson <chris.chiasson@gmail.com> wrote:
> situation:
> placing an inline graphic of some mathematics typesetting (an equation
> or whatever) in an html (not xhtml) environment
>
> assume the dpi of the user's screen is known
> assume the baseline to image-bottom distance is known (in printer's
> points)
>
> Is there any combination of html markup or markup + css that will cause
> browsers to place the image so that its internal baseline aligns with
> that of the surrounding text (or at least comes close)?

The browser will (with text-align: baseline, the default) align the
bottom edge of the image to the baseline. Since the baseline of the
equation in the image is a known distance from the bottom of the image
in pixels, you could just move it down by that amount with relative
positioning.

position: relative;
top: 12px;

where 12px is the distance from the baseline in the image to the bottom
of the image.

You can covert printer's points to pixels if you know the dpi (and I
don't know a way of detecting that). You could also consider using pt
units for the relative offset, then the browser should take into account
the user's dpi.

[Back to original message]