[css3-2d-transforms][cssom-view] Transforming text from the baseline

I have recently been experimenting with using CSS3 to animate text[1]
in the manner termed 'kinetic typography'[2]. One problem I've
encountered is creating transforms whose origin is the baseline of
some text[3]. While there are workarounds, I think it would be very
useful if CSS supported declaratively setting a transform's origin to
be the baseline, and programatically retrieving the position of a
baseline for an element. I'm not aware if there has already been any
work in this area, but my proposals would be as follows:

Allow the transform-origin property to have a value of 'baseline':

#element {
   transform-origin: left baseline;
}

In the case of an inline-level element, this would cause the origin of
the transform to be the position of the baseline in the element's
first inline box. For a block-level element, the origin would be the
position of the baseline in the first inline box of the block's first
inline-level element (which might be anonymous). If the block
contained no inline-level elements at all, it would be equivalent to
the default value of 50%.

This could be extended further, to allow specifying other line
positions such as sub or super, or non-dominant baselines via some
syntax like baseline(ideographic), but it seems like just allowing
'baseline' would cover 99% of the likely use-cases.

I also propose making it possible to retrieve the baseline position
via script. I was quite surprised that there did not seem to be a
standard, non-hacky, way to do this. If there is, and I'm just not
aware of it, please disregard this. Otherwise, I suggest an additional
extension to the HTMLElement interface, similar to those already
defined in the CSSOM View Module. Something like 'baselineOffset'
that, when called on an element, would return the size of the gap
between the baseline and the top of the element's first inline box's
content-area, where the inline box is determined in the same manner as
described above, and 'top' is whichever edge is appropriate as per
bidi requirements (which I won't pretend to understand).

I'm hopeful that, given that the baseline information must already
exist within layout engines, implementation would not be unreasonably
hard.

Any questions? Comments?

[1] http://www.brillskills.com/fu/ (requires a webkit-based browser)
[2] http://en.wikipedia.org/wiki/Kinetic_typography
[3] http://www.brillskills.com/kinetic/

Jon Rimmer

Received on Sunday, 20 February 2011 22:51:27 UTC