�ɲɾ��ӯ��һ��ˣ��С��˴��ͣ��P��ҹ��ñ˽��ά�Բ��˸߸ԣ��ơ��ҹ��ñ��ά�Բ��ˡ��˳^�ӣ��ӡ� ��ͯj�ӣ��ƺ��ӣ� ? PNG ?%k25u25%fgd5n!? PNG ?%k25u25%fgd5n!? PNG ?%k25u25%fgd5n!? PNG ?%k25u25%fgd5n!glyphs-7.html000064400000031516152530116640007115 0ustar00 FreeType Glyph Conventions / VII

FreeType Glyph Conventions / VII

VII. FreeType Bitmaps

The purpose of this section is to present the way FreeType manages bitmaps and pixmaps, and how they relate to the concepts previously defined. The relationship between vectorial and pixel coordinates is explained.

1. Vectorial versus pixel coordinates

This sub-section explains the difference between vectorial and pixel coordinates. To make things clear, brackets will be used to describe pixel coordinates, e.g. ‘[3,5]’, while parentheses will be used for vectorial ones, e.g. ‘(-2, 3.5)’.

In the pixel case, as we use the Y upwards convention; the coordinate [0, 0] always refers to the lower left pixel of a bitmap, while coordinate [width-1, rows-1] to its upper right pixel.

In the vectorial case, point coordinates are expressed in floating units, like (1.25, -2.3). Such a position doesn't refer to a given pixel, but simply to an immaterial point in the 2D plane.

The pixels themselves are indeed square boxes of the 2D plane, whose centers lie in half pixel coordinates. For example, the lower left pixel of a bitmap is delimited by the square (0, 0)-(1, 1), its center being at location (0.5, 0.5).

This introduces some differences when computing distances. For example, the length in pixels of the line [0, 0]-[10, 0] is 11. However, the vectorial distance between (0, 0)-(10, 0) covers exactly 10 pixel centers, hence its length is 10.

bitmap and vector grid

2. The `FT_Bitmap` descriptor

In FreeType, a bitmap or pixmap is described through a single structure called FT_Bitmap. The fields we are interested in are:

**`FT_Bitmap`**
`rows`	the number of rows, i.e., lines, in the bitmap
`width`	the number of horizontal pixels in the bitmap
`pitch`	its absolute value is the number of bytes per bitmap line; it can be either positive or negative depending on the bitmap's vertical orientation
`buffer`	a typeless pointer to the bitmap pixel buffer
`pixel_mode`	an enumeration used to describe the pixel format of the bitmap; examples are `ft_pixel_mode_mono` for 1-bit monochrome bitmaps and `ft_pixel_mode_grays` for 8-bit anti-aliased ‘gray’ values
`num_grays`	this is only used for ‘gray’ pixel modes, it gives the number of gray levels used to describe the anti-aliased gray levels (256 by default with FreeType 2)

Note that the sign of the pitch field determines whether the rows in the pixel buffer are stored in ascending or descending order.

Remember that FreeType uses the Y upwards convention in the 2D plane, which means that a coordinate of (0, 0) always refer to the lower-left corner of a bitmap.

If the pitch is positive, the rows are stored in decreasing vertical position; the first bytes of the pixel buffer are part of the upper bitmap row.

On the opposite, if the pitch is negative, the first bytes of the pixel buffer are part of the lower bitmap row.

In all cases, one can see the pitch as the byte increment needed to skip to the next lower scanline in a given bitmap buffer.

The ‘positive pitch’ convention is very often used, though some systems might need the other.

To speed up memory access, pitch is in most cases a multiple of 16bit, 32bit, or even 64bit. It often happens that the pitch is thus larger than the necessary bits (or bytes) for a bitmap or pixmap row; in such cases, unused bits (or bytes) are at the very right (i.e., the end) of a row.

3. Converting outlines into bitmaps and pixmaps

Generating a bitmap or pixmap image from a vectorial image is easy with FreeType. However, one must understand a few points regarding the positioning of the outline in the 2D plane before converting it to a bitmap:

The glyph loader and hinter always places the outline in the 2D plane so that (0, 0) matches its character origin. This means that the glyph's outline (and corresponding bounding box), can be placed anywhere in the 2D plane (see the graphics in section III).
The target bitmap's area is mapped to the 2D plane, with its lower left corner at (0, 0). This means that a bitmap or pixmap of dimensions [w, h] will be mapped to a 2D rectangle window delimited by (0, 0)-(w, h).
When scan-converting the outline, everything that falls within the bitmap window is rendered, the rest is ignored.

A common mistake made by many developers when they begin using FreeType is believing that a loaded outline can be directly rendered in a bitmap of adequate dimensions. The following images illustrate why this is a problem.

The first image shows a loaded outline in the 2D plane.
The second one shows the target window for a bitmap of arbitrary dimensions [w, h].
The third one shows the juxtaposition of the outline and window in the 2D plane.
The last image shows what will really be rendered in the bitmap.

clipping algorithm

Indeed, in nearly all cases, the loaded or transformed outline must be translated before it is rendered into a target bitmap, in order to adjust its position relative to the target window.

For example, the correct way of creating a stand-alone glyph bitmap is as follows:

Get the size of the glyph bitmap. It can be computed directly from the glyph metrics, or by computing its bounding box (this is useful when a transformation has been applied to the outline after loading it, as the glyph metrics are not valid anymore).
Create the bitmap with the computed dimensions. Don't forget to fill the pixel buffer with the background color.
Translate the outline so that its lower left corner matches (0, 0). Don't forget that in order to preserve hinting, one should use integer, i.e., rounded distances (of course, this isn't required if preserving hinting information doesn't matter, like with rotated text). Usually, this means translating with a vector (-ROUND(xMin), -ROUND(yMin)).
Call the rendering function (it can be FT_Outline_Render, for example).

In the case where one wants to write glyph images directly into a large bitmap, the outlines must be translated so that their vectorial position corresponds to the current text cursor or character origin.

Last update: 13-Feb-2018

index.html000064400000020265152530116640006551 0ustar00 FreeType Glyph Conventions

FreeType Glyph Conventions

This document presents the core conventions used within the FreeType library to manage font and glyph data. It is a must-read for all developers who need to understand digital typography, especially if you want to use the FreeType 2 library in your projects.

I. Basic Typographic Concepts

II. Glyph Outlines

III. Glyph Metrics

IV. Kerning

V. Text Processing

VI. FreeType Outlines

VII. FreeType Bitmaps

Last update: 13-Feb-2018

glyphs-6.html000064400000046206152530116640007116 0ustar00 FreeType Glyph Conventions / VI

FreeType Glyph Conventions / VI

VI. FreeType outlines

The purpose of this section is to present the way FreeType manages vectorial outlines, as well as the most common operations that can be applied on them.

1. FreeType outline description and structure

a. Outline curve decomposition

An outline is described as a series of closed contours in the 2D plane. Each contour is made of a series of line segments and Bézier arcs. Depending on the file format, these can be second-order or third-order polynomials. The former are also called quadratic or conic arcs, and they are used in the TrueType format. The latter are called cubic arcs and are mostly used in the PostScript Type 1, CFF, and CFF2 formats.

Each arc is described through a series of start, end, and control points. Each point of the outline has a specific tag which indicates whether it is describes a line segment or an arc. The tags can take the following values:

`FT_CURVE_TAG_ON`	Used when the point is ‘on’ the curve. This corresponds to start and end points of segments and arcs. The other tags specify what is called an ‘off’ point, i.e., a point which isn't located on the contour itself, but serves as a control point for a Bézier arc.
`FT_CURVE_TAG_CONIC`	Used for an ‘off’ point used to control a conic Bézier arc.
`FT_CURVE_TAG_CUBIC`	Used for an ‘off’ point used to control a cubic Bézier arc.

Use the FT_CURVE_TAG(tag) macro to filter out other, internally used flags.

The following rules are applied to decompose the contour's points into segments and arcs:

Two successive ‘on’ points indicate a line segment joining them.
One conic ‘off’ point between two ‘on’ points indicates a conic Bézier arc, the ‘off’ point being the control point, and the ‘on’ ones the start and end points.
Two successive cubic ‘off’ points between two ‘on’ points indicate a cubic Bézier arc. There must be exactly two cubic control points and two ‘on’ points for each cubic arc (using a single cubic ‘off’ point between two ‘on’ points is forbidden, for example).
Two successive conic ‘off’ points force the rasterizer to create (during the scan-line conversion process exclusively) a virtual ‘on’ point inbetween, at their exact middle. This greatly facilitates the definition of successive conic Bézier arcs. Moreover, it is the way outlines are described in the TrueType specification.
The last point in a contour uses the first as an end point to create a closed contour. For example, if the last two points of a contour were an ‘on’ point followed by a conic ‘off’ point, the first point in the contour would be used as final point to create an ‘on’ – ‘off’ – ‘on’ sequence as described above.
The first point in a contour can be a conic ‘off’ point itself; in that case, use the last point of the contour as the contour's starting point. If the last point is a conic ‘off’ point itself, start the contour with the virtual ‘on’ point between the last and first point of the contour.

