aligning typeset graphics to text baselines

Discussion in 'HTML' started by Chris Chiasson, Nov 20, 2006.

  1. 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)
    Chris Chiasson, Nov 20, 2006
    #1
    1. Advertising

  2. Chris  Chiasson

    Ben C Guest

    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.
    Ben C, Nov 20, 2006
    #2
    1. Advertising

  3. 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.html#propdef-vertical-align


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Nov 20, 2006
    #3
  4. 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, Dec 6, 2006
    #4
  5. 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
    Jonathan N. Little, Dec 6, 2006
    #5
  6. 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, Dec 6, 2006
    #6
  7. 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, Dec 6, 2006
    #7
  8. 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, Dec 6, 2006
    #8
  9. 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, Dec 6, 2006
    #9
  10. 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
    Chris Chiasson, Dec 6, 2006
    #10
  11. Chris Chiasson wrote:

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

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Dec 6, 2006
    #11
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Onur Bozkurt

    Re: aligning text in a asp label

    Onur Bozkurt, Jul 25, 2003, in forum: ASP .Net
    Replies:
    0
    Views:
    759
    Onur Bozkurt
    Jul 25, 2003
  2. =?Utf-8?B?Sm9l?=

    Aligning text

    =?Utf-8?B?Sm9l?=, Jan 25, 2006, in forum: ASP .Net
    Replies:
    2
    Views:
    1,193
    =?Utf-8?B?Sm9l?=
    Jan 25, 2006
  3. Phillip
    Replies:
    2
    Views:
    3,182
  4. Josh McFarlane

    How to update typeset on classes

    Josh McFarlane, May 26, 2005, in forum: C++
    Replies:
    1
    Views:
    293
    Josh McFarlane
    May 26, 2005
  5. Steven Bethard

    aligning text with space-normalized text

    Steven Bethard, Jun 30, 2005, in forum: Python
    Replies:
    6
    Views:
    376
    Steven Bethard
    Jul 1, 2005
Loading...

Share This Page