Cubic Hermite Font Spline

About this site¶

This site explains what Cubic Hermite Font Spline algorithm is all about and it's possible applications in real world.

What is Cubic Hermite Font Spline?¶

Cubic Hermite Font Spline is an algorithm designed to generate cubic Hermite spline curves from TrueType and PostScript font face outline data. It is to be used in digital content making industries like game and animated movie industry to serve as a spline making tool. The following is a glimpse of the principle mathematical methods that underlie the algorithm.

TrueType from a mathematical point of view¶

TrueType technology is powered by the quadratic Bézier curve defined by a parameterized function shown bellow.

\[ B(t)=P_1+(1-t)^2(P_0-P_1)+t^2(P_2-P_1) \hspace{0.1cm}, \hspace{0.3cm} 0 \le t \le 1 \]

Where \(P_0\), \(P_1\), and \(P_2\) are the control points at different locations in space.

Mathematical expression for PostScript font¶

PostScript was invented by Adobe and the technology is driven by cubic Bézier curves under the hood. Mathematically it can be expressed by the following equation.

\[ B(t)=(1-t)^3P_0+3(1-t)^2tP_1+3(1-t)t^2P_2+t^3P_3 \hspace{0.1cm}, \hspace{0.3cm} 0 \le t \le 1 \]

Where \(P_0\), \(P_1\), \(P_2\) and \(P_3\) are 4 control points by which the curve is defined. In the following section, TrueType fonts and PostScript fonts are both called Bézier fonts for brevity purpose.

Bézier Fonts

Bézier fonts and TrueType or PostScript fonts are used interchangeably on this site.

Cubic Hermite spline¶

In computer graphics related industries, cubic Hermite spline is widely used. It is defined by the following parametric function.

\[ P(t)=(2P_0+m_0-2P_1+m_1)t^3+(-3P_0+3P_1-2m_0-m_1)t^2+m_0t+P_0 \hspace{0.1cm}, \hspace{0.3cm} 0 \le t \le 1 \]

Where \(P_0\) and \(P_1\) are the control points of the curve, \(m_0\) and \(m_1\) are the tangents at \(P_0\) and \(P_1\) respectively.

Bézier splines and Hermite splines are different in nature. They have different practical applications in real world, and cannot be used interchangeably. This link might be a good reference in case you want to know more about this topic.

The Cubic Hermite Font Spline Algorithm¶

Cubic Hermite Font Spline algorithmically creates control points from the outline data of a Bézier font face. The algorithm is carefully designed to guarantee minimal divergence between Bézier curves and Hermite curves.

How Does The Cubic Hermite Font Spline Algorithm Work?¶

The algorithm is implemented in C++ language as a dynamic link library. The library has a simple interface, and can be easily integrated into other systems. The following code fragment shows what the library interface looks like.

library interface — Fig. 1 The Cubic Hermite Font Spline Library

The parameter c holds the Unicode value of the character who's control point data are to be extracted, and strFontFileName holds the Bézier font file name. The return value of type FontOutlineV of the function holds the control point data values of the generated cubic Hermite splines. The library automatically identifies TrueType font and PostScript font and generates Hermite splines accordingly. A utility function is also provided to retrieve information about the font file like font name, creator, manufacturer, license, etc..

How Well Does It Perform?¶

Performance analyses were carried out both in terms of runtime efficiency and degree of congruity between the two categories of splines.

1. Runtime efficiency¶

A program was developed to collect several key data at runtime. Table 1 lists the values recorded during the test run. Meaning of each column is as follows.

Font name.
Number of characters evaluated in each file.
Maximum number of control points (Max CPs) in characters from one font file.
Minimum number of control points (Min CPs) in characters from one font file.
Average number of control points (Avg CPs) of one character.
Total elapsed time for generating control points for all the characters in one font file.
Average elapsed time (Avg Time) for generating control points for one character.

Font Name	Number of Characters	Max CPs	Min CPs	Avg CPs	Total Time (ms)	Avg Time (ms)
Arial	94	118	4	27.7	4.6	0.049
Times New Roman	94	114	4	43.8	5.99	0.063
STZhongsong	20902	732	16	209.81	2620.33	0.125
SimSun	27648	427	7	126.40	2343.98	0.084
JhengHei	50734	316	4	51.11	2329.59	0.045
Dubai	940	346	4	15.69	27.70	0.029
MSGothic	447	99	4	19.87	37.18	0.083
Malgun Gothic	11172	123	10	57.57	856.47	0.076
Himalaya	219	394	4	92.90	12.14	0.055
TaiLe	2357	123	4	8.99	38.35	0.016
Monogolian Baiti	155	399	9	91.82	8.51	0.054
Myanmar Text	43	375	62	124.35	3.00	0.069

Total of 10 font faces of various languages were used in the test. Performance varies from character to character affected by the number of control points a character has. Fig. 2 shows the relationship between average number of control points and the generation time.

algorithm-performance — Fig. 2 Runtime Performance Of The Algorithm(click to enlarge)

Tests were carried out on an old platform with an Intel Core i7-10875H CPU running at 2.30GHz. Code was compiled against Microsoft C++ compiler version 19.39.33523.

2. Degree of congruity¶

Degree of congruity can be measured both objectively and subjectively. Subjective method is adopted. To evaluate the resemblance between the two categories of splines, visual representation of the cubic splines has to be created.

Visualization of the cubic Hermite splines¶

An Unreal Engine editor plugin was developed to visualize the spline curves. Fig. 3 shows a screen shot of the editor with cubic splines of a chinese character rendered.

Font Spline Editor UI — Fig. 3 Unreal Engine Editor Plugin For Cubic Hermite Splines (click to enlarge)

The rendered curves depict the Chinese character for the word "spring". Control points are shown along with the curves. The coordinate system is drawn to give a hint of how the character was made by the font face manufacturer.

Congruity between the two categories of splines¶

The method of checking the degree of visual resemblance between the two types of splines is straight forward. A set of randomly selected characters are rendered with the editor and the operating system respectively. The resulting images are processed and stacked on top of each other as shown in Fig. 4. So far, no obvious visual discrepancy between the two algorithms can be observed. All the tests were performed on Microsoft Windows, and the images were processed with GIMP.

Algorithm Comparison — Fig. 4 Quadratic Bézier curves (in blue color) and cubic Hermite splines (in orange color) comparison (click to enlarge)

The rendering result of the Bézier curves and control points of the character "春" is shown below in Fig. 5 for comparison reasons. It was rendered with Microsoft Excel.