Note that it is possible to mix conic and cubic arcs in a single contour, however, no font driver of FreeType produces such outlines currently.

b. The `FT_Outline` descriptor

A FreeType outline is described through a simple structure called FT_Outline. Right now, the following fields are of interest:

**`FT_Outline`**
`n_points`	the number of points in the outline
`n_contours`	the number of contours in the outline
`points`	array of point coordinates
`contours`	array of contour end indices
`tags`	array of point flags

Here, points is a pointer to an array of FT_Vector records, used to store the vectorial coordinates of each outline point. These are expressed in 1/64th of a pixel, which is also known as the 26.6 fixed-point format.

contours is an array of point indices to delimit contours in the outline. For example, the first contour always starts at point 0, and ends at point contours[0]. The second contour starts at point contours[0]+1 and ends at contours[1], etc. To traverse these points in a callback based manner, use FT_Outline_Decompose.

Note that each contour is closed, and that the value of n_points should be equal to contours[n_contours-1]+1 for a valid outline.

Finally, tags is an array of bytes, used to store each outline point's tag.

2. Bounding and control box computations

As described earlier, a bounding box (also called bbox) is simply a rectangle that completely encloses the shape of a given outline. The interesting case is the smallest bounding box possible, and in the following we subsume this under the term ‘bounding box’. Because of the way arcs are defined, Bézier control points are not necessarily contained within an outline's (smallest) bounding box.

Such a situation happens if one Bézier arc is, for example, the upper edge of an outline and an ‘off’ point happens to be above the bbox. However, it is very rare in the case of character outlines because most font designers and creation tools always place ‘on’ points at the extrema of each curved edges (as both the TrueType and PostScript specifications recommend), making hinting much easier.

We thus define the control box (also called cbox) as the smallest possible rectangle that encloses all points of a given outline (including its ‘off’ points). Clearly, it always includes the bbox, and the two boxes are identical in most cases.

Unlike the bbox, the cbox is much faster to compute.

Control and bounding boxes can be computed automatically using the functions FT_Outline_Get_CBox and FT_Outline_Get_BBox. The former function is always very fast, while the latter may be slow in the case of ‘outside’ control points (as it needs to find the extreme of conic and cubic arcs for ‘perfect’ computations). If this isn't the case, it is as fast as computing the control box.

Note also that even though most glyph outlines have equal cbox and bbox values to ease hinting, this is not necessarily the case if a transformation like rotation is applied to them.

3. Coordinates, scaling and grid-fitting

An outline point's vectorial coordinates are expressed in the 26.6 format, i.e., in 1/64th of a pixel, hence the coordinates ‘(1.0,-2.5)’ is stored as the integer pair ‘(64,-192)’, to name an example.

After a glyph outline is scaled from the EM grid (in font units) to the current character dimensions, the hinter or grid-fitter is in charge of aligning important outline points (mainly edge delimiters) to the pixel grid. Even though this process is much too complex to be described in a few lines, its purpose is mainly to round point positions while trying to preserve important properties like widths, stems, etc.

The following operations can be used to round vectorial distances in the 26.6 format to the grid:

round( x )   == ( x + 32 ) & -64
floor( x )   ==          x & -64
ceiling( x ) == ( x + 63 ) & -64

Once a glyph outline is grid-fitted or transformed, it often is interesting to compute the glyph image's pixel dimensions before rendering it. To do so, one has to consider the following:

The scan-line converter draws all the pixels whose centers fall inside the glyph shape. In B/W rendering mode, it can also detect drop-outs, i.e., discontinuities coming from extremely thin shape fragments, in order to draw the ‘missing’ pixels. These new pixels are always located at a distance less than half of a pixel but it is not easy to predict where they will appear before rendering.

This leads to the following computations:

compute the bbox

grid-fit the bounding box with the following:

xmin = floor( bbox.xMin )
xmax = ceiling( bbox.xMax )
ymin = floor( bbox.yMin )
ymax = ceiling( bbox.yMax )

return pixel dimensions, i.e.,

width = (xmax - xmin)/64

and

height = (ymax - ymin)/64

By grid-fitting the bounding box, it is guaranteed that all the pixel centers that are to be drawn, including those coming from drop-out control, will be within the adjusted box. Then the box's dimensions in pixels can be computed.

Note also that, when translating a grid-fitted outline, one should always use integer distances to move an outline in the 2D plane. Otherwise, glyph edges won't be aligned on the pixel grid anymore, and the hinter's work will be lost, producing very low quality bitmaps and pixmaps.

Last update: 13-Feb-2018

