Re: New Working Draft: Positioning HTML Elements with Cascading Style Sheets

Jim King wrote:
> >> 2)Is there a particular reason that you can't make the line-height take
> >> relative positioning into account?  If I have an image that forces the
> >> line-height larger, then I subscript that image using {position:
> >> relative...}, that will leave a large amount of white space above the image
> >> and overlap the bottom.  While I can see the power of having the line-height
> >> NOT adjust, it would be good to have the option.
> >Good question. Could you come up with a quick example that illustrates this,
> >which I can forward to the document authors?
> 
> Here's an example that my company worries about all the time - an inline
> equation that should be vertically aligned so that the baseline of the text
> inside lines up with the baseline of the text outside.  All values are in
> em's because we want the equation to size properly with the browser's text:
> 
> <P>This is line 1</P>
> <P>This is an inline equation on line 2:
>     <IMG STYLE="height: 6em; width: 10em;
>                 position: relative;
>                 top: 2.5em;"
>          SRC="equation.gif">
> <BR>
> This is line 3, but it is very long to make sure the overlap happens.</P>
> 
> In the above example, since the line height is not changed by positioning,
> there would be a large gap between line 1 and 2, and the equation would
> overwrite (or be overwritten by, since the z-order isn't defined explicitly)
> the line below it.

This is not something for the proposed positioning features. The goal of
WD-positioning is to allow elements to be put in other places than where
they belong typographically. The example you give is a simple matter of
finding the proper vertical alignment,

The straightforward way would be to use this:

    <P>This is an inline equation on line 2:
     <IMG STYLE="height: 6em; width: 10em;
*                vertical-align: -2.5em"
          SRC="equation.gif">
    <BR>
    This is line 3, but it is very long to make sure the overlap
happens.</P>

(Note the negative -2.5em, since vertical-align moves things up by
default.)

There is one problem with this: it is not in CSS1... But there is a
workaround. Vertical-align allows percentages, which are relative to the
line-height value, so you can do this hack instead:

    <P>This is an inline equation on line 2:
     <IMG STYLE="height: 6em; width: 10em;
                 line-height: 2.5em;
                 vertical-align: -100%"
          SRC="equation.gif">
    <BR>
    This is line 3, but it is very long to make sure the overlap
happens.</P>

A bit longer, but it should give the right result.

Of course, we are seriously considering allowing <length> on
vertical-align.


Bert

Received on Tuesday, 4 February 1997 13:17:46 UTC