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

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>

Thanks!  --josh

Received on Wednesday, 31 August 2011 17:10:01 UTC