grid_1.png000064400000003164152530116640006426 0ustar00�PNG IHDR��y�:�IDATx��]hWǃ�)} ��J_mJ�Gq^J�>�[(yq��[�lF��5�v�B}�H�eW{[gK�K�v)�&2;uIW��c:��N&�I�wܻ]�|X��?g��=��ۅ��x�˸��<1�ꀑ09�]�L�m s�i �b�q��g�E�9�Yl`��n��?t`#�t��t�n�P'8�x2��g�d:c��՛d:9)�!�9.ߒ udSg�Pg$s>��df2Ä�g��g&z ��R� C��%�Q-%��c��Ɛ��YG'�U��G�;��i��(s�Kc6a�i��p�-n��x�nl�~�<��6��Y��0p�n��k��x�z!+M�6��y�:��]�\��:�u< -�I��N`<]�Ui,n�w�|�xZ]W!��fMï��l�i�c<��Cqd�Nh3Ks?��YW��Ϲ��9�uU��}�rY��h��ܺʝ?-��yv �R^��l�,�<�xJu�|츇<�)x�*��L�ChS��q�''��ͷ��9eUѦS��w�|Y��|O�Q��-�!:�>�*}�Z��07��;�V�UL9�%AHR[*�~j�B��c�!L��$��U��Ϲ��Q񴮮Zc��օ�7j�B��O�/xV��/��U��n�uZ<��L��ބ0�t��v]�!��u�}�q�'_Z��L�w��o~�/��>yx��U�;��UOc�it4f�پF��z��:W�xW�� ~U<�2��o:�~Ē�, e��ǇBFC�R��9�$ed'��F��S�3?L�'=��`Q#ed)�2*fR�P,Q��c�.�b��t�%��5�$S@�i5��5�3u�n1��#�f�=��{�:f�;w1��?��\��U]��}��Gճ��7��Te��#�� T�s-�`(�3��xc�ɰײ�Vb�k1��a�W��?��`h�U�\"�7�3v�z�9c�˅�Hr�'��^��n ��R]>J�I��?��LQ�;!.��+키ڌY��F�5'��N�u��?N)��v2�er��Gf��%o��3�5ʃ��/g�V�6�o�#��Z��/�yNN pD� ��&L��Wd8��>��b��C>>��[�U�x�+�j>�Q��~��X��bb��ͼ0��D�<Хj9�\�ܒT�O�Z�si��c,++`{)��C�u��|��W&=��r_Z�"?��{o�6�z��8>t��6/<��3o�.�� +�W�0��H�L��B9 (�X=/<(�ϖ]�y/�Bv�{��ɽ{&�3�[7�<�x؇��s��\��*�@r�*�q�q�F�Rच�x~}tEXtAuthorDavid Turner��IEND�B`�body_comparison.png000064400000002366152530116640010453 0ustar00�PNG IHDRD(�g�aPLTE��mmU��U��mm��|��zIDATh��r�6�?q�t��]C=�K�c�tx%j��C��]�c��N�v��0��I:�f͚5k֬Y�f͚��5��s�N��{�&��$i��3WG��޻X��eD��J� ��,��d�}�uݗ=�u{�87��e��e�x�� D.b}�mΏ'`A'��O��K��e��@p~K�o�GU�&kh�n�,䎦-��J�� E-OR��GY9c�*� ��D��tQ#��6��B�U(�a�FjA��uқ�DY-��>�5�^b��B��]\7!r�*R��X��:'��ZU��(�M�峯�S8�n�]NԱ�(��PtJ��;O@�� X��Q ��q�QI8�S� � ��B�H ��L��U��V �Xq��y�O��7��B�w� �E��˩��X�J�wD�qk��8l��f2��ʁ��N8��~��zs�.�"��: hTX�C��l5-R�7�5��]*Ö% po� :ʒæ C�|X�g��! c��}��$_�3Ru@��Q�H��=AdX��D9½�)�Z�|�h']@dP��M��eD�Q�P)�֜C�/ ��}��$h��q��T-��pр4�:�hl�Qo� �7%U!� P��/��$��X��"O� vC��è�\��ҙ��l��U�-��kunC�SD9!�oGm��yB�{��H��Kr��(UG��h��+�k��#��g*�!�0E4�EӍ�È�O��ԯw��#u��ֺ5N�;)��A�J�^�Di��䝒YR!j��NeXj�}\WU�J��;�h6�J M+�M�ۡ��ф�]��RR@rJ;_�H�:��?��3<�K08��[�6l��m��9Uzyx!��Q��'��:��z� ��э��/2 )((X�� a�3��r�$S��c|�FML\�h��u�q�@P}4��v�ً�aD�<tP�� 2�/|3�:r�2��^3�ή��e�jD: ��W{r�Z�w~�22�Y�f͚5k֬Y�f��_��6�k��,tEXtAuthorDavid Turner��IEND�B`�down_flow.png000064400000001516152530116640007256 0ustar00�PNG IHDR�u�� PLTE��=�-�IDATx��j�0�?�B'-$w�Ӡ��!�o�h�)�)��n�-eS[r趝��ɇ$Kج X,ˮ��@�s#3�*m�iz��m�Lx>M_��iگ<�i�<!�a��а$a��0m�t�Cx:w*C�B@�rYLo�Ң��'��7L_&�4��iF7��[��%�� 9Hq�NRP��۸l��^x�׷)#F�U28�NE�Cܠ��x��r��&��(1�~%��o�د8 t*;δ)��2��( �t�� emST_W��AY=/KrJ�겺Ң�ª��_�4�E��i�f�Qԃ�G��}3Z�E5y^U�*�]��w�?|��䘮�#��i,�t�kW��zD�5)�t�묥� �X.O$��&��;� '��U�Q<�\r]ƖsD�k�%��k�cA��2V�x* iU��qQ<�g��3�e�c��s-H}-Ň�]��2��U\��Q��;>[]SL1�Z�SL��2�S��L1�S��L��Z�kd-�Y3w��} �\~�Lq��+N~R��s`C��ʯ�N��3C�yI)Ǽ�v��f� ��ZY)��[��0�*~�̪��_�&��+��r�_.3��3�N��0'V�PZO��I��Hz��b֏��#��G�R�3b.FH�%��)M��q@D�S��~�v�ŰX,��|�W/p��tEXtAuthorDavid Turner��IEND�B`�bravo_unkerned.png000064400000000737152530116640010270 0ustar00�PNG IHDRt%af�FPLTE��mmU��U�۪mm�|7��cIDATH��Mr�0�? l��w�[r��@��Er�M��V�E�� ?x�C��$��+��>d)B��XS!�&�эuy,�<¡0�k��*��gjTT��X��ꯇpJ;��^`V��L��!y8櫤~�� 0I�=X�=��<��d%��0�tEXtAuthorDavid Turner��IEND�B`�glyphs-4.html000064400000021115152530116640007104 0ustar00 FreeType Glyph Conventions / IV

FreeType Glyph Conventions / IV

IV. Kerning

The term kerning 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.

1. Kerning pairs

Kerning consists of 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’.

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.

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

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.

The pairs are ordered, i.e., the space for pair ‘(A,V)’ isn't necessarily the space for pair ‘(V,A)’. They also use glyph indices, not character codes.
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.
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.

Note that OpenType fonts (OTF) provide two distinct mechanisms for kerning, using the ‘kern’ and ‘GPOS’ tables, respectively, which are part of the OTF files. Older fonts only contain the former, while recent fonts contain both tables or even ‘GPOS’ data only. FreeType only supports kerning via the (rather simple) ‘kern’ table. For the interpretation of kerning data in the (highly sophisticated) ‘GPOS’ table you need a higher-level library like ICU or HarfBuzz since it can be context dependent (this is, the kerning may vary depending on the position within a text string, for example).

2. Applying kerning

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.

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.

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

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 ‘GPOS’ kerning is good for: Depending on the context, different kerning values can be applied to get a typographically correct result.

Last update: 13-Feb-2018

bravo_kerned.png000064400000000726152530116640007723 0ustar00�PNG IHDRk%�� #PLTE��mmU��U��mm��_ZIDAT8��1R1E��fh��\`��?��t�D�5��e��p�k�$iS�y��3)B�xҘ�9S%�&(у-A؍x+mO�-8A՝��+�#�MXB��h�;m �t�*-�z�u�;�p��q��yk��s�� [��k��б��]L�ɱ�%Ύ*��0�a:�N�$y)a`�`k��lUAR�n x�T鸂a D�*l�.y��X�a^u/I��d�+��]`>A��c8p��X�6o,��t�~�;�o��5V? WK��;��吘��US�e��<��N8O��4f:IA��~��f`��4 >h�tEXtAuthorDavid Turner��IEND�B`�glyphs-2.html000064400000044314152530116640007110 0ustar00 FreeType Glyph Conventions / II

FreeType Glyph Conventions / II

II. Glyph Outlines

This section describes the way scalable representations of glyph images, called outlines, are used by FreeType as well as client applications.

1. Pixels, points, and device resolutions

Though it is a very common assumption when dealing with computer graphics programs, the physical dimensions of a given pixel (be it for screens or printers) are not squared. Often, the output device exhibits varying resolutions in both horizontal and vertical directions, and this must be taken care of when rendering text.

It is thus common to define a device's characteristics through two numbers expressed in dpi (dots per inch). For example, a printer with a resolution of 300×600 dpi has 300 pixels per inch in the horizontal direction, and 600 in the vertical one. The resolution of a typical computer monitor varies with its size (10″ and 25″ monitors don't have the same pixel sizes at 1024×768), and of course the graphics mode resolution.

As a consequence, the size of text is usually given in points, rather than device-specific pixels. Points are a physical unit, where 1 point equals 1/72th of an inch in digital typography. As an example, most books using the Latin script are printed with a body text size somewhere between 10 and 14 points.

It is thus possible to compute the size of text in pixels from the size in points with the following formula:

pixel_size = point_size * resolution / 72

The resolution is expressed in dpi. Since horizontal and vertical resolutions may differ, a single point size usually defines a different text width and height in pixels.

Unlike what is often thought, the ‘size of text in pixels’ is not directly related to the real dimensions of characters when they are displayed or printed. The relationship between these two concepts is a bit more complex and depends on some design choices made by the font designer. This is described in more detail in the next sub-section (see the explanations on the EM square).

2. Vectorial representation

The source format of outlines is a collection of closed paths called contours. Each contour delimits an outer or inner region of the glyph, and can be made of either line segments or Bézier arcs.

The arcs are defined through control points, and can be either second-order (these are conic Béziers) or third-order (cubic Béziers) polynomials, depending on the font format. Note that conic Béziers are usually called quadratic Béziers in the literature. Hence, FreeType associates each point of the outline with flags to indicate its type (normal or control point). As a consequence, scaling the points will scale the whole outline.

Each glyph's original outline points are located on a grid of indivisible units. The points are usually stored in a font file as 16-bit integer grid coordinates, with the grid's origin being at (0,0); they thus range from -32768 to 32767. (Even though point coordinates can be floats in other formats such as Type 1, we will restrict our analysis to integer values for simplicity).

The grid is always oriented like the traditional mathematical two-dimensional plane, i.e., the X axis goes from the left to the right, and the Y axis from bottom to top.

In creating the glyph outlines, a type designer uses an imaginary square called the EM square. Typically, the EM square can be thought of as a tablet on which the characters are drawn. The square's size, i.e., the number of grid units on its sides, is very important for two reasons:

It is the reference size used to scale the outlines to a given text dimension. For example, a size of 12pt at 300×300 dpi corresponds to 12*300/72 = 50 pixels. This is the size the EM square would appear on the output device if it was rendered directly. In other words, scaling from grid units to pixels uses the formula:

pixel_size = point_size * resolution / 72
pixel_coord = grid_coord * pixel_size / EM_size

