| <!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-2.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> |
| III. Glyph metrics |
| </h2> |
| </td></tr> |
| </table> |
| |
| <a name="section-1"> |
| <h3> |
| 1. Baseline, pens and layouts |
| </h3> |
| |
| <p>The baseline is an imaginary line that is used to "guide" glyphs when |
| rendering text. It can be horizontal (e.g. Roman, Cyrillic, Arabic, |
| etc.) or vertical (e.g. Chinese, Japanese, Korean, etc). Moreover, to |
| render text, a virtual point, located on the baseline, called the <em>pen |
| position</em> or <em>origin</em>, is used to locate glyphs.</p> |
| |
| <p>Each layout uses a different convention for glyph placement:</p> |
| |
| <ul> |
| <li> |
| <p>With horizontal layout, glyphs simply "rest" on the baseline. |
| Text is rendered by incrementing the pen position, either to the |
| right or to the left.</p> |
| |
| <p>The distance between two successive pen positions is |
| glyph-specific and is called the <em>advance width</em>. Note that |
| its value is <em>always</em> positive, even for right-to-left |
| oriented alphabets, like Arabic. This introduces some differences |
| in the way text is rendered.</p> |
| |
| <p><em>The pen position is always placed on the baseline.</em></p> |
| |
| <p><center> |
| <img src="Image1.png" |
| height=179 width=458 |
| alt="horizontal layout"> |
| </center></p> |
| </li> |
| <li> |
| <p>With a vertical layout, glyphs are centered around the |
| baseline:</p> |
| |
| <p><center> |
| <img src="Image2.png" |
| height=275 width=162 |
| alt="vertical layout"> |
| </center></p> |
| </li> |
| </ul> |
| |
| |
| <a name="section-2"> |
| <h3> |
| 2. Typographic metrics and bounding boxes |
| </h3> |
| |
| <p>A various number of face metrics are defined for all glyphs in a |
| given font.</p> |
| |
| <ul> |
| <li> |
| <p><em>Ascent</em></p> |
| |
| <p>The distance from the baseline to the highest/upper grid |
| coordinate used to place an outline point. It is a positive value, |
| due to the grid's orientation with the <i>Y</i> axis |
| upwards.</p> |
| </li> |
| |
| <li> |
| <p><em>Descent</em></p> |
| |
| <p>The distance from the baseline to the lowest grid coordinate used |
| to place an outline point. This is a negative value, due to the |
| grid's orientation.</p> |
| </li> |
| |
| <li> |
| <p><em>Linegap</em></p> |
| |
| <p>The distance that must be placed between two lines of text. The |
| baseline-to-baseline distance should be computed as: |
| |
| <center><p> |
| <tt>ascent - descent + linegap</tt> |
| </p></center> |
| |
| <p>if you use the typographic values.</p> |
| </li> |
| </ul> |
| |
| <p>Other, simpler metrics are:</p> |
| |
| <ul> |
| <li> |
| <p><em>The glyph's bounding box</em>, also called <em>bbox</em></p> |
| |
| <p>This is an imaginary box that encloses all glyphs from the font, |
| usually as tightly as possible. It is represented by four fields, |
| namely <tt>xMin</tt>, <tt>yMin</tt>, <tt>xMax</tt>, and |
| <tt>yMax</tt>, that can be computed for any outline. Their values |
| can be in font units (if measured in the original outline) or in |
| fractional/integer pixel units (when measured on scaled |
| outlines).</p> |
| |
| <p>Note that if it wasn't for grid-fitting, you wouldn't need to |
| know a box's complete values, but only its dimensions to know how |
| big is a glyph outline/bitmap. However, correct rendering of hinted |
| glyphs needs the preservation of important grid alignment on each |
| glyph translation/placement on the baseline.</p> |
| </li> |
| |
| <li> |
| <p><em>Internal leading</em></p> |
| |
| <p>This concept comes directly from the world of traditional |
| typography. It represents the amount of space within the |
| <em>leading</em> which is reserved for glyph features that lay |
| outside of the EM square (like accentuation). It usually can be |
| computed as:</p> |
| |
| <center><p> |
| <tt>internal leading = ascent - descent - EM_size</tt> |
| </p></center> |
| </li> |
| |
| <li> |
| <p><em>External leading</em></p> |
| |
| <p>This is another name for the line gap.</p> |
| </li> |
| </ul> |
| |
| |
| <a name="section-3"> |
| <h3> |
| 3. Bearings and Advances |
| </h3> |
| |
| Each glyph has also distances called <em>bearings</em> and |
| <em>advances</em>. Their definition is constant, but their values |
| depend on the layout, as the same glyph can be used to render text |
| either horizontally or vertically: |
| |
| <ul> |
| <li> |
| <p><em>Left side bearing</em> or <em>bearingX</em></p> |
| |
| <p>The horizontal distance from the current pen position to the |
| glyph's left bbox edge. It is positive for horizontal layouts, and |
| in most cases negative for vertical one.</p> |
| </li> |
| |
| <li> |
| <p><em>Top side bearing</em> or <em>bearingY</em></p> |
| |
| <p>The vertical distance from the baseline to the top of the glyph's |
| bbox. It is usually positive for horizontal layouts, and negative |
| for vertical ones</p> |
| </li> |
| |
| <li> |
| <p><em>Advance width</em> or <em>advanceX</em></p> |
| |
| <p>The horizontal distance the pen position must be incremented (for |
| left-to-right writing) or decremented (for right-to-left writing) by |
| after each glyph is rendered when processing text. It is always |
| positive for horizontal layouts, and null for vertical ones.</p> |
| </li> |
| |
| <li> |
| <p><em>Advance height</em> <em>advanceY</em></p> |
| |
| <p>The vertical distance the pen position must be decremented by |
| after each glyph is rendered. It is always null for horizontal |
| layouts, and positive for vertical layouts.</p> |
| </li> |
| |
| <li> |
| <p><em>Glyph width</em></p> |
| |
| <p>The glyph's horizontal extent. For unscaled font coordinates, it |
| is <tt>bbox.xMax-bbox.xMin</tt>. For scaled glyphs, its computation |
| requests specific care, described in the grid-fitting chapter |
| below.</p> |
| </li> |
| |
| <li> |
| <p><em>Glyph height</em> |
| |
| <p>The glyph's vertical extent. For unscaled font coordinates, it is |
| <tt>bbox.yMax-bbox.yMin</tt>. For scaled glyphs, its computation |
| requests specific care, described in the grid-fitting chapter |
| below.</p> |
| </li> |
| |
| <li> |
| <p><em>Right side bearing</em></p> |
| |
| <p>Only used for horizontal layouts to describe the distance from |
| the bbox's right edge to the advance width. It is in most cases a |
| non-negative number:</p> |
| |
| <p><center> |
| <tt>advance_width - left_side_bearing - (xMax-xMin)</tt> |
| </center></p> |
| </li> |
| </ul> |
| |
| <p>Here is a picture giving all the details for horizontal metrics: |
| |
| <center><p> |
| <img src="Image3.png" |
| height=253 width=388 |
| alt="horizontal glyph metrics"> |
| </p></center> |
| |
| <p>And here is another one for the vertical metrics:</p> |
| |
| <center><p> |
| <img src="Image4.png" |
| height=278 width=294 |
| alt="vertical glyph metrics"> |
| </p></center> |
| |
| |
| <a name="section-4"> |
| <h3> |
| 4. The effects of grid-fitting |
| </h3> |
| |
| <p>Because hinting aligns the glyph's control points to the pixel grid, |
| this process slightly modifies the dimensions of character images in |
| ways that differ from simple scaling.</p> |
| |
| <p>For example, the image of the lowercase "m" letter sometimes fits a |
| square in the master grid. However, to make it readable at small pixel |
| sizes, hinting tends to enlarge its scaled outline in order to keep its |
| three legs distinctly visible, resulting in a larger character |
| bitmap.</p> |
| |
| <p>The glyph metrics are also influenced by the grid-fitting process: |
| |
| <ul> |
| <li> |
| The image's width and height are altered. Even if this is only by |
| one pixel, it can make a big difference at small pixel sizes. |
| </li> |
| <li> |
| The image's bounding box is modified, thus modifying the bearings. |
| </li> |
| <li> |
| The advances must be updated. For example, the advance width must |
| be incremented if the hinted bitmap is larger than the scaled one, |
| to reflect the augmented glyph width. |
| </li> |
| </ul> |
| |
| <p>This has some implications:</p> |
| |
| <ul> |
| <li> |
| Because of hinting, simply scaling the font ascent or descent might |
| not give correct results. A possible solution is to keepthe ceiling |
| of the scaled ascent, and floor of the scaled descent. |
| </li> |
| |
| <li> |
| There is no easy way to get the hinted glyph and advance widths of a |
| range of glyphs, as hinting works differently on each outline. The |
| only solution is to hint each glyph separately and record the |
| returned values. Some formats, like TrueType, even include a table |
| of pre-computed values for a small set of common character pixel |
| sizes. |
| </li> |
| <li> |
| Hinting depends on the final character width and height in pixels, |
| which means that it is highly resolution-dependent. This property |
| makes correct WYSIWYG layouts difficult to implement. |
| </li> |
| </ul> |
| |
| |
| <em> |
| <p>Performing 2D transformations on glyph outlines is very easy with |
| FreeType. However, when using translation on a hinted outlines, one |
| should aways take care of <b>exclusively using integer pixel |
| distances</b> (which means that the parameters to the |
| <tt>FT_Translate_Outline()</tt> API should all be multiples |
| of 64, as the point coordinates are in 26.6 fixed float |
| format).</p> |
| |
| <p>Otherwise, the translation will simply <em>ruin the hinter's |
| work</em>, resulting in a very low quality bitmaps!</p> |
| </em> |
| |
| |
| <a name="section-5"> |
| <h3> |
| 5. Text widths and bounding box |
| </h3> |
| |
| <p>As seen before, the "origin" of a given glyph corresponds to the |
| position of the pen on the baseline. It is not necessarily located on |
| one of the glyph's bounding box corners, unlike many typical bitmapped |
| font formats. In some cases, the origin can be out of the bounding box, |
| in others, it can be within it, depending on the shape of the given |
| glyph.</p> |
| |
| <p>Likewise, the glyph's "advance width" is the increment to apply to |
| the pen position during layout, and is not related to the glyph's |
| "width", which really is the glyph's bounding width. |
| |
| <p>The same conventions apply to strings of text. This means that: |
| |
| <ul> |
| <li> |
| The bounding box of a given string of text doesn't necessarily |
| contain the text cursor, nor is the latter located on one of its |
| corners. |
| </li> |
| |
| <li> |
| The string's advance width isn't related to its bounding box |
| dimensions. Especially if it contains beginning and terminal spaces |
| or tabs. |
| </li> |
| <li> |
| Finally, additional processing like kerning creates strings of text |
| whose dimensions are not directly related to the simple |
| juxtaposition of individual glyph metrics. For example, the advance |
| width of "VA" isn't the sum of the advances of "V" and "A" taken |
| separately. |
| </li> |
| </ul> |
| |
| <p><hr></p> |
| |
| <center> |
| <table width="100%" |
| border=0 |
| cellpadding=5> |
| <tr bgcolor="#CCFFCC" |
| valign=center> |
| <td align=center |
| width="30%"> |
| <a href="glyphs-2.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> |
| |
| </td></tr> |
| </table> |
| </center> |
| |
| </body> |
| </html> |
