«

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)?


Follow up (assuming the above is possible):
Is there any way to detect the dpi of the user's screen, perhaps
through the use of java script? (obviously, most Windows user's screens
behave as if they are rendering at 90dpi, even if that isn't the
physical dpi of the screen+resolution combo... so 90 would be a good
guess)

On 2006-11-20, Chris Chiasson <> 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.

Chris Chiasson 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)?
>
>
> Follow up (assuming the above is possible):
> Is there any way to detect the dpi of the user's screen, perhaps
> through the use of java script? (obviously, most Windows user's screens
> behave as if they are rendering at 90dpi, even if that isn't the
> physical dpi of the screen+resolution combo... so 90 would be a good
> guess)
>

Use CSS see:

http://www.w3.org/TR/CSS21/visudet.h...vertical-align


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Ben C & Jonathan N. Little

Thank you both. I went with the CSS vertical-align property on an
inline style attribute. I used point units. I have posted some examples
online (which assume a screen dpi of 86, since I haven't implemented
any kind of dpi detection and 86 is my screen dpi):

http://groups-beta.google.com/group/mmade/web/samples

Chris Chiasson wrote:
> Ben C & Jonathan N. Little
>
> Thank you both. I went with the CSS vertical-align property on an
> inline style attribute. I used point units. I have posted some examples
> online (which assume a screen dpi of 86, since I haven't implemented
> any kind of dpi detection and 86 is my screen dpi):

No-no... Points are for printing! Use "em" or "%" for display...

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

I disagree here. The pieces of graphics (which contain mathematical
typesetting) will not change size when the font size goes up and down
unless I give their width and height in em or percent. Browsers are
horrible at scaling graphics, especially graphics that contain fine
text, so I need to leave the graphics unscaled. If I have fixed
graphics sizes, then the vertical-align needs to be a fixed distance
also.

If people don't want the fixed baseline adjustment, they can use the
MathML version of the page.

Chris Chiasson wrote:
> I disagree here. The pieces of graphics (which contain mathematical
> typesetting) will not change size when the font size goes up and down
> unless I give their width and height in em or percent. Browsers are
> horrible at scaling graphics, especially graphics that contain fine
> text, so I need to leave the graphics unscaled. If I have fixed
> graphics sizes, then the vertical-align needs to be a fixed distance
> also.
>
> If people don't want the fixed baseline adjustment, they can use the
> MathML version of the page.
>
Firstly, you should quote what you are replying to, not everyone,
including me, uses Google Groups in Usenet so we to not see the whole
thread as a webpage. Your posting then has not reference and the
continuity is lost...

With respect display, linear units such as points, inches, feet,
millimeter mean nothing really because all depends on the monitors
resolution, which you have not control over. Use points if you which in
your print stylesheet, but not in your "screen" one. Was not suggesting
that you use the browser to scale your graphics, but not that if you mix
graphics and text, on a webpage you do not have absolute control over
the size of the font, nor the font face use in fact! You must take that
into consideration.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Jonathan N. Little wrote:
> Firstly, you should quote what you are replying to, not everyone,
> including me, uses Google Groups in Usenet so we to not see the whole
> thread as a webpage. Your posting then has not reference and the
> continuity is lost...

Please accept my apologies.

> Was not suggesting
> that you use the browser to scale your graphics, but not that if you mix
> graphics and text, on a webpage you do not have absolute control over
> the size of the font, nor the font face use in fact! You must take that
> into consideration.

I know you weren't suggesting that I have scalable graphics. However,
you did direct me to specify my baseline adjustment for my non-scalable
graphics in a scalable unit. I was just telling you that the only way a
scalable baseline adjustment would be acceptable was in the presence of
scaled graphics, which presently don't work very well.

I am certainly aware of the need for flexible layouts (and other
accessibility features), and I have provided an XHTML+MathML output
option in my program to enable that.

Chris Chiasson wrote:

> I know you weren't suggesting that I have scalable graphics. However,
> you did direct me to specify my baseline adjustment for my non-scalable
> graphics in a scalable unit. I was just telling you that the only way a
> scalable baseline adjustment would be acceptable was in the presence of
> scaled graphics, which presently don't work very well.

What I'm saying is the text will be scalable whether or not you wish it,
and pt, as with in and cm don't really meant anything with respect to
"displayed" presentation. Best to use a proportional unit that is
relative to the font's size, then if the font increases or decreases in
size the spacing remains proportional to the font.
>
> I am certainly aware of the need for flexible layouts (and other
> accessibility features), and I have provided an XHTML+MathML output
> option in my program to enable that.
>
That is where XHTML shines...

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Jonathan N. Little wrote:
> What I'm saying is the text will be scalable whether or not you wish it,
> and pt, as with in and cm don't really meant anything with respect to
> "displayed" presentation. Best to use a proportional unit that is
> relative to the font's size, then if the font increases or decreases in
> size the spacing remains proportional to the font.

An inline graphic is displayed, by default, with its lower edge on the
baseline of the text surrounding the graphic. If the surrounding text
changes size or font face, the location of the baseline could move, but
the graphic would still have its lower edge on the baseline. Since I am
setting the vertical-align property to the negative of the distance
from the graphic's lower edge to the internal baseline of the image -
the distance needs to be a fixed distance.

There is a good argument for expressing that distance in pixels, but I
really don't see the case for em or %.

> That is where XHTML shines...

Aye