Align text baseline to specific vertical ratio of image

Question

Suppose I have the following shitty awesome logo with some artistic text in it that can not be rendered with a WebFont downloaded font

Within the image the text baseline is 68% from the top / 32% from the bottom.

Now I'd like to align text of a HTML document, in which this image has been included into, with the baseline of the text in the image, which I know to be at a specific vertical ratio of the image height.

What CSS properties and which HTML <div> / <span> nesting structure do I need for this?

Answer 1

The best I could come up with is to use CSS3 transform with translateY. Something like this:

img {
    transfom:translateY(32%);
    -webkit-transfom:translateY(32%);
}

Working example in this fiddle: http://jsfiddle.net/HhFLf/