Re: [css-2010] spec for positioning text by its baseline

On Thu, Sep 1, 2011 at 10:17 AM, Joshua Richardson <jric@yahoo.com> wrote:
> Can that "something else" to which I can align my baseline be a fixed-position block?  In reading the flex-box draft, I couldn't see how it would be done.  The most relevant portion seems to be:
>
> "...all flexbox items on the line with ‘flex-align:baseline’ ... are aligned such that their baselines align, and the item with the largest distance between its baseline and its cross-start margin edge is placed flush against the cross-start edge of the line."
>
> The way I read that is that I can have my text aligned at the ^top^.  It's an improvement, but it still leaves the user-agent to figure out where the baseline will be.  If it can be done, would you mind showing how you would envision achieving the result from my previous example, using flex-box layout?  This is the html example, using an imaginary "baseline" attribute:
>
> <style type="text/css"> p {margin:0;padding:0} </style>
>
> <img src="myimg.jpg" position="absolute" top="100px" width="50px" height="75px"/>
> <div style="position:absolute;top:100px;left:55px;width:500px;height:75px">
> <p style="position:absolute;top:0px;">This caption is aligned with the top of the image!</p>
> <p style="position:absolute;bottom:0px;">The tail of my "g" is aligned with the bottom of the image!</p>
> <p style="position:absolute;baseline:0px;">The non-descending (majority) of the glyphs in the bottom line of this caption are sitting at the bottom of the image!</p>
> </div>

No, flexbox would allow you to align flexbox items at their baseline.
It wouldn't affect absolutely positioned elements at all.

Note, though, that the baseline of a block element is the baseline of
its first line, iirc.  You'd need an additional control to make it
instead report its last line as its baseline.

(Your example also doesn't quite work - the <img> isn't in the
wrapping <div>, so it doesn't contribute to the <div>'s own lines.
The 'baseline' <p> would just be aligning to the <div>'s phantom
linebox, since it doesn't contain any actual text.  You'd just need to
put the <img> into the <div>, and leave it as an ordinary inline
element.)

While I don't like the mechanics of the 'baseline' property ('top' and
'bottom' interact with 'height' when any of them are auto.  How do any
of those three interact with 'baseline'?), I think the idea of
aligning more things in the box is useful.  I'll keep this in mind as
we work on the Positioning spec.

~TJ

Received on Tuesday, 6 September 2011 15:42:25 UTC