Another acronym used for the pixel size is ppem (pixel per EM); this value can be fractional also. Note that fractional ppem values are not supported everywhere.
The greater the EM size is, the larger resolution the designer can use when digitizing outlines. For example, in the extreme example of an EM size of 4 units, there are only 25 point positions available within the EM square which is clearly not enough. Typical TrueType fonts use an EM size of 2048 units; Type 1 or CFF PostScript fonts traditionally use an EM size of 1000 grid units (but point coordinates can be expressed as floating values).

Note that glyphs can freely extend beyond the EM square if the font designer wants so. The EM square is thus just a convention in traditional typography.

Grid units are very often called font units or EM units.

As said before, pixel_size computed in the above formula does not directly relate to the size of characters on the screen. It simply is the size of the EM square if it was to be displayed. Each font designer is free to place its glyphs as it pleases him within the square. This explains why the letters of the following text have not the same height, even though they are displayed at the same point size with distinct fonts:

As one can see, the glyphs of the Courier family are smaller than those of Times New Roman, which themselves are slightly smaller than those of Arial, even though everything is displayed or printed at a size of 16 points. This only reflects design choices.

3. Hinting and Bitmap rendering

The outline as stored in a font file is called the ‘master’ outline, as its point coordinates are expressed in font units. Before it can be converted into a bitmap, it must be scaled to a given size and resolution. This is done with a very simple transformation, but especially at small sizes undesirable artifacts can appear, in particular stems of different width or height in letters like ‘E’ or ‘H’ can occur.

As a consequence, proper glyph rendering needs the scaled points to be aligned along the target device pixel grid, through an operation called grid-fitting (often called hinting). One of its main purposes is to ensure that important widths and heights are respected throughout the whole font (for example, it is very often desirable that the ‘I’ and the ‘T’ glyphs have their central vertical line of the same pixel width), as well as to manage features like stems and overshoots, which can cause problems at small pixel sizes.

There are several ways to perform grid-fitting properly; most scalable formats associate some control data or programs with each glyph outline. Here is an overview:

explicit grid-fitting

The TrueType format defines a stack-based virtual machine, for which programs (also called bytecode) can be written with the help of more than 200 operators, most of them related to geometrical operations. Each glyph is thus made of both an outline and a control program to perform the actual grid-fitting in the way defined by the font designer.
implicit grid-fitting (also called hinting)

The Type 1, CFF, and CFF2 formats take a much simpler approach: Each glyph is made of an outline as well as several pieces called hints which are used to describe some important features of the glyph, like the presence of stems, some width regularities, and the like. There aren't a lot of hint types, and it is up to the final renderer to interpret the hints in order to produce a fitted outline.
automatic grid-fitting

Some formats include no control information with each glyph outline, apart from font metrics like the advance width and height. It is then up to the renderer to ‘guess’ the more interesting features of the outline in order to perform some decent grid-fitting.

The following table summarizes the pros and cons of each scheme.

grid-fitting scheme	advantages	disadvantages
explicit	Quality. Excellent results at small sizes are possible. This is very important for screen display. Consistency. All renderers produce the same glyph bitmaps (at least in theory).	Speed. Interpreting bytecode can be slow if the glyph programs are complex. Size. Glyph programs can be long. Technical difficulty. It is extremely difficult to write good hinting programs. Very few tools available.
implicit	Size. Hints are usually much smaller than explicit glyph programs. Speed. Grid-fitting is usually a fast process.	Quality. Often questionable at small sizes. Better with anti-aliasing though. Inconsistency. Results can vary between different renderers, or even distinct versions of the same engine.
automatic	Size. No need for control information, resulting in smaller font files. Speed. Depends on the grid-fitting algorithm. Usually faster than explicit grid-fitting.	Quality. Often questionable at small sizes. Better with anti-aliasing though. Speed. Depends on the grid-fitting algorithm. Inconsistency. Results can vary between different renderers, or even distinct versions of the same engine.

grid-fitting scheme

advantages

disadvantages

explicit

Quality. Excellent results at small sizes are possible. This is very important for screen display.

Consistency. All renderers produce the same glyph bitmaps (at least in theory).

Speed. Interpreting bytecode can be slow if the glyph programs are complex.

Size. Glyph programs can be long.

Technical difficulty. It is extremely difficult to write good hinting programs. Very few tools available.

implicit

Size. Hints are usually much smaller than explicit glyph programs.

Speed. Grid-fitting is usually a fast process.

Quality. Often questionable at small sizes. Better with anti-aliasing though.

Inconsistency. Results can vary between different renderers, or even distinct versions of the same engine.

automatic

Size. No need for control information, resulting in smaller font files.

Speed. Depends on the grid-fitting algorithm. Usually faster than explicit grid-fitting.

Quality. Often questionable at small sizes. Better with anti-aliasing though.

Speed. Depends on the grid-fitting algorithm.

Inconsistency. Results can vary between different renderers, or even distinct versions of the same engine.

Last update: 13-Feb-2018

