Identifying kerning values

AbuAaminah's picture

Hi everyone,

For a project that I am working on in PHP/HTML/CSS, I have to string glyphs together as seperate images. So, a word like "how" would be presented as a string of images with one image representing each letter.

As each glyph image has been saved without padding, the kerning has to be figured out separately.

My question, therefore, is how do I identify the scalable kerning values of a font so that I can calculate a pixel kerning value based on the font's size. (Fortunately, the font being used doesn't have any kerning pairs, which simplifies things a lot.)

Meanwhile, does anyone have any idea how to parse a font file in php?

Thanks for your help.

p.s. Sorry if I'm posting in the wrong board.

Thomas Phinney's picture

Perhaps I'm missing something, or misunderstanding the question.

If the font has no kerning, there's nothing to identify. You could do your own kerning somehow. Or perhaps you really mean tracking, not kerning? (Kerning is adjusting spacing between individual letters based on their particular shapes, while tracking is adding or subtracting a standard amount of space to all the letters.)

Regards,

T

AbuAaminah's picture

Thanks for correcting me. In this case, its the tracking info which I'm after.

Thomas Phinney's picture

No problem. Thanks for clarifying your question.

What size range do you expect to be doing this with, and with what sorts of typefaces? Can you tell us more about the usage?

AFAIK there is no standard for tracking based on type size. To the degree to which there is some consensus, I think it is that type on screen benefits from being looser than type in print at the same nominal size, particularly at text sizes.

Another consideration is that different typefaces may be designed for use at different sizes and for screen or print, and spaced appropriately. So for example Verdana is designed and spaced to be used on screen at typical text sizes, and is spaced appropriately loosely as a result. There are few situations in which I can easily imagine needing to increase tracking for Verdana. But there are many situations in which I could imagine doing the same for Times, Helvetica, or Arial.

Regards,

T

kentlew's picture

Thomas, if I understand correctly, the poster is asking about the sidebearings or advance widths ("As each glyph image has been saved without padding . . .")

The location of this information depends upon what format the original font is. And I don't anything about parsing it in PHP, but I'm sure the more technically inclined here might.

AbuAaminah's picture

Thanks for the responses guys.

At the moment, the use-case is very limited. I'm simply working with BellCential-StdAddress at size 12 and size 20, but the technique I am working on is something I would reuse in the future on other typefaces at other sizes. So, I'm trying to get things right first time so that I can apply the technique to any font at any size.

My thoughts were that, if the font's default tracking was included within the font's file, it could be extracted and applied accordingly. I would have thought that tracking would be based on some kind of ratio to another metric of the font and I could then calculate a pixel equivalent based on those 2 pieces of information and the font size.

Thanks again for your help guys.

Thomas Phinney's picture

Actually, I think Kent is right, and you are probably actually wanting the sidebearings. That is, in the original font, how much space exists between the outline of each letter and the left and right edges of the space it occupies.

Ignoring monospaced (typewriter style) fonts for a moment, this varies depending on the letter, based on underlying design characteristics of the letter. This info *is* in the original font, but in most formats it is only accessible by actually analyzing the outline structure of every glyph.

Most applications setting text don't normally have to keep track of this themselves, even when creating bitmaps. They define where they want the text to start. Then they plop down a glyph. OS APIs tell them how much total space each glyph takes (including sidebearings), which is essentially how far to move to allow for the next glyph....

Regards,

T

kentlew's picture

Thomas, correct me if I'm wrong, but in a PS Type 1 font this information could be easily gathered from the AFM file, no? Values are given for each character, which include among other things, the leftmost point and the advance width, right? Couldn't a bounding box for an image be derived from that information, converting to pixels and rounding?

-- K.

Theunis de Jong's picture

Values are given for each character, which include among other things, the leftmost point and the advance width [..]

See this snip:

C -1 ; WX 488 ; N checkmark ; B 22 -9 465 454 ;

WX is the total advance width, B is the bounding box, in lower-left x, lower-left y, upper-right x, upper-right y order. So, advance to position leftx, draw (blit) the character, advance by WX. Properly scaled from 1000 units to the actual em-width in pixels, of course.

You cannot blit straightforward, because character boxes may overlap; however, that should not be beyond your capabilities :-)

If you can handle FreeType, this works in precisely the same way. Ask FT to draw a bitmap for a character, and it returns the very same values, together with a tightly cropped bitmap (you also have to position the bitmap vertically). You could ask the FT lib to re-generate the characters in your font to the same size, and store the values of interest. Then use the bitmaps you already have.

[Add bonus points if you also use the kerning values for micro-adjustments!]

Thomas Phinney's picture

Kent: You're right about the AFM having that data for Type 1 fonts. Of course, a loose Type 1 font in the wild may or may not have an AFM, and other formats won't; an OpenType font such as the one used in this case won't have an AFM. I am reasonably sure I remember some Adobe engineers having the same need and not having any way to get the info short of analyzing glyph outlines.

Cheers,

T

AbuAaminah's picture

Thanks for the feedback once again.

Two additional pieces of information which might help you to help me are:

1. The images of each letter that I am working with are of their bounding box.

2. I am working, at the moment, with an OTF file.

Lastly, can anyone point me to a resource that could let me learn as to what & how information is stored in a font file.

Many thanks once again.

Frode Bo Helland's picture

http://no2.php.net/manual/en/function.imagefttext.php
http://no2.php.net/manual/en/function.imageftbbox.php

There are tutorials out there explaining easy image replacement methods as well.

AbuAaminah's picture

Hi Frode,

Those functions are the ones which I'm working with already and the image replacement method I'm working on is quite different to the others already available.

One of the complaints of PHP developers is PHP doesn't handle kerning well, so one thing I would like to do is overcome that. Fortunately, with the font I'm working with, there are no kerning pairs, so it's not that important right now.

More important is calculating the default tracking value for a font at any given size because I am working with individual letters (rather than words, in which case PHP would handle the tracking itself).

For this reason, I was hoping that (a) the default tracking metric would be included within the font file and (b) I could figure out how to parse it via PHP.

Thanks for your help.

Frode Bo Helland's picture

Forgive me, Abu. I read through the posts pretty quick. I'd love to hear more about the project! Are you trying to work out a better way to display fonts (not native to the basic operating systems) online? Check out the kirupa.com forums! There's quite a few highly skilled coders over there, more than likely to help you out.

Frode Bo Helland's picture

If this is a project only to be used personally, you might be able to export kerning data from the typeface (from Fontlab?) and let PHP use them to determine "kerning" between images.

Frode Bo Helland's picture

And I guess my biggest problem is posting late at night ;) Tracking values can be read – as imagefttext obviously do it. Why don't you ask the guys who developed it?

AbuAaminah's picture

Hi Frode,

With regards to the project, it is a semi-new way of displaying non-native fonts on web pages. It not a "fonts for the masses" project like sIFR or Facelift etc, but it works on similar concepts and seeks to overcome some of the main issues we faced on all of them.

With regards to the flashkit link, I have that bookmarked to look at once I can extract the relevant info. Fortunately, the font I'm working with right now doesn't have any kerning pairs, so its not that urgent, but it would be for the future.

With regards to contacting the guys who developed it, that is an excellent idea which did cross my mind. Any idea how?

Thanks

skoob's picture

Those PHP functions use the Freetype library, which is probably what you'll want to use. To use Freetype functions from PHP, you'll need to create your own PHP extension, basically wrapping Freetype and exposing the relevant functions to PHP.

This Freetype tutorial might help. You could also try asking their mailing list.

AbuAaminah's picture

Thanks for the link skoob. I'll get in touch with them through their site.

Syndicate content Syndicate content