docs/glyphs/glyphs-4.html - third_party/freetype2 - Git at Google

 <!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>&nbsp;
 <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&nbsp; avoids the sliding dot problem, and others, though
 not producing optimal results. It can be seen as :
 <br>&nbsp;
 <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>
	<!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>