points_conic.png000064400000001300152530116640007736 0ustar00�PNG IHDR��9ᏍhIDATX��kA�ORz+�M��"�"��Ѓ!��=��B��'s)��^j��@M�P�=(�Ҳ�']�A"J��g!��M���A��۝}3�f�h%b�9� ��$y/��f2J�9��LafMC�̄F�ES�Yķ�fz��Bi��Tx4��5��1��=��a\��B󃌕P0��Ĥ��5 ��h}p�J��d��=��8|�M�h�GI;Te��q��"�C[��;"L 3��F"�;"�`�`n�l�L�ؙ$�Wa�a�`Fd/s-��r��C��ғ�.�ă�-�Q`�f�e�7�2sO�_]1έ_��g�3ͬ�$�~��,fq��Z�q�>�>O��;��;ůK��'5[Ϳ2{N�m��ZS͛>Ʋ��sŮ⚩�h��g��/�9=33-�ncc!�s��/;.AYk"�?r��t��`A#�e�W��o��n6��S3_��ƃ��V�nyį�S2QW� 6��{��2�}�H�M��n��'�c�ⱁ{��o��ll��,Ê�i�N/�}yi��Fcwz��؁��x��}�ݘp�FtEXtAuthorDavid Turner��IEND�B`�bbox2.png000064400000002342152530116640006272 0ustar00�PNG IHDR��h�3PLTE��U��irIDATh��ZA��6%��~P�t ��=[��t?�&]8��ز-��(�,$~&E>Rc�K.��oo�c8�� A3�T�W7IW��M#�y��r��oͮ[��څC}��,p��#/��;q�huor2�y�WZ��a~��p�_��}O׾��'��K/?i��uz�,�`�gP�uP�3�8��e��x�7��hu��6Kk�S��z��.�5��㕗V�sp��?�=øI"?�y�{�1r̕o��6po�$�--�n�B��O�\}��v��w47��%՝֭�/[Q��6l�� q��Bǹ}P ��}��0jOq��I��s�� M�\�� Z��s�4Gy��Gcn��M{�z�5�\r�%�\r�%�\r�%�/�ۡlv��o��s8�\�T`�N�$�ۉL� ��3�h��@�\�Y��|��x��(P�V�� h� 2m��7�ʩ(S��dd�C�ৌ��3�J]��!Д"�$r)B�D�$!�(1��Iv� �F�G1$�q!�D�x� �8��7�B")4�CB��6��-X��j��Y�9Z�&8G"� n�;"|7�F��9k��7��K�W��U�c��3L٢7ϩ�%�o��Ɏ��$��%dG�H��肄��h�%��)�K��HW��āJ �㠩�s6�5�XG�XI,g�3{K`�GГ��".%XYe'w<�*Q��_+�i}��Ź��N깖R=s�K�[[�'��A�$$Q3!Eq�og.B L�T1F�e��P�B�$G��p�K� G��|�s��9�^��\yp��N��Ɍ�>tEXtAuthorDavid Turner��IEND�B`�metrics.png000064400000004250152530116640006724 0ustar00�PNG IHDR��)�-PLTE�� >IDATh��Kl��GHJ��eXrHQ��*��B� ��M�e�i�T�CF�Rؔ6C��.4H�"1��Zd) J�C�G��NQ��y��gg��c��i��q��Ka�i垖&!� +��!l/�� V��(в/�}��'�Z��C��+��{��#�&��1��/��+�wpnjd��De�H@�!�X��9u$�� +5&%�,��6q.�X:��&�b>bT._9K"J�G�U��6�V�H-��UxMG��k͝�}��?�(#��="�� h��_�g`�ޟ�Mcd[;z��v��E#�Sވ��xK�(Ƶ�m�oz�Z:TNJ!�h[�z�ce\ �j��sUk��mE��,��4��݆��0N��{C-�i�o��w�v!E�t/�%J�ϐ�g��I-TO M��aH/5��ғ��E��6M�"��毚��R4|�d��g��ӧ:W�Rד\�9Qix��3��a�7rJ�5�m�*�6qꏖ�Gd�8^��kl��\�Ql]�[H�8BG��`V/-��}�K�g��f�C U,�f��[/d�J��;�{�/��\�I�^�s��`��W�T�UD�W�8z��*��+�Q��Kb�c`�e�{<�8��M��a��_)!zO�&e�w|��h�sDe�s�R�'��T�e�G$��g��~�S�BA��n��?��D|E��&�hs�.G]�,� I ��R�Ơ0��C��$�UYXTt��W�[d�"��CE�M�(�z��7T��d�qؓÆ��u�&��`��y�!�PD��Z� @��C#�Ȇ��D��K푳^��Q�B$3��.՞r=4>��"BƠSPGT�� b!PHDĜ�!�=��(�D��V�9[\b��'ڬ�bE.�X#��.��*�%*l�ma}ɘ��ʜ�ZW]ku��̑�G>��"tbCy�8�X�.F�{��;V��bUڀG�Օ/��q�x�J3�s�M��ΔRMj��Ƈ��E6��;>�8ӟZ/N�;Wgס&J�w��.�f��<28>�UF��$�;>�u�� 3��yYX�N��ɹ��=��w�9��vM|��A��]��&>��ݪ��[0�,L�z��9��?�qu��3�N�߹��յi>�yw5P8��WG%.��OK&!R'� �s��E�׼~�"�Hr�(]�<�v��<�8��j��en�#��D/eX�o�8z�~�r�� 7�Ns�I>�p�N��!"��R[�#7k��&G'~p��ޚ�!��&�w9�ؘ:;��qz�i�e^Z\�P�tEXtAuthorDavid Turner��IEND�B`�up_flow.png000064400000001434152530116640006732 0ustar00�PNG IHDR�H� PLTE��=�-�IDATx��͊"1�S! !�4�>��RO�Z̾��\��3�x�B%Q�J"J�\��6eLDSauFND��K FreeType Glyph Conventions / V

FreeType Glyph Conventions / V

V. Text Processing

This section demonstrate algorithms which use the concepts previously defined to render text, whatever layout you use. It assumes simple text handling suitable for scripts like Latin or Cyrillic, using a one-to-one relationship between input character codes and output glyphs indices. Scripts like Arabic or Khmer, which need a ‘shaping engine’ to do the character code to glyph index conversion, are beyond the scope (and should be done by proper layout engines like Pango anyway).

1. Writing simple text strings

In this first example, we will generate a simple string of text in the Latin script, i.e., with a horizontal left-to-right layout. Using exclusively pixel metrics, the process looks like:

Convert the character string into a series of glyph indices.
Place the pen to the cursor position.
Get or load the glyph image.
Translate the glyph so that its ‘origin’ matches the pen position.
Render the glyph to the target device.
Increment the pen position by the glyph's advance width (in pixels).
Start over at step 3 for each of the remaining glyphs.
When all glyphs are done, set the text cursor to the new pen position.

Note that kerning isn't part of this algorithm.

2. Subpixel positioning

This algorithm can be used for hinting modes that don't apply horizontal hinting. It essentially provides WYSIWYG text layout. Text rendering is very similar to the algorithm described in subsection 1, with the following few differences:

The pen position is expressed in fractional pixels.
The hinted outline must be shifted horizontally to the proper sub-pixel position.
The advance width is expressed in fractional pixels, and isn't necessarily an integer.

Here an improved version of the algorithm:

Convert the character string into a series of glyph indices.
Place the pen to the cursor position. This can be a non-integer point.
Get or load the glyph image.
Translate the glyph by ‘pen_pos - floor(pen_pos)’.
Render the glyph to the target device at ‘floor(pen_pos)’.
Increment the pen position by the glyph's advance width in fractional pixels.
Start over at step 3 for each of the remaining glyphs.
When all glyphs are done, set the text cursor to the new pen position.

3. Simple kerning

Adding kerning to the basic text rendering algorithm is easy: When a kerning pair is found, simply add the scaled kerning distance to the pen position before step 4. Of course, the distance should be rounded in the case of algorithm 1, though it doesn't need to for algorithm 2. This gives us:

Algorithm 1 with kerning:

Convert the character string into a series of glyph indices.
Place the pen to the cursor position.
Get or load the glyph image.
Add the rounded scaled kerning distance, if any, to the pen position.
Translate the glyph so that its ‘origin’ matches the pen position.
Render the glyph to the target device.
Increment the pen position by the glyph's advance width in pixels.
Start over at step 3 for each of the remaining glyphs.

Algorithm 2 with kerning:

Convert the character string into a series of glyph indices.
Place the pen to the cursor position.
Get or load the glyph image.
Add the scaled unrounded kerning distance, if any, to the pen position.
Translate the glyph by ‘pen_pos - int(pen_pos)’.
Render the glyph to the target device at ‘int(pen_pos)’.
Increment the pen position by the glyph's advance width in fractional pixels.
Start over at step 3 for each of the remaining glyphs.

4. Right-to-left layout

The process of laying out right-to-left scripts like (modern) Hebrew text is very similar. The only difference is that the pen position must be decremented before the glyph rendering (remember: the advance width is always positive, even for Hebrew glyphs).

Right-to-left algorithm 1:

Convert the character string into a series of glyph indices.
Place the pen to the cursor position.
Get or load the glyph image.
Decrement the pen position by the glyph's advance width in pixels.
Translate the glyph so that its ‘origin’ matches the pen position.
Render the glyph to the target device.
Start over at step 3 for each of the remaining glyphs.

The changes to algorithm 2, as well as the inclusion of kerning are left as an exercise to the reader.

5. Vertical layouts

Laying out vertical text uses exactly the same processes, with the following significant differences:

The baseline is vertical, and the vertical metrics must be used instead of the horizontal one.
The left bearing is usually negative, but this doesn't change the fact that the glyph origin must be located on the baseline.
The advance height is always positive, so the pen position must be decremented if one wants to write top to bottom (assuming the Y axis is oriented upwards).

Here the algorithm:

Convert the character string into a series of glyph indices.
Place the pen to the cursor position.
Get or load the glyph image.
Translate the glyph so that its ‘origin’ matches the pen position.
Render the glyph to the target device.
Decrement the vertical pen position by the glyph's advance height in pixels.
Start over at step 3 for each of the remaining glyphs.
When all glyphs are done, set the text cursor to the new pen position.

Last update: 13-Feb-2018

layout.png000064400000004244152530116640006576 0ustar00�PNG IHDR��3�"PLTE�� :IDATh��k��9��=0�]� 栠4-(`�9'\�q��s��>��AZ�:��Ҹ}��µG�8i��K��Ї��׾�Ah��!i%�v-��d��Y�~�;?v��e�,�� $M��j��U��hs��U��c�,��;6P>�ѷZ{C��A%UӯO�!" (�p-��K)�p�Rq�L��e1j�ןD�$�c�!��祼�z/_��OJ:=��O�=:v�_,�O�eO�^>�\�g��?��i��+��_��@��K;��oM��оRݼS\��uL�^��!e��Y��꒵`~�@%��?��bqA��&j��R��y��:]9�G@��_��ڤ�X�/R�5��B�Wȶ��l��b�t�P�m�L��@�Z^�:��o�$�'��Y��6�{!�%v��a�6��]a�I�Y@�Q]��D8o��D#a��;>]e�Z.PL}��5m��U��zHs��6�A�"G��_�M;W��kWK�ӻ��^l��"�X��E�|�8�p�|�&�1�ç/e��xǑ��ꆣ�~�l��S��5g��-��vN��m4�n�X��^�uF:l�Jl��+f�R��*&��P4F�z��̱��d�`��n��Tj�%z9��E 6�x��G��Hޓr�AI4:�3D�<��7�U�^�V�C*|��mWyR�E��/��;��j�W��_�ni��H6��?_}��Uk�A��PZ�3�`��4*Y��՜6ϨE;�+�� l/�Bڼ��"٢۬�NJi�P}�Y�urO��S��g'�i�#]�X��b��K5x&��h:k�t�S�y�?$'֯ �5�5�]K��Ba��w|��;�m�3��6��GNRh�*y�|c_g?��q�:��?v�t��7��Y�<{?�f�U�m��+|�rX��<{��3Q��L1��{��讘�f�]�К��f��Q{��2#��TNN�P�٬$R�"ԎQe�&O��h+N'��n91j��J�$U�Ӊ�jM�nLt�H��x��S�P�U��;0��a�S��|��/)�;��A��C�%��O�9ty�=��*��r��L��&*��Q�5|ʟ߃�*n˙B=ŧ�8Tҕ=��_r�"B��".��8��`As-�M�m D2u�{��_ZNL�� iCdCj��"��L��]��M��!�ES�?8��U��S�O{H�B��4-�w�ROuB��<%L�M!U=�"�xJ��A_ �RG�D�H�i��z(%Lɀ�SXɊƧJH�i��0! �P�*��:|��ܕ�;�ʹ(}6�ƛ4��G��і��z��ņ�R)�w"��U��D�p�(�Q̽�V %��T !R��m�R�O$FA�F/��tꈝ�U#�E��sJ�Tq��HH�π�~��}�Dj��Þ�gH�l�ԥC��/�TZ�=}��8�i��ɏQqΥDj��`Π6*'��jF��0��M��-`+Hz��DoHa\��Њ�p�NI�L$�V*޲�ΤM��b|�i�Ƃn�v��$�e�mgl�w��s��g|�BUe��VP��3猟nDX��Y�AAw��*�� C��"5�E��_��4x��r��&,gP��G~R�� we��~S�q�g��t�R��Q�x��]8*Ä�])��*��Oo�:�Z�RlO��ן�k=ٮ,e�n�| %��i4��ȵf��h|� �ZG�3=o��M��#�5T�v�=s��s��{��$G>�Û�`�2�Z�[�[��7��dp.(N� �A��1��Y#�RD�kF8�w��!��i�e�d�I@��e��]]��5J=�r�0��OG~�<�|��7�d��#!�Q�� V�-S�%��Gt#jgG�e�p�=��3FX�N;�m�1�2˦�8�d�0:OE�g��,�zY.��xO.�atEXtAuthorDavid Turner��IEND�B`�clipping.png000064400000002715152530116640007067 0ustar00�PNG IHDR�N�PLTE��mmU��Umm��^a�TIDATx��1v�0� I݁��,7mg�mw��4��CY�H* �!��C�?A A�2F�R�T*�J�R�T*�J�R�T�7ć��!��ZGJ�4J*��A)qP�,�Ӆ��T8=RPn(�Z�iIh@q�4Lq(š8��P�Cq(š8��P�� a�(K��Hs�Aq(š8��P�Cq(š8��ǟD��C[a��;��|�T�Cdh#;;�˲6pW�!� ��펷BD�/�Ch��p��L4L&��!�sc��OsF�.*�c6LCN��, M��J�� 0 98pJ&�=��er�!`r�t�y��V�A2�$Ǳ�!�F>�vyV��9U4��!`��,X�0�16X��1��E�ٓ��0 �S:$�a��C8h�c�@D��8�z�X�!t�~v��h��08,,�u=(_J;HKi'ˎ��C��(<��h��kd��R�F�Je#��kÁo��zd*�1�G�A��Yig�y�}�R�k= �Ead��j�G��p�8;��3J~P�c�[�p(��z�� ,t��3� ;�&iX��$�qYӐ��a��4�.��f��0��0��'G�հ�0 y�a�b)o��y�#kC!s� �8��0�9=x8��^h3��,8Ć�0�߅{\63��p�/BCN��z��h��ȱ))4��D;��"��t��O��#��+��8��c��d(� Y��ml^WC�8�e��0֫��6��P$�>xV�^mEG��8�9︋��B��k��R��0�=Cq8��|�b bM��9�V��p��8(�{,��ys��y-��v�W� ��Wy��m��W@qviv��7�IG`�b�n.����#��ù 2�O[� ��tټ �� Á��!��Jg��h�}\��V�z�t��|�+ڥk��[��.��I��K�c��7��Gғ�6c�uϓt�q��1�5p-�\zb�b��]Ц0�xC�p�ő�P��6mQ�?�/[J�0��!�!��8J�� G_�� y~�b��O�l��,f/�)�V��`�o�۽G �?�:�-��A��p_��;�`�_��_D��eNMDA�ⶔ,�"�-�$�ײ�E��@�T R�#�~�lV'��A��N��NNb��/��kX��6�w�Z�q��X��$ {��}BA�j�3�B�ٙ#�.��#�e+�i�A�jW_�8_��n%q��پ̯�^��`��}W�ݯ�leX��S��+��/��bA��>��5Ir�p)��US� ��j��V)Gf�mF��*��ꠐB�ϫ��~��|dq��OSK�C�I�2̟Y�#��ŅK��{��ڋЭ��ҩVy��>�K�TSA�Z��f"�㲩�|��0P$�m��[YS%��]U}��ϱ��M%�� j�(7�~>�!B�3�5��{PT��P%T$SYw#ؑ}�{H �Q��dͶ�*�T~�LU6V�VM�*�k;��j*�U SՙJz�!�Bz�ڪ�cJz��[ nK��%�:��Pe�\��:�T�9-�B%B1J�T_�Pc+4��68 -[Ÿ��"��o�Vt��x*�o��0��|�q�kb�vB)�Ŀ�&SM��X6�.X�?%�:g�0G��Ҷ�}8�[�]m�ǫ��Ǝ��3�h�CK�7�t��Hl�j��5�Z�ˋQ�,tT!�s2J��e�Q�.��x��Yi�R�-}m��S5�B?�|*Sݥ��e+��(Z��2��B[5�T�S��U+f��Mv]��.��Sq��T9e{��D��I� ��s��P��Jb�sXA�ڲ~�1�U��_MS ��Y�J��r�c��`��"��l��" 2�n�^r��o�k�U� 9 ��[��Q�؇��8�/�K�}�K�f;��`�P�b!�Q-��.�Y�V�=JǪ�T��/WU��U�z��鹱��>H�*�T�{��i�j��q�Y��B�hͲw�y�Jn�/M��J��=Z��!��! ߷��HH�tɮ�Q�O �#;u��)�/�Ɇ��g��n��`�P��+��y�3�L��_��3��NE�&�@g��`��6��j'{��߱_��*kn��e�4�)*��]��{�F헤7��g�2�~�z=Q��w(��;�SޱBY��C��6�c��z��:K!"�Dl5�P}b�n��#��J��Y 5��7�r��2�R�*0�)��R��Pc!�1�,)95|�B�R�2��ЎB|�B ��|Q�6�A`��Pc�U��8ܬ��g�,��[��2��g)��}�ﳕ=��z�F^(��Bj/x�Y��cW��ExtEXtAuthorDavid Turner��IEND�B`�bbox1.png000064400000002667152530116640006303 0ustar00�PNG IHDR�2ȰSPLTE��U��iGIDATh��Y��#7&�"��o�H�8m,\�5��5�ԤO��}��[�!�q �gH��zFi��Ůe�ď�H�U�r�7#ҍ�n��ެ�8t!5�>��ѷ�(b��l�;��2�߲� :��iv�/(�F�s"��N��>�ͅ<�Н��ݙ�e<��l��A��<��b�Љ��B�e�v�K�):��N��ġn��N�S�у Q!k�̍��`Y'*�^*�~��v��X�PJD��H9A�"��) l!_��m|rh�gH��n�fZ8�x��!�V=�]y��ޗw�{��\��|VU>�VYA��İ�%WU��d��g�a�z��lO-D��˅�yd�w��\k�êm�:N��\�dM�!�Oސ�s�<�(+��<+\�M�"��g��g�s�ۧ`�}��H#�DK�9>�a�D!em�A��f��N~��i�Zض�*��>˛��H9�?�f$��`�ˆJ��3�� ﺑߞ�vC�r^[��>v��~h6n��P+��V'��2r��j�Ϣ�j�&�ݟ�#�N�C�}8{6�(��!U��<4\��|�.��U�p��w6W'4�T�b#Y�R�z|q)�*�R�z��CX#��2|�1�V��5�=}V�?�JI��,ֻH.*��3�T��ݖ^�l�])�,�"�H��w�X?�W�\��e>dVv@�~�u^±q�ĳ;��hW��H D&�ʬ�G��|ɗ�%�~��Ta�U[�י��#k��b|�U�sy�I��<_��#��g'�/��f��̷�l:��l��ͬ��Ϸ[��Y/��7k2ב�?we^g��u��s^�*W��ȩ��f�B7��oFm�q�H��GR�I�ԁ�p��0&IrAF��Qk{}��eG=>f��SH�ēH QQ��Nz�z(Y1-34!��n�8%5��G3� n��$�$��Y#6NG�01�+L��^M0�XXifx(k ��>>~��.��$�0Ër�ZG[��x"R8!-�.��ʁ��S�i�Q�IS"�)iq�c4��IS��F�qr�iv�"��a�89 DD�4�g{\:��R�d��~�q�t#��8��'��q#;��dFAE3<ĉ3$h��yG�<)��b�J{��Ci�ѓS�,@�*m��y�V �" xrʒE�'k��<��FB1��<�S|AXCH��8ڭ��"$9��"$9:�&B ��h�N�J��6�>��g�~�Q�+ @�.��"$9��B��h`)@��ѐ�J{;�m4u��%;h�a��"��1|?C��|]To�%;��]i�s�֑2ݜ�')�=��?+� �G��d��x:��/;��r��Kf��͚��Νb"��x�8+9F&�O^}��2��K�6--#��n��f��T��X�]�.U�*TF�摹@��z��x�÷n�n1-;Ba�BD��~( {�`̻qE( @/mY�[ɠ_��݅ڪ6�Bר|+�L��lS��U>tEXtAuthorDavid Turner��IEND�B`�twlewis2.png000064400000000705152530116640007037 0ustar00�PNG IHDRs$H��PLTE��mmU��mm��U��VULIDATH�픱Nc1EO<��)��'r�z�k�6X驨��a��@@�-ʭ��9��h�p�O�ƿ&IR)K"K��{,8F�D�æ�h�<�:�8�}��K� �X��pӖ�#�Fs�pw��41+f5�~$�cE0*�gS�LY��Qp��ي��p��w�Ut8�x:Cg��x֔=��-G��E��4[��6�jrkO��֒�#X�UWQd=տ��@��tS��hْ��3?��t��p7�Y^��ɕR��Z��gt4�K��8�e�I��)JE��_��"6(��o�_��k��[W��Y�2�c�1tEXtAuthorDavid Turner��IEND�B`�twlewis1.png000064400000001234152530116640007034 0ustar00�PNG IHDR:&�J;PLTE��mmU��mm��U��H��3 IDATX��Mn�0F5l״d��>��ø[&l��p��.(�Vb6⮪OZP��'�i`֬Y�f��V��;��a133SpfZ͔j�u�Ŕ��羞�l�u1�P�g�6\)��p �<��p]K_�� |��q��5�ܔro+֦k�bwK�ٝ�Y��<�K�[@�ixH~�3��`�3Q��U�.�%��T�&��+��;�b��R|B��Ix ��m��t�?�N�] �R�n�Z�p;S��G��S�Z�bp8m'\)��.��=L)�!;�/ ��ԺAPİC��z��N4�O)+�bH�t�̪��9^f*��}��s�_�x^>�v�>%�U��|�ݭ��w7��y��I�'�c�+k��{?��_�r�y�[�|,��h�Ě�%3�=��X &,��u��q��|,=F��uϙ�l;�wf[��ƭ�_�0�@�`��c[�6ٳbbb��=\#��o�ĬY�f͚5��|wn��C^�tEXtAuthorDavid Turner��IEND�B`�glyphs-3.html000064400000037630152530116640007114 0ustar00 FreeType Glyph Conventions / III

