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

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>

Thanks!!!  --josh


----- Original Message -----
From: Tab Atkins Jr. <jackalmage@gmail.com>
To: Joshua Richardson <jric@yahoo.com>
Cc: "www-style@w3.org" <www-style@w3.org>
Sent: Wednesday, August 31, 2011 4:26 PM
Subject: Re: [css-2010] spec for positioning text by its baseline

On Wed, Aug 31, 2011 at 4:25 PM, Joshua Richardson <jric@yahoo.com> wrote:
> Thank you for the pointers -- these could be useful tools.  To clarify, neither of these proposals will solve the problem, "I want the baseline of my text to be exactly at location y," correct?

Yes.  They will help you align the baseline of one element (or its
text) with the baseline of something else.

~TJ

Received on Monday, 5 September 2011 16:24:13 UTC