232 lines
6.6 KiB
HTML
232 lines
6.6 KiB
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:david@freetype.org">david@freetype.org</a>)<br>
|
|
Copyright 2000 The FreeType Development Team (<a
|
|
href="mailto:devel@freetype.org">devel@freetype.org</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 in 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>
|