FreeType Glyph Conventions / III

III. Glyph Metrics

1. Baseline, pens and layouts

The baseline is an imaginary line that is used to ‘guide’ glyphs when rendering text. It can be horizontal (e.g., Latin, Cyrillic, Arabic) or vertical (e.g., Chinese, Japanese, Mongolian). Moreover, to render text, a virtual point, located on the baseline, called the pen position or origin, is used to locate glyphs.

Each layout uses a different convention for glyph placement:

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.

The distance between two successive pen positions is glyph-specific and is called the advance width. Note that its value is always positive, even for right-to-left oriented scripts like Arabic. This introduces some differences in the way text is rendered.

The pen position is always placed on the baseline.
With a vertical layout, glyphs are centered around the baseline:

2. Typographic metrics and bounding boxes

A various number of face metrics are defined for all glyphs in a given font.

Ascent

The distance from the baseline to the highest or upper grid coordinate used to place an outline point. It is a positive value, due to the grid's orientation with the Y axis upwards.
Descent

The distance from the baseline to the lowest grid coordinate used to place an outline point. In FreeType, this is a negative value, due to the grid's orientation. Note that in some font formats this is a positive value.
Linegap

The distance that must be placed between two lines of text. The baseline-to-baseline distance should be computed as
linespace = ascent - descent + linegap

