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

 <!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&nbsp;2.1
 </h2>

 <h3 align=center>
   Copyright&nbsp;1998-2000 David Turner (<a
   href="mailto:david@freetype.org">david@freetype.org</a>)<br>
   Copyright&nbsp;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>&nbsp;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>
	<!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>