Kerning on the fly

Do anyone know any algorithm which would calculate automatically kerning of characters based on glyph shapes when user types text?

I don’t mean trivial calculation of advance widths or similar, I mean analyzing the shape of glyphs to estimate the visually optimal distance between characters. For example if we lay out three characters sequentially in a line, the middle character should SEEM to be in the center of the line despite of the character’s shapes. An example enlightens the kerning-on-the-fly functionality:

An example of kerning-on-the-fly:


In the above image a seems to be too right. It should be shifted a certain amount towards T so that it seems to be in the middle of T and g. The algorithm should examine the shapes of T and a (and possibly other letters also) and decide how much a have to be shifted to the left. This certain amount is the thing that the algorithm should calculate – WITHOUT EXAMINING THE POSSIBLE KERNING PAIRS OF THE FONT.

I’m thinking of coding a javascript (+svg+html) program that uses hand drawn fonts and many of them lacks kerning pairs. The textfields will be editable and can include text of multiple fonts. I think that kerning-on-the-fly could be one way to ensure mean text flow in this case.

EDIT: One starting point to this could be to use svg font, so it’s easy to get path values. In svg font the path is defined this way:

<glyph glyph-name="T" unicode="T" horiz-adv-x="1251" d="M531 0v1293h

<glyph glyph-name="a" unicode="a" horiz-adv-x="1139" d="M828 131q-100 -85
-192.5 -120t-198.5 -35q-175 0 -269 85.5t-94 218.5q0 78 35.5 142.5t93
103.5t129.5 59q53 14 160 27q218 26 321 62q1 37 1 47q0 110 -51 155q-69 61
-205 61q-127 0 -187.5 -44.5t-89.5 -157.5l-176 24q24 113 79 182.5t159
107t241 37.5 q136 0 221 -32t125 -80.5t56 -122.5q9 -46 9 -166v-240q0
-251 11.5 -317.5t45.5 -127.5h-188q-28 56 -36 131zM813 533q-98 -40 -294
-68q-111 -16 -157 -36t-71 -58.5t-25 -85.5q0 -72 54.5 -120t159.5 -48q104
0 185 45.5t119 124.5q29 61 29 180v66z"/>

The algorithm (or javascript code) should examine those paths some way and determine the optimal distance between them.


I know this is old. I’m working on this right now in a WebGL implementation of wobbly text (whatever). The solution I’m working on goes like this:

  1. Get a bitmapped version of the glyph pair (or do it with vectors if you want)
  2. For each row of pixels (or arbitrary vertical unit if you go with vectors), check that both glyphs have at least one pixel present
  3. For each row that passes step 2, calculate the distance between the rightmost pixel of the first glyph and leftmost pixel of the second glyph
  4. Move the second glyph as far left as it can go while still meeting these criteria:
    • the gap in that row of pixels is greater than some minimum gap you specified
    • the total_area ÷ usable_rows (ignoring rows with no pixel in one of the glyphs) is greater than some average gap-width you specified

That way, the empty ‘area’ between letters should get squeezed to a pretty common average. Specify the minimum gap and the minimum area using trial and error and your own taste, and maybe allow those parameters to be adjusted by some other agent as well… like a manual kerning value.

yay 🙂

Edit: I’ve implimented this successfully now and it works really well 🙂

Source : Link , Question Author : Timo Kähkönen , Answer Author : jaya

Leave a Comment