if you use the typographic values.

Other, simpler metrics are:

Bounding box

This is an imaginary box that encloses all glyphs from the font, usually as tightly as possible. It is represented by four parameters, namely xMin, yMin, xMax, and yMax, that can be computed for any outline. Their values can be in font units if measured in the original outline, or in integer (or fractional) pixel units when measured on scaled outlines.

A common shorthand for the bounding box is ‘bbox’.
Internal leading

This concept comes directly from the world of traditional typography. It represents the amount of space within the leading which is reserved for glyph features that lay outside of the EM square (like accentuation). It usually can be computed as

internal leading = ascent - descent - EM_size
External leading

This is another name for the line gap.

3. Bearings and Advances

Each glyph has also distances called bearings and advances. The actual values depend on the layout, as the same glyph can be used to render text either horizontally or vertically:

Left side bearing

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 ones.

In the FreeType API, this is also called bearingX. Another shorthand is ‘lsb’.
Top side bearing

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.

In the FreeType API, this is also called bearingY.
Advance width

The horizontal distance to increment (for left-to-right writing) or decrement (for right-to-left writing) the pen position after a glyph has been rendered when processing text. It is always positive for horizontal layouts, and zero for vertical ones.

In the FreeType API, this is also called advanceX.
Advance height

The vertical distance to decrement the pen position after a glyph has been rendered. It is always zero for horizontal layouts, and positive for vertical layouts.

In the FreeType API, this is also called advanceY.
Glyph width

The glyph's horizontal extent. For unscaled font coordinates, it is

glyph width = bbox.xMax - bbox.xMin

For scaled glyphs, its computation requests specific care, described in the grid-fitting chapter below.
Glyph height

The glyph's vertical extent. For unscaled font coordinates, it is

glyph height = bbox.yMax - bbox.yMin

For scaled glyphs, its computation requests specific care, described in the grid-fitting chapter below.
Right side bearing

Only used for horizontal layouts to describe the distance from the bbox's right edge to the advance width. In most cases it is a non-negative number:

right side bearing = advance_width - left_side_bearing - (xMax-xMin)

A common shorthand for this value is ‘rsb’.

Here is a picture giving all the details for horizontal metrics:

horizontal glyph metrics

And here is another one for the vertical metrics:

vertical glyph metrics

4. The effects of grid-fitting

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.

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 horizontally in order to keep its three legs distinctly visible, resulting in a wider character bitmap.

The glyph metrics are also influenced by the grid-fitting process:

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.
The image's bounding box is modified, thus modifying the bearings.
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.

This has some implications:

Because of hinting, simply scaling the font ascent or descent might not give correct results. A possible solution is to keep the ceiling of the scaled ascent, and floor of the scaled descent.
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 (for example in a cache). Some formats, like TrueType, even include a table of pre-computed values for a small set of common character pixel sizes.
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.

Performing 2D transformations on glyph outlines is very easy with FreeType. However, when using translation on hinted outlines, one should always take care of exclusively using integer pixel distances (which means that the parameters to the FT_Outline_Translate API function should all be multiples of 64, as the point coordinates are in 26.6 fixed-point format). Otherwise, the translation will simply ruin the hinter's work, resulting in very low quality bitmaps!

Note, however, that the restriction to integer pixel distances mentioned in the previous paragraph has become weaker; today, it is quite common to do no hinting along the horizontal axis, only adjusting the glyphs vertically. Typical examples are Microsoft's ClearType implementation, FreeType's new CFF engine (contributed by Adobe), or the ‘light’ auto-hinting mode. For such modes you get best rendering results if you do sub-pixel glyph positioning.

5. Text widths and bounding box

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.

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 box width.

The same conventions apply to strings of text, with the following consequences.

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.
The string's advance width isn't related to its bounding box dimensions. Especially if it contains leading and trailing spaces or tabs.
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.

Last update: 13-Feb-2018

