ref: 78b5f17a153ef761ac638c133e4831a66c05bb71
dir: /docs/glyphs/glyphs-4.html/
<!doctype html public "-//w3c//dtd html 4.0 transitional//en"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="Author"
content="David Turner">
<title>FreeType Glyph Conventions</title>
</head>
<body text="#000000"
bgcolor="#FFFFFF"
link="#0000EF"
vlink="#51188E"
alink="#FF0000">
<h1 align=center>
FreeType Glyph Conventions
</h1>
<h2 align=center>
Version 2.1
</h2>
<h3 align=center>
Copyright 1998-2000 David Turner (<a
href="mailto:[email protected]">[email protected]</a>)<br>
Copyright 2000 The FreeType Development Team (<a
href="mailto:[email protected]">[email protected]</a>)
</h3>
<center>
<table width="65%">
<tr><td>
<center>
<table width="100%"
border=0
cellpadding=5>
<tr bgcolor="#CCFFCC"
valign=center>
<td align=center
width="30%">
<a href="glyphs-3.html">Previous</a>
</td>
<td align=center
width="30%">
<a href="index.html">Contents</a>
</td>
<td align=center
width="30%">
<a href="glyphs-4.html">Next</a>
</td>
</tr>
</table>
</center>
<p><hr></p>
<table width="100%">
<tr bgcolor="#CCCCFF"
valign=center><td>
<h2>
IV. Kerning
</h2>
</td></tr>
</table>
<p>The term <em>kerning</em> refers to specific information used to
adjust the relative positions of coincident glyphs in a string of text.
This section describes several types of kerning information, as well as
the way to process them when performing text layout.</p>
<a name="section-1">
<h3>
1. Kerning pairs
</h3>
<p>Kerning consists of modifying the spacing between two successive
glyphs according to their outlines. For example, a "T" and a "y" can be
easily moved closer, as the top of the "y" fits nicely under the upper
right bar of the "T".</p>
<p>When laying out text with only their standard widths, some
consecutive glyphs seem a bit too close or too distant. For example,
the space between the "A" and the "V" in the following word seems a
little wider than needed.</p>
<center><p>
<img src="bravo_unkerned.png"
height=37 width=116
alt="the word 'bravo' unkerned">
</p></center>
<p>Compare this to the same word, where the distance between these two
letters has been slightly reduced:</p>
<center><p>
<img src="bravo_kerned.png"
height=37 width=107
alt="the word 'bravo' with kerning">
</p></center>
<p>As you can see, this adjustment can make a great difference. Some
font faces thus include a table containing kerning distances for a set
of given glyph pairs for text layout.</p>
<ul>
<li>
<p>The pairs are ordered, i.e., the space for pair (A,V) isn't
necessarily the space for pair (V,A). They also index glyphs, and
not characters.</p>
</li>
<li>
<p>Kerning distances can be expressed in horizontal or vertical
directions, depending on layout and/or script. For example, some
horizontal layouts like Arabic can make use of vertical kerning
adjustments between successive glyphs. A vertical script can have
vertical kerning distances.</p>
</li>
<li>
<p>Kerning distances are expressed in grid units. They are usually
oriented in the <i>X</i> axis, which means that a negative
value indicates that two glyphs must be set closer in a horizontal
layout.</p>
</li>
</ul>
<a name="section-2">
<h3>
2. Applying kerning
</h3>
<p>Applying kerning when rendering text is a rather easy process. It
merely consists in adding the scaled kern distance to the pen position
before writing each next glyph. However, the typographically correct
renderer must take a few more details in consideration.</p>
<p>The "sliding dot" problem is a good example: Many font faces include
a kerning distance between capital letters like "T" or "F" and a
following dot ("."), in order to slide the latter glyph just right to
their main leg:</p>
<center><p>
<img src="twlewis1.png"
height=38 width=314
alt="example for sliding dots">
</p></center>
<p>This sometimes requires additional adjustments between the dot and
the letter following it, depending on the shapes of the enclosing
letters. When applying "standard" kerning adjustments, the previous
sentence would become:</p>
<center><p>
<img src="twlewis2.png"
height=36 width=115
alt="example for too much kerning">
</p></center>
<p>This is clearly too contracted. The solution here, as exhibited in
the first example, is to only slide the dots when possible. Of course,
this requires a certain knowledge of the text's meaning. The above
adjustments would not necessarily be welcome if we were rendering the
final dot of a given paragraph.</p.
<p>This is only one example, and there are many others showing that a
real typographer is needed to layout text properly. If not available,
some kind of user interaction or tagging of the text could be used to
specify some adjustments, but in all cases, this requires some support
in applications and text libraries.</p>
<p>For more mundane and common uses, however, we can have a very simple
algorithm, which avoids the sliding dot problem, and others, though not
producing optimal results. It can be seen as</p>
<ol>
<li>
Place the first glyph on the baseline.
</li>
<li>
Save the location of the pen position/origin in <tt>pen1</tt>.
</li>
<li>
Adjust the pen position with the kerning distance between the first
and second glyph.
</li>
<li>
Place the second glyph and compute the next pen position/origin in
<tt>pen2</tt>.
</li>
<li>
Use <tt>pen1</tt> as the next pen position if it is beyond
<tt>pen2</tt>, use <tt>pen2</tt> otherwise.
</li>
</ol>
<p><hr></p>
<center>
<table width="100%"
border=0
cellpadding=5>
<tr bgcolor="#CCFFCC"
valign=center>
<td align=center
width="30%">
<a href="glyphs-3.html">Previous</a>
</td>
<td align=center
width="30%">
<a href="index.html">Contents</a>
</td>
<td align=center
width="30%">
<a href="glyphs-5.html">Next</a>
</td>
</tr>
</table>
</center>
</td></tr>
</table>
</center>
</body>
</html>