Gecko [ sachasauda.akalacademy.ac.in ]

Name	Size	Permission
bbox1.png	1.43 KB	-rw-r--r--
bbox2.png	1.22 KB	-rw-r--r--
body_comparison.png	1.24 KB	-rw-r--r--
bravo_kerned.png	470 B	-rw-r--r--
bravo_unkerned.png	479 B	-rw-r--r--
clipping.png	1.45 KB	-rw-r--r--
down_flow.png	846 B	-rw-r--r--
glyphs-1.html	9.73 KB	-rw-r--r--
glyphs-2.html	18.15 KB	-rw-r--r--
glyphs-3.html	15.87 KB	-rw-r--r--
glyphs-4.html	8.55 KB	-rw-r--r--
glyphs-5.html	13.49 KB	-rw-r--r--
glyphs-6.html	19.04 KB	-rw-r--r--
glyphs-7.html	12.76 KB	-rw-r--r--
grid_1.png	1.61 KB	-rw-r--r--
index.html	8.15 KB	-rw-r--r--
layout.png	2.16 KB	-rw-r--r--
layout2.png	672 B	-rw-r--r--
metrics.png	2.16 KB	-rw-r--r--
metrics2.png	1.81 KB	-rw-r--r--
points_conic.png	704 B	-rw-r--r--
points_conic2.png	1.01 KB	-rw-r--r--
points_cubic.png	790 B	-rw-r--r--
points_segment.png	520 B	-rw-r--r--
twlewis1.png	668 B	-rw-r--r--
twlewis2.png	453 B	-rw-r--r--
up_flow.png	796 B	-rw-r--r--

Code Editor : glyphs-4.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">

<title>FreeType Glyph Conventions / IV</title>
</head>

<body>

<div id="top"
     class="bar">
  <h1><a href="http://freetype.org/index.html">FreeType</a> Glyph
    Conventions&nbsp;/&nbsp;IV</h1>
</div>

<div id="kerning">
	  <h2>IV. Kerning</h2>

<p>The term <em>kerning</em> refers to specific information
	    used to adjust the relative positions of successive 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 id="section-1">1. Kerning pairs</h3>

<p>Kerning consists of modifying the spacing between two
	    successive glyphs according to their outlines.  For
	    example, a &lsquo;T&rsquo; and a &lsquo;y&rsquo; can be
	    easily moved closer, as the top of the &lsquo;y&rsquo;
	    fits nicely under the upper right bar of the
	    &lsquo;T&rsquo;.</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
	    &lsquo;A&rsquo; and the &lsquo;V&rsquo; in the following
	    word seems a little wider than needed.</p>

<p>Compare this to the same word, where the distance between
	    these two letters has been slightly reduced:</p>

<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
		&lsquo;(A,V)&rsquo; isn't necessarily the space for
		pair &lsquo;(V,A)&rsquo;.  They also use glyph
		indices, not character codes.</p>
	    </li>
	    <li>
              <p>Kerning distances can be expressed in horizontal or
		vertical directions, depending on the layout and/or
		the 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>

<p>Note that OpenType fonts (OTF) provide two distinct
	    mechanisms for kerning, using the &lsquo;kern&rsquo; and
	    &lsquo;GPOS&rsquo; tables, respectively, which are part of
	    the OTF files.  Older fonts only contain the former, while
	    recent fonts contain both tables or even
	    &lsquo;GPOS&rsquo; data only.  FreeType only supports
	    kerning via the (rather simple) &lsquo;kern&rsquo; table.
	    For the interpretation of kerning data in the (highly
	    sophisticated) &lsquo;GPOS&rsquo; table you need a
	    higher-level library
	    like <a href="http://icu-project.org/">ICU</a> or
	    <a href="http://harfbuzz.org">HarfBuzz</a> since it can be
	    context dependent (this is, the kerning may vary depending
	    on the position within a text string, for example).</p>

<h3 id="section-2">2. Applying kerning</h3>

<p>Applying kerning when rendering text is a rather easy
	    process.  It merely consists of adding the scaled kern
	    distance to the pen position before rendering the next
	    glyph.  However, the typographically correct renderer must
	    take a few more details in consideration.</p>

<p>The &lsquo;sliding dot&rsquo; problem is a good example:
	    Many font faces include a kerning distance between capital
	    letters like &lsquo;T&rsquo; or &lsquo;F&rsquo; and a
	    following dot (&lsquo;.&rsquo;), in order to slide the
	    latter glyph just right to their main leg.</p>

<p>This sometimes requires additional adjustments between
	    the dot and the letter following it, depending on the
	    shapes of the enclosing letters.  When applying
	    &lsquo;standard&rsquo; kerning adjustments, the previous
	    sentence would become</p>

<p>This is clearly too contracted.  The solution here, as
	    exhibited in the first example, is to only slide the dots
	    if the conditions fit.  Of course, this requires a certain
	    knowledge of the text's meaning, and this is exactly what
	    &lsquo;GPOS&rsquo; kerning is good for: Depending on the
	    context, different kerning values can be applied to get a
	    typographically correct result.</p>
        </div>

<div class="updated">
          <p>Last update: 02-May-2017</p>
        </div>
      </div>
    </div>

<p><a href="https://flattr.com/submit/auto?fid=mq2xxp&url=https%3A%2F%2Fwww.freetype.org"
         target="_blank">
        <img class="with-border"
             src="https://button.flattr.com/flattr-badge-large.png"
             alt="Flattr this"
             title="Flattr this"
             border="0"
             align="middle">
      </a></p>
    </li>
    <li class="primary">
      <a href="http://freetype.org/index.html">Home</a>
    </li>
    <li class="primary">
      <a href="http://freetype.org/index.html#news">News</a>
    </li>
    <li class="primary">
      <a href="../index.html">Overview</a>
    </li>
    <li class="primary">
      <a href="../documentation.html">Documentation</a>
    </li>
    <li class="primary">
      <a href="http://freetype.org/developer.html">Development</a>
    </li>
    <li class="primary">
      <a href="http://freetype.org/contact.html"
         class="emphasis">Contact</a>
    </li>

<li class="secondary">
      <a href="index.html">FreeType Glyph Conventions</a>
    </li>
    <li class="tertiary">
      <a href="glyphs-1.html">Basic Typographic Concepts</a>
    </li>
    <li class="tertiary">
      <a href="glyphs-2.html">Glyph Outlines</a>
    </li>
    <li class="tertiary">
      <a href="glyphs-3.html">Glyph Metrics</a>
    </li>
    <li class="tertiary">
      <a href="glyphs-4.html" class="current">Kerning</a>
    </li>
    <li class="tertiary">
      <a href="glyphs-5.html">Text Processing</a>
    </li>
    <li class="tertiary">
      <a href="glyphs-6.html">FreeType Outlines</a>
    </li>
    <li class="tertiary">
      <a href="glyphs-7.html">FreeType Bitmaps</a>
    </li>
  </ul>
</div>

</div>

</body>
</html>

${this.title}

Code Editor : glyphs-4.html