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

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?

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 2:33 PM
Subject: Re: [css-2010] spec for positioning text by its baseline

On Tue, Aug 23, 2011 at 10:37 PM, Joshua Richardson <jric@yahoo.com> wrote:
> Hi,
>
> In searching through the CSS 3 archived discussions, I haven't come across any proposed solution to the following problem.  I'm hoping someone on the list can consider this problem, let me know if there is already a proposed solution, and if not, entertain the enclosed solution, or let me know if there is a more appropriate mailing list or subject line.
>
> BACKGROUND:
>
> Font programs draw glyphs using drawing commands relative to a defined "origin".  The vertical aspect of the origin is also known as the "baseline".  Text-setting software typically positions text relative to this baseline, which would correspond to the bottom of an "e", or to the bottom of the circle in a "p", but not to the tail of the "p", which descends below the baseline.
>
> In CSS, however, font rendering appears to be done in reference to a container, the "linebox", and thus the baseline of rendered text is never directly positioned, but the bounding box of the font's ascent and descent are used, and the baseline is computed somewhere in between the top of a "d" (ascent) and the bottom of the tail of a "p" (descent.)  The best you can easily achieve is to position the top or the bottom of the linebox, and let the user agent figure out where to put the baseline.  (Usually when you do this, you see some unexpected whitespace above or below the text, because the font metrics that the user agent uses to compute the baseline are not completely accurate, or not what you expect, but that's just an aside.)
>
> PROBLEM:
>
> If you want to have the baseline of your text line up with something that has been explicitly positioned, or just to be exactly where you desire, then you cannot do it without reverse engineering the user-agent's algorithm, or by trial-and-error.  Interesting to note that if you want a block element to line up with the baseline of your text, you can make the block an in-line element and use the valign CSS property.  However, you cannot do the reverse and align the baseline of text to a given block (out-of-line) element.
>
> In a related vein, you cannot easily translate traditional typeset documents to CSS-based documents.  Even if you duplicate the positioning algorithm, you will fail to achieve the same visual result as the original in cases where the font metrics (ascent and descent) are wrong.  So documents like PDF's cannot be accurately converted to HTML/CSS.
>
> PROPOSAL:
>
> How about a new positioning attribute, analogous to "top" or "bottom", which would allow you to explicitly select the position of the baseline relative to the bottom of a parent element.  Unlike "top" or "bottom", "baseline" would not (re)position the block itself, but instead position descendent inline blocks / text.  In the case of wrapped text, it would position the baseline of the lowest text.  So, if you wanted to put a caption next to an image, you could do it with markup like the following:
>
> <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>

There are two specs/proposals that may address your use-case.

On the nearer side, Flexbox Layout
<http://dev.w3.org/csswg/css3-flexbox> can align elements by their
baselines.  This is somewhat limited, but it should be able to address
your use-case.

A bit further away, Fantasai and Koji will be working on a Line Grid
spec that allows you to set up a grid from a particular element's
text, and align other elements' text according to that grid.  This may
help with some variants of your use-case, where you want text from
multiple elements to line up along their baseline.  (You can do things
like making an image inline or inline-block to force it into the
inline layout mode and thus amenable to aligning on the line grid.)

~TJ

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