Pixel-accurate text alignment

Question

I'm using JavaScript to inflate a span of left-aligned text until it fills its container, or until it reaches variable thresholds in either height or width. This process results in a widely varying font-size.

My problem is that, with certain characters, there is a small amount of padding on the left... and while normally it's not noticeable, with very large font sizes it can reach 10 pixels or more.

I whipped up a page to demonstrate the effect on various characters: http://jsfiddle.net/kBu7S/

The text span exists in a design where every other element going down the page is aligned pixel for pixel to the left edge, so it's very visually distracting with the larger text sizes.

Can anyone think of a way to calculate the amount of padding, so that I can bump the relative position of the span? Or maybe there's even a CSS solution? (letter-spacing and word-spacing have no effect.)

I'll admit that even a dirty solution seems pretty unlikely... thanks for your consideration though.

Answer 1

Well, you could build a script to generate an image using the same typeface with the same size (black on white background) and read the bitmap to count the distance from the left edge to the first black pixel.

It's kind of overkill, but it's the only thing I can think of.

Answer 2

This worked on the fiddle:

#text:first-letter { margin-left:-3px}

You could expand that to a class...

.fontCorrection:first-letter { margin-left:-3px }

...and apply it as appropriate.

Answer 3

The padding is often called the "shoulder" of the type, and it's intrinsic to the design of the typeface. There's no simple way to counter-act it, because it's there for optical reasons, to give the type the right spacing. After all, if you type IIIIIII, you need to have some spacing between the capital I's, and that only comes from this padding. Other characters, like WWWWWW, need none.

Your best bet is to do an experiment with your typeface, and measure the actual padding on each character, then build a table mapping characters to their paddings. Then you can adjust the character's position. This is a lot of work, but I don't know what else you can do.