179 lines
5.7 KiB
HTML
179 lines
5.7 KiB
HTML
|
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
|
||
|
|
<meta name="Author" content="blob">
|
||
|
|
<meta name="GENERATOR" content="Mozilla/4.5 [fr] (Win98; I) [Netscape]">
|
||
|
|
<title>FreeType Glyph Conventions</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<body text="#000000"
|
||
|
|
bgcolor="#FFFFFF"
|
||
|
|
link="#0000EF"
|
||
|
|
vlink="#51188E"
|
||
|
|
alink="#FF0000">
|
||
|
|
|
||
|
|
<center>
|
||
|
|
<h1>
|
||
|
|
FreeType Glyph Conventions</h1></center>
|
||
|
|
|
||
|
|
<center>
|
||
|
|
<h2>
|
||
|
|
version 2.1</h2></center>
|
||
|
|
|
||
|
|
<center>
|
||
|
|
<h3>
|
||
|
|
Copyright 1998-2000 David Turner (<a href="mailto:david@freetype.org">david@freetype.org</a>)<br>
|
||
|
|
Copyright 2000 The FreeType Development Team (<a href="devel@freetype.org">devel@freetype.org</a>)</h3></center>
|
||
|
|
|
||
|
|
<center><table width=650><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-5.html">Next</a>
|
||
|
|
</td>
|
||
|
|
</tr></table></center>
|
||
|
|
|
||
|
|
<table width="100%" cellpadding=5><tr bgcolor="#CCCCFF" valign=center><td>
|
||
|
|
<h2>
|
||
|
|
IV. Kerning
|
||
|
|
</h2>
|
||
|
|
</td></tr></table>
|
||
|
|
|
||
|
|
<p>The term 'kerning' 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>
|
||
|
|
|
||
|
|
<h3><a name="section-1">
|
||
|
|
1. Kerning pairs
|
||
|
|
</h3><blockquote>
|
||
|
|
|
||
|
|
<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 "T"'s
|
||
|
|
upper right bar.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>When laying out text with only their standard widths, some consecutive
|
||
|
|
glyphs sometimes 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.
|
||
|
|
<center>
|
||
|
|
<p><img SRC="bravo_unkerned.png" height=37 width=116></center>
|
||
|
|
|
||
|
|
<p>Compare this to the same word, when the distance between these two letters
|
||
|
|
has been slightly reduced :
|
||
|
|
<center>
|
||
|
|
<p><img SRC="bravo_kerned.png" height=37 width=107></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, used during text layout. Note that :
|
||
|
|
<br>
|
||
|
|
<blockquote>
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
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.</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
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.</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
Kerning distances are expressed in grid units. They are usually oriented
|
||
|
|
in the X axis, which means that a negative value indicates that two glyphs
|
||
|
|
must be set closer in a horizontal layout.</li>
|
||
|
|
</ul>
|
||
|
|
</blockquote>
|
||
|
|
</blockquote>
|
||
|
|
|
||
|
|
<h3><a name="section-2">
|
||
|
|
2. Applying kerning</h3>
|
||
|
|
|
||
|
|
<blockquote>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>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. I.e.
|
||
|
|
<center>
|
||
|
|
<p><img SRC="twlewis1.png" height=38 width=314></center>
|
||
|
|
|
||
|
|
<p>However, 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 :
|
||
|
|
<center>
|
||
|
|
<p><img SRC="twlewis2.png" height=36 width=115></center>
|
||
|
|
|
||
|
|
<p>Which clearly is 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 welcomed if we were rendering the final dot of
|
||
|
|
a given paragraph.
|
||
|
|
<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>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 :
|
||
|
|
<br>
|
||
|
|
<blockquote>
|
||
|
|
<ol>
|
||
|
|
<li>
|
||
|
|
place the first glyph on the baseline</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
save the location of the pen position/origin in pen1</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 pen2.</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
use pen1 as the next pen position if it is beyond pen2, use pen2 otherwise.</li>
|
||
|
|
</ol>
|
||
|
|
</blockquote>
|
||
|
|
</blockquote>
|
||
|
|
</blockquote>
|
||
|
|
|
||
|
|
<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>
|