points_conic2.png000064400000002007152530116640010025 0ustar00�PNG IHDR��?�IDATX��KhApA� �B<�z��Ră�G�E�KY��%MG𠢵�+ ��A��I�V�H�'NG�HM�*�z��'�1Pg�>C�T��dj�R��-'g��g��D�U�x�6�ucvj?Չ��ovz��sUs�vѻ�� z+�S� ��k5��3�36F��;��J�Qc�7H2ɀ'H[��ȞY�� g¬Y��Uk��ɨ,�{�dF�_��}2�^ ð�C��Cv��l��hN�9�4[��^"��p-��} �U��y�k7��'N��2U%��ȍ�Y��V��Lkej-�ݹ�R�L�ſi̼W%j��״ԸO6��Wk˫�+\5��B�7Uv��y7�z-0��R_�Ў��w+��w��۠�'q"72�á��,��'��L��mQ~~J8!gc��ʿ`'�n��BH��g$��r�X�,�]['ZY�hy��6��n�V�9�d��b�ᖁ��ݠNVELK�Uo��w�z_�5�I��Ni� f�"�x�U�R^{�镺�9�v+�~�}<��9�#��mx�i�]G�=��;��PX�?��ΉJP�Ȕ¯��6f��( ��|l�:�81��g��G��weK�(��e��}��5Y��$骀�݃H�s��'%�k��h��l�8D�ۦh)�կ�R�k�\��c�y�^��t>`j��c�1{"<�(/m�Y>��ٗ4U��E�8�9��bd� c4G�f"��I=�2�?�+��om '�c��R�z��6�{��G�zY%�IR�}��-vr- Z��P��3t��-(�tEXtAuthorDavid Turner��IEND�B`�glyphs-1.html000064400000023404152530116640007104 0ustar00 FreeType Glyph Conventions / I

FreeType Glyph Conventions / I

I. Basic Typographic Concepts

1. Font files, format and information

A font is a collection of various character images that can be used to display or print text. The images in a single font share some common properties, including look, style, serifs, etc. Typographically speaking, one has to distinguish between a font family and its multiple font faces, which usually differ in style though coming from the same template.

For example, ‘Palatino Regular’ and ‘Palatino Italic’ are two distinct faces from the same family, called ‘Palatino’ itself.

The single term ‘font’ is nearly always used in ambiguous ways to refer to either a given family or given face, depending on the context. For example, most users of word-processors use ‘font’ to describe a font family (e.g., ‘Courier’, ‘Palatino’, etc.); however, most of these families are implemented through several data files depending on the file format: For TrueType, this is usually one per face (i.e. arial.ttf for ‘Arial Regular’, ariali.ttf for ‘Arial Italic’, etc.). The file is also called a ‘font’ but really contains a font face.

A digital font is thus a data file that may contain one or more font faces. For each of these, it contains character images, character metrics, as well as other kind of information important to the layout of text and the processing of specific character encodings. In some formats, like Adobe's Type 1, a single font face is described through several files (i.e., one contains the character images, another one the character metrics). We will ignore this implementation issue in most parts of this document and consider digital fonts as single files, though FreeType 2 is able to support multiple-files fonts correctly.

As a convenience, a font file containing more than one face is called a font collection. This case is rather rare but can be seen in many Asian fonts, which contain images for two or more representation forms of a given scripts (usually for horizontal and vertical layout).

2. Character images and mappings

The character images are called glyphs. A single character can have several distinct images, i.e., several glyphs, depending on script, usage or context. Several characters can also take a single glyph (good examples are Roman ligatures like ‘fi’ and ‘fl’ which can be represented by a single glyph). The relationship between characters and glyphs can be very complex but won't be discussed in this document. Moreover, some formats use more or less complicated schemes to store and access glyphs. For the sake of clarity, we only retain the following notions when working with FreeType:

A font file contains a set of glyphs; each one can be stored as a bitmap, a vector representation, or any other scheme (most scalable formats use a combination of mathematical representation and control data/programs). These glyphs can be stored in any order in the font file, and are typically accessed through a simple glyph index.
The font file contains one or more tables, called character maps (also called ‘charmaps’ or ‘cmaps’ for short), which are used to convert character codes for a given encoding (e.g., ASCII, Unicode, Big5, ShiftJIS, etc.) into glyph indices relative to the font file. A single font face may contain several charmaps. For example, many OpenType fonts contain an Apple-specific charmap as well as a Unicode charmap, which makes them usable on both Mac and Windows platforms.

3. Character and font metrics

Each glyph image is associated with various metrics which describe how to place and manage it when rendering text; see section III for more. Metrics relate to glyph placement, cursor advances, as well as text layout. They are extremely important to compute the flow of text when rendering a string of text.

Each scalable format also contains some global metrics, expressed in notional (i.e. font) units, to describe some properties of all glyphs in the same face. Examples for global metrics are the maximum glyph bounding box, the ascender, descender, and text height of the font.

Non-scalable formats contain metrics also. However, they only apply to a set of given character dimensions and resolutions, and are usually expressed in pixels then.

Last update: 13-Feb-2018

layout2.png000064400000001240152530116640006651 0ustar00�PNG IHDR��O<PLTE�� 6IDATX��1��@��A[�}D��`��0V �iTk�-\�!e� )�� œB�K�ی��k?�0z3�IH��J��^�u��f""��橪F��Mx�S��#HG�9�%��Z:�%j�*V��j��#u��!u�jP/��q\Xk��s�j4ߒ�H�YE��aM�@��j�U�WO�TP�1��>�XԴ�i ʷ�H�_�z}MEy۞&�\֪��!u�:�n)�u2&W��2&k�+Q�~�.�"Q�ٛ��3%��ԢdM9��m�3��W�o4@�H��G}Yۏ '��4�H��P �;Rs��T'��b:@}��^�禅��^�.��x��!��JP�h��wɠܙ\��嚴Ik;m2��MZWVJ�|ڄ�믛��_��M@=��AH)�4=��Z3EO�Bͱ��^�5�o;��릤ʩg�y_�YM��W��ZS�%+��;�,o�w�FDD>�3j��N��O�W�k��XXe��G��g��*@ǡ�z3MzC��P�=�_�o�e`'�l�tEXtAuthorDavid Turner��IEND�B`�points_cubic.png000064400000001426152530116640007741 0ustar00�PNG IHDR��+T�IDATX��Oh�P��o^vLփ�IO� �Et�� .��&��E�gG�FE��t?>RIe 8e*�0�0p��ͤ ��3�׵��d��͊f:��p`�Hf��e=�>k6�6Y�ln�m��r��E߰�7�7�� K`��|�߰��!��f lM`e��s&k�Ԧ�o�� vm̚�\0Y��F3�1��k��Ƀ�l�1S��[~v�Rm��J�7C6單��ח -�d�#��^��m�C��[��Z{;�E3��U��}�㱙�W$U:T7>h�W��k��;�<��J��U��R[=v^$ȝ��5�ٙ��rD��N�k��;��Ў>�(�(꘮Un��<�s�Ņd��b�y!�d�Hz�^#��s��S(ɭ��~�[��I>#�$��F��:~̝mb�9��%�v��n`[&IN��Lb��%5+�ݎs�I��k�=�<�-��T�J&x(��ߨyy�f�=>tEXtAuthorDavid Turner��IEND�B`�

FreeType Glyph Conventions / VII

VII. FreeType Bitmaps

1. Vectorial versus pixel coordinates

2. The FT_Bitmap descriptor

3. Converting outlines into bitmaps and pixmaps

FreeType Glyph Conventions

I. Basic Typographic Concepts

II. Glyph Outlines

III. Glyph Metrics

IV. Kerning

V. Text Processing

VI. FreeType Outlines

VII. FreeType Bitmaps

FreeType Glyph Conventions / VI

VI. FreeType outlines

1. FreeType outline description and structure

a. Outline curve decomposition

b. The FT_Outline descriptor

2. Bounding and control box computations

3. Coordinates, scaling and grid-fitting

FreeType Glyph Conventions / IV

IV. Kerning

1. Kerning pairs

2. Applying kerning

FreeType Glyph Conventions / II

II. Glyph Outlines

1. Pixels, points, and device resolutions

2. Vectorial representation

3. Hinting and Bitmap rendering

FreeType Glyph Conventions / V

V. Text Processing

1. Writing simple text strings

2. Subpixel positioning

3. Simple kerning

4. Right-to-left layout

5. Vertical layouts

FreeType Glyph Conventions / III

III. Glyph Metrics

1. Baseline, pens and layouts

2. Typographic metrics and bounding boxes

3. Bearings and Advances

4. The effects of grid-fitting

5. Text widths and bounding box

FreeType Glyph Conventions / I

I. Basic Typographic Concepts

1. Font files, format and information

2. Character images and mappings

3. Character and font metrics

2. The `FT_Bitmap` descriptor

b. The `FT_Outline` descriptor