aligning typeset graphics to text baselines

C

Chris Chiasson

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

Ben C

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.
 
J

Jonathan N. Little

Chris said:
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.html#propdef-vertical-align
 
C

Chris Chiasson

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
 
J

Jonathan N. Little

Chris said:
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...
 
C

Chris Chiasson

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.
 
J

Jonathan N. Little

Chris said:
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.
 
C

Chris Chiasson

Jonathan said:
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.
 
J

Jonathan N. Little

Chris said:
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...
 
C

Chris Chiasson

Jonathan said:
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
 
J

Jonathan N. Little

Chris said:
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 %.

For a character the distance from the baseline to the bottom is the
descender length. That will change with the scaling of the font. Keeping
a proportional spacing for this dimension one would use a unit that was
proportionally linked to the font, "em" or "%". But if you are aligning
a static graphic, especially with some discrete offset to the text
baseline then yes you should use "px" since a pixel is a pixel on your
monitor or mine. The graphic is in pixels so if the offset is in pixels
the offset will remain constant. Where I had issue was using *points*.
Point, inches, centimeters, and such are not "constant" with respect to
the screen and are not the type of unit that you should have used in the
described application.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,901
Latest member
Noble71S45

Latest Threads

Top