Sync freetype-doc with freetype, i.e. update freetype-doc to
ver. 2.6.2 ok matthieu@
This commit is contained in:
dcoppa
parent
cddd9d77ab
commit
8b6c7dfac5
247
lib/freetype/docs/css/freetype.css
Normal file
247
lib/freetype/docs/css/freetype.css
Normal file
@ -0,0 +1,247 @@
|
||||
body {
|
||||
background-color: #FFFFFF;
|
||||
background-repeat: no-repeat;
|
||||
color: #000000;
|
||||
font-family: verdana, geneva, arial, helvetica, sans-serif;
|
||||
}
|
||||
body.top {
|
||||
background-color: #FFFFFF;
|
||||
background-repeat: no-repeat;
|
||||
color: #000000;
|
||||
padding-top: 250px;
|
||||
margin-left: 50px;
|
||||
font-family: verdana, geneva, arial, helvetica, sans-serif;
|
||||
}
|
||||
body.z {
|
||||
background-color: #FFFFFF;
|
||||
color: #000000;
|
||||
margin-left: 10%;
|
||||
margin-right: 10%;
|
||||
padding: 0;
|
||||
font-family: verdana, geneva, arial, helvetica, sans-serif;
|
||||
}
|
||||
body.front {
|
||||
background-color: #FFFFFF;
|
||||
color: #000000;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: verdana, geneva, arial, helvetica, sans-serif;
|
||||
}
|
||||
|
||||
div.version {
|
||||
margin-bottom: 7ex;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 10pt;
|
||||
text-align: justify;
|
||||
}
|
||||
p.center {
|
||||
text-align: center;
|
||||
}
|
||||
p.link {
|
||||
text-align: left;
|
||||
padding-left: 0.5em;
|
||||
width: 13.5em;
|
||||
}
|
||||
p.label {
|
||||
text-align: left;
|
||||
padding-left: 0.5em;
|
||||
margin-bottom: 1.5ex;
|
||||
background-color: #06425F;
|
||||
line-height: 3ex;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 180%;
|
||||
}
|
||||
h1.section {
|
||||
color: #06425F;
|
||||
font-family: verdana, geneva, arial, helvetica, sans-serif;
|
||||
font-size: 180%;
|
||||
margin-top: 2em;
|
||||
}
|
||||
h1.zsection {
|
||||
color: black;
|
||||
background-color: #CCCCEE;
|
||||
text-align: center;
|
||||
font-family: verdana, geneva, arial, helvetica, sans-serif;
|
||||
font-size: 180%;
|
||||
padding: 0.3em;
|
||||
border: none;
|
||||
width: 100%;
|
||||
}
|
||||
h1.intro {
|
||||
font-size: 24pt;
|
||||
font-weight: bold;
|
||||
font-family: sans-serif;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
margin-top: 0.3em;
|
||||
margin-left: 1em;
|
||||
margin-right: 1em;
|
||||
}
|
||||
h2 {
|
||||
font-size: 150%;
|
||||
}
|
||||
h2.section {
|
||||
color: black;
|
||||
background-color: #CCCCEE;
|
||||
text-align: center;
|
||||
font-family: verdana, geneva, arial, helvetica, sans-serif;
|
||||
font-size: 120%;
|
||||
padding: 0.2em;
|
||||
border: solid;
|
||||
border-width: 1px;
|
||||
width: 100%;
|
||||
}
|
||||
h3 {
|
||||
font-size: 120%;
|
||||
}
|
||||
h4 {
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
pre.code {
|
||||
font-family: "andale mono", lucida, "courier new", courier, monospace;
|
||||
font-size: small;
|
||||
color: blue;
|
||||
}
|
||||
pre.code i {
|
||||
font-family: "andale mono", lucida, "courier new", courier, monospace;
|
||||
font-style: normal;
|
||||
font-size: small;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
table.menu {
|
||||
border: 0;
|
||||
border-spacing: 0;
|
||||
padding: 0;
|
||||
margin-bottom: 3ex;
|
||||
}
|
||||
|
||||
tr.menurow {
|
||||
background-color: #000080;
|
||||
color: #000000;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
td {
|
||||
font-family: verdana, geneva, arial, helvetica, sans-serif;
|
||||
font-size: 10pt;
|
||||
}
|
||||
td.menu {
|
||||
font-family: verdana, geneva, arial, helvetica, sans-serif;
|
||||
font-size: 10pt;
|
||||
padding-left: 25px;
|
||||
padding-right: 25px;
|
||||
vertical-align: top;
|
||||
}
|
||||
td.menucell {
|
||||
color: #FFFFFF;
|
||||
background-color: #000080;
|
||||
font-family: verdana, geneva, arial, helvetica, sans-serif;
|
||||
font-size: 10pt;
|
||||
}
|
||||
td.locationcell {
|
||||
color: #000000;
|
||||
background-color: #FFFFFF;
|
||||
font-family: verdana, geneva, arial, helvetica, sans-serif;
|
||||
font-size: small;
|
||||
font-weight: bold;
|
||||
}
|
||||
td.titlebar {
|
||||
color: #000000;
|
||||
background-color: #C5CAE2;
|
||||
font-family: verdana, geneva, arial, helvetica, sans-serif;
|
||||
}
|
||||
|
||||
a:link {
|
||||
background-color: transparent;
|
||||
color: #000080;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:visited {
|
||||
background-color: transparent;
|
||||
color: #800080;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:active {
|
||||
background-color: transparent;
|
||||
color: #FE0000;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
background-color: transparent;
|
||||
color: #1919AA;
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
}
|
||||
a.sidebar:link {
|
||||
background-color: transparent;
|
||||
color: #000080;
|
||||
font-weight: normal;
|
||||
text-decoration: none;
|
||||
}
|
||||
a.sidebar:visited {
|
||||
background-color: transparent;
|
||||
color: #000080;
|
||||
font-weight: normal;
|
||||
text-decoration: none;
|
||||
}
|
||||
a.sidebar:active {
|
||||
background-color: transparent;
|
||||
color: #FE0000;
|
||||
font-weight: normal;
|
||||
text-decoration: none;
|
||||
}
|
||||
a.sidebar:hover {
|
||||
background-color: transparent;
|
||||
color: #1919AA;
|
||||
font-weight: normal;
|
||||
text-decoration: underline;
|
||||
}
|
||||
a.menulink {
|
||||
color: #EEEEEE;
|
||||
background-color: #000080;
|
||||
text-decoration: none;
|
||||
font-family: verdana, geneva, arial, helvetica, sans-serif;
|
||||
font-size: 10pt;
|
||||
}
|
||||
a.menulink:visited {
|
||||
color: #EEEEEE;
|
||||
background-color: #000080;
|
||||
text-decoration: none;
|
||||
}
|
||||
a.menulink:hover {
|
||||
color: #FFFFFF;
|
||||
background-color: #000080;
|
||||
text-decoration: none;
|
||||
}
|
||||
a.label:link {color: #FFFFFF}
|
||||
a.label:visited {color: #FFFFFF}
|
||||
a.label:active {color: #FFFFFF}
|
||||
a.label:hover {color: #FFFFFF}
|
||||
a.index:link {
|
||||
text-decoration: none;
|
||||
color: #666666
|
||||
}
|
||||
a.index:visited {
|
||||
text-decoration: none;
|
||||
color: #666666
|
||||
}
|
||||
a.index:active {
|
||||
text-decoration: none;
|
||||
color: #666666
|
||||
}
|
||||
a.index:hover {
|
||||
text-decoration: underline;
|
||||
color: #000000
|
||||
}
|
||||
|
||||
tt.code { color: gray; }
|
||||
em.warning { color: red; }
|
||||
369
lib/freetype/docs/css/freetype2.css
Normal file
369
lib/freetype/docs/css/freetype2.css
Normal file
@ -0,0 +1,369 @@
|
||||
/* freetype2.css */
|
||||
|
||||
/* the column container layout is based on */
|
||||
/* http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts */
|
||||
|
||||
|
||||
/* use Droid fonts */
|
||||
@import url("http://fonts.googleapis.com/css?family=Droid+Serif:r,i,b,bi");
|
||||
@import url("http://fonts.googleapis.com/css?family=Droid+Sans:r,b");
|
||||
@import url("http://fonts.googleapis.com/css?family=Droid+Sans+Mono");
|
||||
|
||||
|
||||
/* top-level appearance */
|
||||
body {
|
||||
width: 100%;
|
||||
margin: 0em;
|
||||
padding: 0em;
|
||||
border: 0em;
|
||||
text-align: left;
|
||||
font-size: large;
|
||||
font-family: "Droid Serif", "serif";
|
||||
line-height: 140%; }
|
||||
|
||||
/* table of contents column; */
|
||||
/* width and offsets must be synchronized with col2 below */
|
||||
#TOC {
|
||||
background: #F8F8F8;
|
||||
position: fixed;
|
||||
font-family: "Droid Sans", "sans-serif";
|
||||
font-size: 115%;
|
||||
left: 0em;
|
||||
width: 10em; }
|
||||
|
||||
#TOC-bottom {
|
||||
background: #F8F8F8;
|
||||
left: 0em;
|
||||
width: 11.5em; }
|
||||
|
||||
/* don't display list markers in TOC */
|
||||
#TOC ul {
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
margin: 0em;
|
||||
padding: 0em; }
|
||||
/* separate items with line */
|
||||
#TOC ul li {
|
||||
display: block;
|
||||
padding-top: 0.5ex;
|
||||
padding-bottom: 0.5ex;
|
||||
border-bottom: 1px solid #CCCCCC; }
|
||||
/* give more vertical spacing for funding icons */
|
||||
#TOC ul li.funding {
|
||||
padding-top: 1ex;
|
||||
padding-bottom: 1ex; }
|
||||
#TOC ul li.funding p {
|
||||
margin-top: 1.5ex;
|
||||
margin-bottom: 1.5ex; }
|
||||
|
||||
/* this is gray getting black */
|
||||
#TOC a:link {
|
||||
color: #666666; }
|
||||
#TOC a:visited {
|
||||
color: #666666; }
|
||||
#TOC a:active {
|
||||
color: #666666; }
|
||||
#TOC a:hover {
|
||||
color: #000000; }
|
||||
|
||||
/* this is pale red getting red
|
||||
|
||||
#TOC a.emphasis:link {
|
||||
color: #FF6666; }
|
||||
#TOC a.emphasis:visited {
|
||||
color: #FF6666; }
|
||||
#TOC a.emphasis:active {
|
||||
color: #FF6666; }
|
||||
#TOC a.emphasis:hover {
|
||||
color: #FF0000; }
|
||||
*/
|
||||
|
||||
#TOC a.emphasis:link {
|
||||
color: #666666; }
|
||||
#TOC a.emphasis:visited {
|
||||
color: #666666; }
|
||||
#TOC a.emphasis:active {
|
||||
color: #666666; }
|
||||
#TOC a.emphasis:hover {
|
||||
color: #000000; }
|
||||
|
||||
#TOC a.current:link {
|
||||
color: #000000; }
|
||||
#TOC a.current:visited {
|
||||
color: #000000; }
|
||||
#TOC a.current:active {
|
||||
color: #000000; }
|
||||
#TOC a.current:hover {
|
||||
color: #000000; }
|
||||
|
||||
/* top bar */
|
||||
#top h1 {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
left: 20px;
|
||||
margin: 0em;
|
||||
padding: 0em;
|
||||
border: 0em; }
|
||||
.bar {
|
||||
clear: both;
|
||||
color: white;
|
||||
background: #06435E
|
||||
url("../image/fond3.png")
|
||||
no-repeat
|
||||
right
|
||||
top;
|
||||
text-align: left;
|
||||
font-family: "Droid Sans", "sans-serif";
|
||||
font-weight: bold;
|
||||
padding: 0em;
|
||||
margin: 0em;
|
||||
border: 0em;
|
||||
height: 134px;
|
||||
vertical-align: bottom; }
|
||||
|
||||
#top a {
|
||||
color: white;
|
||||
/* pale underline for links */
|
||||
text-decoration: none;
|
||||
border-bottom: 2px solid #16536E; }
|
||||
#top a:link {
|
||||
color: white; }
|
||||
#top a:visited {
|
||||
color: white; }
|
||||
#top a:active {
|
||||
color: white; }
|
||||
#top a:hover {
|
||||
color: #CCCCCC; }
|
||||
|
||||
/* column container */
|
||||
.colmask {
|
||||
/* this fixes the IE7 overflow hidden bug */
|
||||
/* and stops the layout jumping out of place */
|
||||
position: relative;
|
||||
clear: both;
|
||||
float: left;
|
||||
width: 100%;
|
||||
/* this chops off any overhanging <div>s */
|
||||
overflow: hidden; }
|
||||
/* two-column left menu settings (col1 is right, col2 is left) */
|
||||
.leftmenu .colright {
|
||||
float: left;
|
||||
width: 200%;
|
||||
position: relative;
|
||||
left: 11.5em; /* pad2_l + wd2 + pad2_r */
|
||||
background: white; }
|
||||
.leftmenu .col1wrap {
|
||||
float: right;
|
||||
width: 50%;
|
||||
position: relative;
|
||||
right: 12em; } /* pad2_l + wd2 + pad2_r */
|
||||
.leftmenu .col1 {
|
||||
margin: 0 1em /* pad2_r */
|
||||
0 12em; /* pad2_l + wd2 + pad2_r + pad1_l */
|
||||
position: relative;
|
||||
right: 100%;
|
||||
width: 45em;
|
||||
max-width: 66%;
|
||||
/* overflow: hidden; */
|
||||
padding-left: 2em; }
|
||||
.leftmenu .col2 {
|
||||
float: left;
|
||||
width: 10em; /* wd2 */
|
||||
position: relative;
|
||||
right: 11em; } /* wd2 + pad2_r */
|
||||
|
||||
/* table of contents */
|
||||
#contents ul {
|
||||
list-style: none; }
|
||||
|
||||
blockquote {
|
||||
font-style: italic; }
|
||||
|
||||
code {
|
||||
font-family: "Droid Sans Mono", "monospace"; }
|
||||
|
||||
tt {
|
||||
font-family: "Droid Sans Mono", "monospace"; }
|
||||
|
||||
pre {
|
||||
font-family: "Droid Sans Mono", "monospace";
|
||||
margin-left: 1.5em; }
|
||||
pre.example {
|
||||
color: purple;
|
||||
font-family: "Droid Sans Mono", "monospace";
|
||||
margin-left: 1.5em; }
|
||||
|
||||
span.comment {
|
||||
color: gray; }
|
||||
span.important {
|
||||
font-weight: bold; }
|
||||
|
||||
a {
|
||||
color: #0000EF;
|
||||
font-weight: bold;
|
||||
/* no underline for links */
|
||||
text-decoration: none; }
|
||||
a:link {
|
||||
color: #000080; }
|
||||
a:visited {
|
||||
color: #800080; }
|
||||
a:active {
|
||||
color: #FE0000; }
|
||||
a:hover {
|
||||
color: #1919AA; }
|
||||
|
||||
h1 {
|
||||
margin-top: 6ex; }
|
||||
h2 {
|
||||
margin-top: 5ex; }
|
||||
h3 {
|
||||
margin-top: 4ex; }
|
||||
h4 {
|
||||
margin-top: 3ex; }
|
||||
h5 { }
|
||||
h6 { }
|
||||
|
||||
h1.title {
|
||||
text-align: center; }
|
||||
h1.header {
|
||||
margin-top: 1ex;
|
||||
line-height: 200%; }
|
||||
h2.author {
|
||||
text-align: center; }
|
||||
h3.date {
|
||||
text-align: center; }
|
||||
h3 + div.date {
|
||||
margin-top: -3ex;
|
||||
margin-bottom: 3ex; }
|
||||
h4 + div.date {
|
||||
margin-top: -3ex; }
|
||||
|
||||
/* images */
|
||||
img.with-border {
|
||||
padding: 0.5em; }
|
||||
#TOC img.with-border {
|
||||
padding: 0.3em; }
|
||||
|
||||
/* figures */
|
||||
div.figure {
|
||||
text-align: center;
|
||||
margin-top: 5ex;
|
||||
margin-bottom: 5ex; }
|
||||
p.caption {
|
||||
font-size: smaller; }
|
||||
|
||||
/* tables */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
/* the next two lines center the table horizontally */
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 5ex;
|
||||
margin-bottom: 5ex; }
|
||||
td {
|
||||
padding-left: 0.8em;
|
||||
padding-right: 0.8em; }
|
||||
thead {
|
||||
/* a horizontal rule between table head and body */
|
||||
border-bottom: solid thin; }
|
||||
th {
|
||||
padding-left: 0.8em;
|
||||
padding-right: 0.8em;
|
||||
/* some vertical space before the horizontal rule */
|
||||
padding-bottom: 1ex; }
|
||||
tbody tr:first-child td {
|
||||
/* some vertical space after the horizontal rule */
|
||||
padding-top: 1ex; }
|
||||
|
||||
dl {
|
||||
margin-left: 1em; }
|
||||
|
||||
dt {
|
||||
font-weight: bold; }
|
||||
|
||||
/* if we have paragraphs in definition lists, */
|
||||
/* suppress the very first vertical space */
|
||||
dd > p:first-child {
|
||||
margin-top: 0ex; }
|
||||
dd > p {
|
||||
margin-bottom: 0ex; }
|
||||
|
||||
/* indented text */
|
||||
div.quote {
|
||||
margin-left: 1.5em; }
|
||||
|
||||
/* list for subsections */
|
||||
li.tertiary {
|
||||
font-size: smaller;
|
||||
text-align: left;
|
||||
margin-left: 2em; }
|
||||
|
||||
/* list with item headers */
|
||||
li.emph p:first-child {
|
||||
font-weight: bold; }
|
||||
|
||||
ol.algorithm {
|
||||
font-family: "Droid Sans Mono", "monospace"; }
|
||||
|
||||
/* miscellaneous */
|
||||
div.date {
|
||||
color: #666666;
|
||||
font-size: smaller; }
|
||||
div.webmaintainer {
|
||||
margin-top: 5ex;
|
||||
font-style: italic;
|
||||
font-size: 70%; }
|
||||
div.updated {
|
||||
margin-top: 5ex;
|
||||
font-style: italic;
|
||||
font-size: 70%; }
|
||||
p.warning {
|
||||
color: red; }
|
||||
p.large {
|
||||
font-size: larger; }
|
||||
p.note {
|
||||
font-style: italic; }
|
||||
|
||||
/*
|
||||
@media screen and (max-width: 40.5em) {
|
||||
#TOC,
|
||||
.colmask,
|
||||
.leftmenu .colright,
|
||||
.leftmenu .col1wrap,
|
||||
.leftmenu .col1 {
|
||||
float: none;
|
||||
clear: none;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
left: 0em;
|
||||
right: 100%;
|
||||
max-width: 100%;
|
||||
margin: 0em;
|
||||
padding: 0em;
|
||||
font-family: "sans-serif";
|
||||
}
|
||||
|
||||
#TOC-bottom {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
display: table;
|
||||
line-height: 130%;
|
||||
padding: 0em 1em;
|
||||
}
|
||||
|
||||
#TOC {
|
||||
display: table-header-group;
|
||||
}
|
||||
|
||||
.colmask {
|
||||
display: table-footer-group;
|
||||
}
|
||||
|
||||
#TOC br {
|
||||
display: none; }
|
||||
}
|
||||
*/
|
||||
|
||||
/* end of file */
|
||||
12
lib/freetype/docs/css/freetype2_-30.css
Normal file
12
lib/freetype/docs/css/freetype2_-30.css
Normal file
@ -0,0 +1,12 @@
|
||||
/* freetype2_-30.css */
|
||||
|
||||
@import "freetype2.css";
|
||||
|
||||
.bar {
|
||||
background: #065E4E
|
||||
url("../image/fond3_-30.png")
|
||||
no-repeat
|
||||
right
|
||||
top; }
|
||||
#top a {
|
||||
border-bottom: 2px solid #166E5E; }
|
||||
12
lib/freetype/docs/css/freetype2_-60.css
Normal file
12
lib/freetype/docs/css/freetype2_-60.css
Normal file
@ -0,0 +1,12 @@
|
||||
/* freetype2_-60.css */
|
||||
|
||||
@import "freetype2.css";
|
||||
|
||||
.bar {
|
||||
background: #065E23
|
||||
url("../image/fond3_-60.png")
|
||||
no-repeat
|
||||
right
|
||||
top; }
|
||||
#top a {
|
||||
border-bottom: 2px solid #166E33; }
|
||||
12
lib/freetype/docs/css/freetype2_-90.css
Normal file
12
lib/freetype/docs/css/freetype2_-90.css
Normal file
@ -0,0 +1,12 @@
|
||||
/* freetype2_-90.css */
|
||||
|
||||
@import "freetype2.css";
|
||||
|
||||
.bar {
|
||||
background: #155E06
|
||||
url("../image/fond3_-90.png")
|
||||
no-repeat
|
||||
right
|
||||
top; }
|
||||
#top a {
|
||||
border-bottom: 2px solid #256E16; }
|
||||
12
lib/freetype/docs/css/freetype2_30.css
Normal file
12
lib/freetype/docs/css/freetype2_30.css
Normal file
@ -0,0 +1,12 @@
|
||||
/* freetype2_30.css */
|
||||
|
||||
@import "freetype2.css";
|
||||
|
||||
.bar {
|
||||
background: #06175E
|
||||
url("../image/fond3_30.png")
|
||||
no-repeat
|
||||
right
|
||||
top; }
|
||||
#top a {
|
||||
border-bottom: 2px solid #16276E; }
|
||||
12
lib/freetype/docs/css/freetype2_60.css
Normal file
12
lib/freetype/docs/css/freetype2_60.css
Normal file
@ -0,0 +1,12 @@
|
||||
/* freetype2_60.css */
|
||||
|
||||
@import "freetype2.css";
|
||||
|
||||
.bar {
|
||||
background: #21065E
|
||||
url("../image/fond3_60.png")
|
||||
no-repeat
|
||||
right
|
||||
top; }
|
||||
#top a {
|
||||
border-bottom: 2px solid #31166E; }
|
||||
12
lib/freetype/docs/css/freetype2_90.css
Normal file
12
lib/freetype/docs/css/freetype2_90.css
Normal file
@ -0,0 +1,12 @@
|
||||
/* freetype2_90.css */
|
||||
|
||||
@import "freetype2.css";
|
||||
|
||||
.bar {
|
||||
background: #4C065E
|
||||
url("../image/fond3_90.png")
|
||||
no-repeat
|
||||
right
|
||||
top; }
|
||||
#top a {
|
||||
border-bottom: 2px solid #5C166E; }
|
||||
185
lib/freetype/docs/documentation.html
Normal file
185
lib/freetype/docs/documentation.html
Normal file
@ -0,0 +1,185 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
||||
"http://www.w3.org/TR/html4/loose.dtd">
|
||||
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type"
|
||||
content="text/html; charset=utf-8">
|
||||
<meta http-equiv="Content-Style-Type"
|
||||
content="text/css">
|
||||
<meta http-equiv="Content-Script-Type"
|
||||
content="text/javascript">
|
||||
<meta name="description"
|
||||
content="FreeType Documentation">
|
||||
|
||||
<link rel="icon"
|
||||
href="image/favicon_-60.ico">
|
||||
<link rel="shortcut icon"
|
||||
href="image/favicon_-60.ico">
|
||||
<link rel="stylesheet"
|
||||
type="text/css"
|
||||
href="css/freetype2_-60.css">
|
||||
|
||||
<script type="text/javascript"
|
||||
src="javascript/jquery-1.11.0.min.js">
|
||||
</script>
|
||||
<script type="text/javascript"
|
||||
src="javascript/jquery.ba-resize.min.js">
|
||||
</script>
|
||||
<script type="text/javascript"
|
||||
src="javascript/freetype2.js">
|
||||
</script>
|
||||
|
||||
<title>FreeType Documentation</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="top"
|
||||
class="bar">
|
||||
<h1><a href="http://freetype.org/index.html">FreeType</a> Documentation</h1>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="wrapper">
|
||||
|
||||
<div class="colmask leftmenu">
|
||||
<div class="colright">
|
||||
<div class="col1wrap">
|
||||
<div class="col1">
|
||||
|
||||
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<div id="introduction">
|
||||
<p>Note that the FreeType documentation is also available as
|
||||
a single archive from
|
||||
our <a href="http://freetype.org/download.html">download page</a>.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<div id="links">
|
||||
<h3><a href="glyphs/index.html">FreeType Glyph
|
||||
Conventions</a></h3>
|
||||
|
||||
<p>This document is a <em>must-read</em> for any user of the
|
||||
library.</p>
|
||||
|
||||
<h3><a href="ft2faq.html">The FreeType FAQ</a></h3>
|
||||
|
||||
<h3><a href="tutorial/index.html">The FreeType Tutorial</a></h3>
|
||||
|
||||
<h3>The FreeType API Reference</h3>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<a href="reference/ft2-toc.html">Table Of
|
||||
Contents</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="reference/ft2-index.html">Index</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h3><a href="design/index.html">The Design of
|
||||
FreeType</a></h3>
|
||||
|
||||
<h3><a href="rasterinfo/rasterinfo.html">The RasterInfo
|
||||
Font</a></h3>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<div class="updated">
|
||||
<p>Last update: 05-Oct-2015</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<div class="col2">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<div id="TOC">
|
||||
<ul>
|
||||
<li class="funding">
|
||||
<p><a href="https://pledgie.com/campaigns/24434">
|
||||
<img alt="Click here to lend your support to the FreeType project and make a donation at pledgie.com!"
|
||||
src="https://pledgie.com/campaigns/24434.png?skin_name=chrome"
|
||||
border="0"
|
||||
align="middle">
|
||||
</a></p>
|
||||
|
||||
<p><a href="https://flattr.com/thing/421342/lemzwerg-on-Flattr"
|
||||
target="_blank">
|
||||
<img class="with-border"
|
||||
src="http://api.flattr.com/button/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" class="current">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>
|
||||
<!-- separate primary from secondary entries -->
|
||||
</li>
|
||||
|
||||
<li class="secondary">
|
||||
<a href="glyphs/index.html">Glyph Conventions</a>
|
||||
</li>
|
||||
<li class="secondary">
|
||||
<a href="ft2faq.html">FAQ</a>
|
||||
</li>
|
||||
<li class="secondary">
|
||||
<a href="tutorial/step1.html">Tutorial</a>
|
||||
</li>
|
||||
<li class="secondary">
|
||||
<a href="reference/ft2-toc.html">API Reference</a>
|
||||
</li>
|
||||
<li class="secondary">
|
||||
<a href="design/index.html">Design</a>
|
||||
</li>
|
||||
<li class="secondary">
|
||||
<a href="rasterinfo/rasterinfo.html">The RasterInfo Font</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div> <!-- id="wrapper" -->
|
||||
|
||||
<div id="TOC-bottom">
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
717
lib/freetype/docs/ft2faq.html
Normal file
717
lib/freetype/docs/ft2faq.html
Normal file
@ -0,0 +1,717 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
||||
"http://www.w3.org/TR/html4/loose.dtd">
|
||||
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type"
|
||||
content="text/html; charset=US-ASCII">
|
||||
<meta name="description"
|
||||
content="FreeType FAQ">
|
||||
<link rel="stylesheet"
|
||||
href="css/freetype.css">
|
||||
<title>FreeType 2 FAQ</title>
|
||||
</head>
|
||||
|
||||
<body text="#000000"
|
||||
bgcolor="#FFFFFF"
|
||||
link="#0000EF"
|
||||
vlink="#51188E"
|
||||
alink="#FF0000">
|
||||
|
||||
<table width="100%"
|
||||
border="0"
|
||||
cellspacing="0"
|
||||
cellpadding="5">
|
||||
<tr>
|
||||
<td bgcolor="#06425F">
|
||||
<a href="http://freetype.org/index.html">
|
||||
<img src="image/fond3.jpg"
|
||||
align="right"
|
||||
border="0"
|
||||
hspace="0"
|
||||
vspace="0"
|
||||
alt="FreeType Homepage">
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td bgcolor="#06425F">
|
||||
<h1 class="intro">FREETYPE 2 FAQ</h1>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td bgcolor="#669999">
|
||||
<a href="#general"
|
||||
class="index">General</a>
|
||||
<a href="#builds"
|
||||
class="index">Compilation &
|
||||
Configuration</a>
|
||||
<a href="#autohint"
|
||||
class="index">The FreeType 2
|
||||
auto-hinter</a>
|
||||
<a href="#other"
|
||||
class="index">Other</a>
|
||||
<font color="#FFFFFF">|</font>
|
||||
<a href="documentation.html"
|
||||
class="index">FreeType 2
|
||||
documentation</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table align="center"
|
||||
width="80%">
|
||||
<tr>
|
||||
<td>
|
||||
<h1 class="section">Table of Contents</h1>
|
||||
|
||||
<ul>
|
||||
<li><a href="#general">General questions</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#general-what">What is FreeType 2?</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#general-uses">What can I do with
|
||||
FreeType 2?</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#general-donts">What can I not do with
|
||||
FreeType 2?</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#general-portability">How portable is
|
||||
FreeType 2?</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#general-freetype1">What are the differences between
|
||||
FreeType 1.x and FreeType 2?</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#general-ft1">Is FreeType 2 backwards compatible
|
||||
to FreeType 1.x?</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#general-edit">Can I use FreeType 2 to edit
|
||||
fonts or create new ones?</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li><a href="#builds">Compilation & Configuration</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#builds-compile">How do I compile the FreeType 2
|
||||
library?</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#builds-config">How do I configure my library
|
||||
build?</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#builds-differences">Why does FreeType render
|
||||
differently on different platforms?</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="#autohint">The FreeType 2 auto-hinter</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#autohint-work">How does the auto-hinter work?</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#autohint-other-scripts">Why doesn't the auto-hinter
|
||||
work well with my script?</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="#other">Other questions</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#other-depth">Can I use FreeType to draw text on a
|
||||
pixmap with arbitrary depth?</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#other-color">How can I set the colour of text
|
||||
rendered by FreeType?</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#other-size">I set the pixel size to 8×8, but
|
||||
the resulting glyphs are larger (or smaller) than that.
|
||||
Why?</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#other-bbox">How can I compute the bounding box of a
|
||||
text string without loading its glyphs before?</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#other-antialias">Which anti-aliasing algorithm is
|
||||
used by FreeType 2?</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#other-opentype">When will FreeType 2 support
|
||||
OpenType?</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p><a href="#top"
|
||||
class="index">
|
||||
<img src="image/top.gif"
|
||||
width="35"
|
||||
height="19"
|
||||
align="right"
|
||||
border="0"
|
||||
hspace="0"
|
||||
vspace="0"
|
||||
alt="Top"></a></p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h1 class="section">
|
||||
<a name="general">
|
||||
General questions
|
||||
</a>
|
||||
</h1>
|
||||
|
||||
<a name="general-what"></a>
|
||||
<h3>
|
||||
What is FreeType 2?
|
||||
</h3>
|
||||
|
||||
<p>It is a software library that can be used by all kinds of
|
||||
applications to access the contents of font files. Most notably, it
|
||||
supports the following ‘features’:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p>It provides a uniform interface to access font files. It
|
||||
supports both bitmap and scalable formats, including TrueType,
|
||||
OpenType, Type1, CID, CFF, Windows FON/FNT, X11 PCF, and
|
||||
others.</p>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p>It supports high-speed anti-aliased glyph bitmap generation
|
||||
with 256 gray levels.</p>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p>It is extremely modular, each font format being supported by a
|
||||
specific module. A build of the library can be tailored to
|
||||
support only the formats you need, thus reducing code size (a
|
||||
minimal anti-aliasing build of FreeType can be less than 30KB)</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<hr>
|
||||
|
||||
<a name="general-uses"></a>
|
||||
<h3>
|
||||
What can I do with FreeType 2?
|
||||
</h3>
|
||||
|
||||
<p>FreeType 2 is already used in many products. For example, it
|
||||
serves as a font rendering engine</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
in graphics subsystem and libraries to display text
|
||||
</li>
|
||||
<li>
|
||||
in text layout and pagination services to measure and eventually
|
||||
render text
|
||||
</li>
|
||||
<li>
|
||||
in font inspection and conversion tools
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>Generally speaking, the library allows you to access and manage
|
||||
the contents of font files in a very easy way.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<a name="general-donts"></a>
|
||||
<h3>
|
||||
What can I not do with FreeType 2?
|
||||
</h3>
|
||||
|
||||
<p>FreeType 2 doesn't try to perform a number of sophisticated
|
||||
things, because it focuses on being an excellent <em>font
|
||||
service</em>.</p>
|
||||
|
||||
<p>This means that the following features are not supported directly
|
||||
by the library, even though they can be more or less implemented on
|
||||
top of it, or by using it:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p><b>rendering glyphs to arbitrary surfaces</b><br>
|
||||
FreeType 2 doesn't try to be a graphics library and thus only
|
||||
supports two pixel formats when rendering glyphs: monochrome 1-bit
|
||||
bitmaps, or 8-bit gray-level pixmaps.</p>
|
||||
|
||||
<p>If you need to draw glyphs to other kinds of surfaces (for
|
||||
example, a 24-bit RGB pixmap), you need to use your favorite
|
||||
graphics library to do just that.</p>
|
||||
|
||||
<p><em>Note however that in the case of rendering scalable glyph
|
||||
outlines to anti-aliased pixmaps, an application can also provide
|
||||
its own rendering callback in order to draw or compose directly
|
||||
the anti-aliased glyph on any target surface.</em></p>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p><b>glyph caching</b><br>
|
||||
Each time you request a glyph image from a font, FreeType 2
|
||||
does it by parsing the relevant portion of the font file or font
|
||||
stream and interpreting it according to its font format. This can
|
||||
be very slow for certain formats, including scalable ones like
|
||||
TrueType or Type 1.</p>
|
||||
|
||||
<p>Any decent text-rendering sub-system must thus be capable of
|
||||
caching glyph data in order to reach appropriate rendering
|
||||
speed.</p>
|
||||
|
||||
<p><em>Note that we provide a caching sub-system with
|
||||
FreeType 2 since version 2.0.1 which has become quite stable
|
||||
at the time of this writing (version 2.2.1). However, it might
|
||||
not suit your needs.</em></p>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p><b>text layout</b><br>
|
||||
The library doesn't support text layout operations. Sophisticated
|
||||
features like glyph substitution, positioning (kerning),
|
||||
justification, bi-directional ordering, etc.m are not part of a
|
||||
<em>font service</em> in itself. They must be handled one level
|
||||
higher.</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<hr>
|
||||
|
||||
<a name="general-portability"></a>
|
||||
<h3>
|
||||
How portable is FreeType 2?
|
||||
</h3>
|
||||
|
||||
<p>The FreeType 2 source code is <em>extremely</em> portable for the
|
||||
following reasons:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p>Everything is written in standard ANSI C.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>We are very pedantic to avoid any kinds of compiler warnings.
|
||||
The current source code has been compiled with many compilers
|
||||
without producing a single warning.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>The library doesn't use any static writable data at all, making
|
||||
it an ideal choice on various embedded systems (e.g., it can be
|
||||
run from ROM directly). It is completely thread-safe too.</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>We have made great efforts to ensure that the library is efficient,
|
||||
compact, and customizable.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<a name="general-freetype1"></a>
|
||||
<h3>
|
||||
What are the differences between FreeType 1.x and
|
||||
FreeType 2?
|
||||
</h3>
|
||||
|
||||
<p>The biggest differences are as follows.</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p>FreeType 1 only supports the TrueType format, while
|
||||
FreeType 2 supports a lot more.</p>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p>The FreeType 2 API is simpler as well as more powerful
|
||||
than the FreeType 1 API.</p>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p>FreeType 1 includes an extension to support OpenType text
|
||||
layout processing. This support hasn't become part of
|
||||
FreeType 2; a much improved version is now part of the <a
|
||||
href="http://www.pango.org">Pango</a> library.</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<hr>
|
||||
|
||||
<a name="general-ft1"></a>
|
||||
<h3>
|
||||
Is FreeType 2 backwards compatible with FreeType 1.x?
|
||||
</h3>
|
||||
|
||||
<p>Short answer: No. However, transition from 1.x to 2 should be
|
||||
rather straightforward.</p>
|
||||
|
||||
<p>The FreeType 2 API is a lot simpler than the one in 1.x
|
||||
while being much more powerful. We thus encourage you to adapt your
|
||||
source code to it as this should not involve much work.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<a name="general-edit"></a>
|
||||
<h3>
|
||||
Can I use FreeType 2 to edit fonts or create new ones?
|
||||
</h3>
|
||||
|
||||
<p>No. The library has been specifically designed to <em>read</em>
|
||||
font files with small code size and very low memory usage.</p>
|
||||
|
||||
<p>A good, freely available font editor is <a
|
||||
href="http://fontforge.org/">FontForge</a>.</p>
|
||||
|
||||
<p><a href="#top"
|
||||
class="index">
|
||||
<img src="image/top.gif"
|
||||
width="35"
|
||||
height="19"
|
||||
align="right"
|
||||
border="0"
|
||||
hspace="0"
|
||||
vspace="0"
|
||||
alt="Top"></a></p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h1 class="section">
|
||||
<a name="builds">
|
||||
Compilation & Configuration
|
||||
</a>
|
||||
</h1>
|
||||
|
||||
<a name="builds-compile"></a>
|
||||
<h3>
|
||||
How do I compile the FreeType 2 library?
|
||||
</h3>
|
||||
|
||||
<p>The library can be compiled in various ways, and detailed
|
||||
documentation is available in documentation directory of the
|
||||
FreeType 2 source tree.</p>
|
||||
|
||||
<p>For compilation on the command line, GNU make is necessary; other
|
||||
build tools won't work. The source bundle also comes with project
|
||||
files for some graphical IDEs like Visual C; note, however, that those
|
||||
files are sometimes not up to date since it is contributed code not
|
||||
used by the core developers.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<a name="builds-config"></a>
|
||||
<h3>
|
||||
How do I configure my build of the library?
|
||||
</h3>
|
||||
|
||||
<p>This is fully described in the file <tt>CUSTOMIZATION</tt> in
|
||||
FreeType's documentation directory. Basically, you have to edit the
|
||||
header file <tt>ftoption.h</tt> for compile-time options and to select
|
||||
the modules with the file <tt>modules.cfg</tt>. Finally, it is
|
||||
possible to replace the standard system interface (dealing with memory
|
||||
allocation and stream I/O) with a custom one.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<a name="builds-differences"></a>
|
||||
<h3>
|
||||
Why does FreeType render differently on different platforms?
|
||||
</h3>
|
||||
|
||||
<p>Different distributions compile FreeType with different options.
|
||||
The developer version of a distribution's FreeType package, which is
|
||||
needed to compile your program against FreeType, includes the file
|
||||
<tt>ftoption.h</tt>. Compare each platform's copy of
|
||||
<tt>ftoption.h</tt> to find the differences.</p>
|
||||
|
||||
<p><a href="#top"
|
||||
class="index">
|
||||
<img src="image/top.gif"
|
||||
width="35"
|
||||
height="19"
|
||||
align="right"
|
||||
border="0"
|
||||
hspace="0"
|
||||
vspace="0"
|
||||
alt="Top"></a></p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h1 class="section">
|
||||
<a name="autohint">
|
||||
The FreeType 2 auto-hinter
|
||||
</a>
|
||||
</h1>
|
||||
|
||||
<a name="autohint-work"></a>
|
||||
<h3>
|
||||
How does the auto-hinter work?
|
||||
</h3>
|
||||
|
||||
<p><em>Please note that the name of auto-hinter module is
|
||||
<b>autofit</b>, which is a reimplementation of the old autohint
|
||||
module.</em></p>
|
||||
|
||||
<p>A rather complete description of the hinting algorithm (which is
|
||||
slightly out of date regarding the internal structures) can be found
|
||||
in the TUG-boat article <a
|
||||
href="http://www.tug.org/TUGboat/Articles/tb24-3/lemberg.pdf">Real-Time
|
||||
Grid Fitting of Typographic Outlines</a>.</p>
|
||||
|
||||
<p>The auto-hinter performs grid-fitting on scalable font formats that
|
||||
use Bézier outlines as their primary glyph image format (this
|
||||
means nearly all scalable font formats today). If a given font driver
|
||||
doesn't provide its own hinter, the auto-hinter is used by default.
|
||||
If a format-specific hinter is provided, it is still possible to use
|
||||
the auto-hinter using the <tt>FT_LOAD_FORCE_AUTOHINT</tt> bit flag
|
||||
when calling <tt>FT_Load_Glyph()</tt>.</p>
|
||||
|
||||
<p>Currently, the auto-hinter doesn't use external hints to do its
|
||||
job, as it automatically computes global metrics (when it
|
||||
‘opens’ a font for the first time) and glyph
|
||||
‘hints’ from their outline.
|
||||
|
||||
<hr>
|
||||
|
||||
<a name="autohint-other-scripts"></a>
|
||||
<h3>
|
||||
Why doesn't the auto-hinter work well with my script?
|
||||
</h3>
|
||||
|
||||
<p>The auto-hinter was first designed to manage and hint Latin-based
|
||||
fonts, as they consist of most of the fonts available today. It now
|
||||
supports Asian fonts, but not other complex scripts like Arabic.</p>
|
||||
|
||||
<p>Hinting various scripts isn't really more difficult than Latin,
|
||||
just different, with a set of different constraints, which must be
|
||||
hard-coded into the autofit module. Volunteers welcome!</p>
|
||||
|
||||
<p><a href="#top"
|
||||
class="index">
|
||||
<img src="image/top.gif"
|
||||
width="35"
|
||||
height="19"
|
||||
align="right"
|
||||
border="0"
|
||||
hspace="0"
|
||||
vspace="0"
|
||||
alt="Top"></a></p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h1 class="section">
|
||||
<a name="other">
|
||||
Other questions
|
||||
</a>
|
||||
</h1>
|
||||
|
||||
<a name="other-depth"></a>
|
||||
<h3>
|
||||
Can I use FreeType to draw text on a pixmap with arbitrary depth?
|
||||
</h3>
|
||||
|
||||
<p>Not directly, as FreeType is a font library, not a general-purpose
|
||||
graphics library or text rendering service. However, note that the
|
||||
anti-aliased renderer allows you to convert a vectorial glyph outline
|
||||
into a list of ‘spans’ (i.e., horizontal pixel segments
|
||||
with the same coverage) that can be rendered through user-provided
|
||||
callbacks.</p>
|
||||
|
||||
<p>By providing the appropriate span callback, you can render
|
||||
anti-aliased text to any kind of surface. You can also use any
|
||||
colour, fill pattern or fill image if you want to. This process is
|
||||
called <em>direct rendering</em>.</p>
|
||||
|
||||
<p>A complete example is given at the end of the <a
|
||||
href="tutorial/step3.html">FreeType 2 tutorial</a>.
|
||||
|
||||
<p>Note that direct rendering is <em>not</em> available with
|
||||
monochrome output, as the current renderer uses a two-pass algorithm
|
||||
to generate glyphs with correct drop-out control.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<a name="other-color"></a>
|
||||
<h3>
|
||||
How can I set the colour of text rendered by FreeType?
|
||||
</h3>
|
||||
|
||||
<p>Basically, you can't do that, because FreeType is simply a font
|
||||
library. In general, you need to use your favorite graphics library
|
||||
to draw the FreeType glyphs with the appropriate colour.</p>
|
||||
|
||||
<p>Note that for anti-aliased glyphs, you can ‘set the
|
||||
colour’ by using <em>direct rendering</em> as described in <a
|
||||
href="#other-depth">this answer</a>.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<a name="other-size"></a>
|
||||
<h3>
|
||||
I set the pixel size to 8×8, but the resulting glyphs are
|
||||
larger (or smaller) than that. Why?
|
||||
</h3>
|
||||
|
||||
<p>A lot of people have difficulties to understand this topic, because
|
||||
they think of glyphs as fixed-width or fixed-height
|
||||
‘cells’, like those of fonts used in terminals/consoles.
|
||||
This assumption is not valid with most ‘modern’ font
|
||||
formats, even for bitmapped-based ones like <b>PCF</b> or
|
||||
<b>BDF</b>.</p>
|
||||
|
||||
<p>Be aware that the <em>character size</em> that is set either
|
||||
through <tt>FT_Set_Char_Size()</tt> or <tt>FT_Set_Pixel_Sizes()</tt>
|
||||
isn't directly related to the dimension of the generated glyph
|
||||
bitmaps!</p>
|
||||
|
||||
<p>Rather, the character size is indeed the size of <em>an abstract
|
||||
square</em>, called the <em>EM</em>, used by typographers to design
|
||||
fonts. Scaling two distinct fonts to the same character size, be it
|
||||
expressed in points or pixels, generally results in bitmaps with
|
||||
<em>distinct dimensions</em>!</p>
|
||||
|
||||
<p>Note that historically, the EM corresponded to the width of a
|
||||
capital ‘M’ in Latin typefaces. However, later
|
||||
improvements in typography led to designs that greatly deviate from
|
||||
this rule. Today, it is not possible to connect the EM size to a
|
||||
specific font ‘feature’ in a reliable way.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<a name="other-bbox"></a>
|
||||
<h3>
|
||||
How can I compute the bounding box of a text string without loading
|
||||
its glyphs before?
|
||||
</h3>
|
||||
|
||||
<p>This is not possible in general. Reason is that hinting distorts
|
||||
the glyph shape for optimal rasterization, and this process sometimes
|
||||
creates outlines which have considerably different metrics. The
|
||||
TrueType format provides the (optional) ‘hdmx’ table which
|
||||
contains device horizontal metrics for selected pixel sizes, but even
|
||||
here the vertical metrics are missing.</p>
|
||||
|
||||
<p>It is probably best to use both a glyph and a metrics cache to
|
||||
avoid recomputation.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<a name="other-antialias"></a>
|
||||
<h3>
|
||||
Which anti-aliasing algorithm is used by FreeType 2?
|
||||
</h3>
|
||||
|
||||
<p>The algorithm has been specifically designed for FreeType. It is
|
||||
based on ideas that were originally found in the implementation of the
|
||||
<a href="http://www.levien.com/libart/">libArt</a> graphics library to
|
||||
compute the <em>exact pixel coverage</em> of a vector image with no
|
||||
sub-sampling and filtering.</p>
|
||||
|
||||
<p>However, these two implementations are radically distinct and use
|
||||
vastly different models. The FreeType 2 renderer is optimized
|
||||
specifically for rendering small complex shapes, like glyphs, at very
|
||||
high speed while using very few memory. On the other hand, libArt has
|
||||
been designed for general shape and polygon processing, especially
|
||||
large ones.</p>
|
||||
|
||||
<p>The FreeType 2 anti-aliasing renderer is indeed
|
||||
<em>faster</em> than the monochrome renderer for small character sizes
|
||||
(typically <20 pixels). The reason is that the monochrome
|
||||
renderer must perform two passes on the outline in order to perform
|
||||
drop-out control according to the TrueType specification.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<a name="other-opentype"></a>
|
||||
<h3>
|
||||
When will FreeType 2 support OpenType?
|
||||
</h3>
|
||||
|
||||
<p>Well, the engine already reads OpenType/CFF files perfectly. What
|
||||
it doesn't do is handling ‘OpenType Layout’ tables.</p>
|
||||
|
||||
<p>FreeType 1 comes with a set of extensions that are used to
|
||||
load and manage OpenType Layout tables. It even has a demonstration
|
||||
program named <tt>ftstrtto</tt> to show its capabilities. However,
|
||||
this code is no longer maintained, and we strongly advise to not use
|
||||
it.</p>
|
||||
|
||||
<p>For FreeType 2, we have decided that the layout operations
|
||||
provided through these tables are better placed in a specific
|
||||
text-layout library like <a href="http://www.pango.org">Pango</a>.</p>
|
||||
|
||||
<p><a href="#top"
|
||||
class="index">
|
||||
<img src="image/top.gif"
|
||||
width="35"
|
||||
height="19"
|
||||
align="right"
|
||||
border="0"
|
||||
hspace="0"
|
||||
vspace="0"
|
||||
alt="Top"></a></p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<font size=-3>Last update: 25-Feb-2011</font>
|
||||
|
||||
<table width="100%"
|
||||
border="0"
|
||||
cellspacing="0"
|
||||
cellpadding="5">
|
||||
<tr>
|
||||
<td bgcolor="#669999">
|
||||
<a href="#general"
|
||||
class="index">General</a>
|
||||
<a href="#builds"
|
||||
class="index">Compilation &
|
||||
Configuration</a>
|
||||
<a href="#autohint"
|
||||
class="index">The FreeType 2
|
||||
auto-hinter</a>
|
||||
<a href="#other"
|
||||
class="index">Other</a>
|
||||
<font color="#FFFFFF">|</font>
|
||||
<a href="documentation.html"
|
||||
class="index">FreeType
|
||||
documentation</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td bgcolor="#06425F">
|
||||
<a href="http://freetype.org/index.html">
|
||||
<img src="image/fond3.jpg"
|
||||
align="right"
|
||||
border="0"
|
||||
hspace="0"
|
||||
vspace="0"
|
||||
alt="FreeType Homepage">
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,200 +1,271 @@
|
||||
<!doctype html public "-//w3c//dtd html 4.0 transitional//en"
|
||||
"http://www.w3.org/TR/REC-html40/loose.dtd">
|
||||
<html>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
||||
"http://www.w3.org/TR/html4/loose.dtd">
|
||||
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type"
|
||||
content="text/html; charset=iso-8859-1">
|
||||
content="text/html; charset=utf-8">
|
||||
<meta http-equiv="Content-Style-Type"
|
||||
content="text/css">
|
||||
<meta http-equiv="Content-Script-Type"
|
||||
content="text/javascript">
|
||||
<meta name="description"
|
||||
content="FreeType Documentation">
|
||||
<meta name="Author"
|
||||
content="David Turner">
|
||||
<title>FreeType Glyph Conventions</title>
|
||||
|
||||
<link rel="icon"
|
||||
href="../image/favicon_-90.ico">
|
||||
<link rel="shortcut icon"
|
||||
href="../image/favicon_-90.ico">
|
||||
<link rel="stylesheet"
|
||||
type="text/css"
|
||||
href="../css/freetype2_-90.css">
|
||||
|
||||
<script type="text/javascript"
|
||||
src="../javascript/jquery-1.11.0.min.js">
|
||||
</script>
|
||||
<script type="text/javascript"
|
||||
src="../javascript/jquery.ba-resize.min.js">
|
||||
</script>
|
||||
<script type="text/javascript"
|
||||
src="../javascript/freetype2.js">
|
||||
</script>
|
||||
|
||||
<title>FreeType Glyph Conventions / I</title>
|
||||
</head>
|
||||
|
||||
<body text="#000000"
|
||||
bgcolor="#FFFFFF"
|
||||
link="#0000EF"
|
||||
vlink="#51188E"
|
||||
alink="#FF0000">
|
||||
|
||||
<h1 align=center>
|
||||
FreeType Glyph Conventions
|
||||
</h1>
|
||||
<body>
|
||||
|
||||
<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%">
|
||||
|
||||
</td>
|
||||
<td align=center
|
||||
width="30%">
|
||||
<a href="index.html">Contents</a>
|
||||
</td>
|
||||
<td align=center
|
||||
width="30%">
|
||||
<a href="glyphs-2.html">Next</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</center>
|
||||
|
||||
<p><hr></p>
|
||||
|
||||
<table width="100%">
|
||||
<tr bgcolor="#CCCCFF"
|
||||
valign=center><td>
|
||||
<h2>
|
||||
I. Basic typographic concepts
|
||||
</h2>
|
||||
</td></tr>
|
||||
</table>
|
||||
|
||||
<a name="section-1">
|
||||
<h3>
|
||||
1. Font files, format and information
|
||||
</h3>
|
||||
|
||||
<p>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 <em>font family</em> and its
|
||||
multiple <em>font faces</em>, which usually differ in style though come
|
||||
from the same template.</p>
|
||||
|
||||
For example, "Palatino Regular" and "Palatino Italic" are two distinct
|
||||
<em>faces</em> from the same famous <em>family</em>, called "Palatino"
|
||||
itself.</p>
|
||||
|
||||
<p>The single term <em>font</em> 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.
|
||||
<tt>arial.ttf</tt> for "Arial Regular", <tt>ariali.ttf</tt> for "Arial
|
||||
Italic", etc.). The file is also called a "font" but really contains a
|
||||
font face.</p>
|
||||
|
||||
<p>A <em>digital font</em> is thus a data file that may contain <em>one
|
||||
or more font faces</em>. 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 awkward 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.0 is able to
|
||||
support multiple-files fonts correctly.</p>
|
||||
|
||||
<p>As a convenience, a font file containing more than one face is called
|
||||
a <em>font collection</em>. 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.</p>
|
||||
<div id="top"
|
||||
class="bar">
|
||||
<h1><a href="http://freetype.org/index.html">FreeType</a> Glyph
|
||||
Conventions / I</h1>
|
||||
</div>
|
||||
|
||||
|
||||
<a name="section-2">
|
||||
<h3>
|
||||
2. Character images and mappings
|
||||
</h3>
|
||||
<div id="wrapper">
|
||||
|
||||
<p>The character images are called <em>glyphs</em>. 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 relationships between characters
|
||||
and glyphs can be very complex, but won't be discussed in this document.
|
||||
Moreover, some formats use more or less awkward schemes to store and
|
||||
access glyphs. For the sake of clarity, we only retain the following
|
||||
notions when working with FreeType:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p>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 is typically accessed through a simple glyph index.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>The font file contains one or more tables, called a <em>character
|
||||
map</em> (or charmap in short), which is used to convert character
|
||||
codes for a given encoding (e.g. ASCII, Unicode, DBCS, Big5, etc..)
|
||||
into glyph indices relative to the font file. A single font face
|
||||
may contain several charmaps. For example, most TrueType fonts
|
||||
contain an Apple-specific charmap as well as a Unicode charmap,
|
||||
which makes them usable on both Mac and Windows platforms.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="colmask leftmenu">
|
||||
<div class="colright">
|
||||
<div class="col1wrap">
|
||||
<div class="col1">
|
||||
|
||||
|
||||
<a name="section-3">
|
||||
<h3>
|
||||
3. Character and font metrics
|
||||
</h3>
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<p>Each glyph image is associated with various metrics which are used to
|
||||
describe how must be placed and managed when rendering text. These
|
||||
are described in more details in section III, they 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.</p>
|
||||
<div id="basic-typographic-concepts">
|
||||
<h2>I. Basic Typographic Concepts</h2>
|
||||
|
||||
<p>Each scalable format also contains some global metrics, expressed in
|
||||
notional 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 for the font.</p>
|
||||
<h3 id="section-1">1. Font files, format and
|
||||
information</h3>
|
||||
|
||||
<p>Though these metrics also exist for non-scalable formats, they only
|
||||
apply for a set of given character dimensions and resolutions, and
|
||||
are usually expressed in pixels then.</p>
|
||||
<p>A <em>font</em> 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 <em>font
|
||||
family</em> and its multiple <em>font faces</em>, which
|
||||
usually differ in style though come from the same
|
||||
template.</p>
|
||||
|
||||
<p>For example, ‘Palatino Regular’ and
|
||||
‘Palatino Italic’ are two distinct
|
||||
<em>faces</em> from the same <em>family</em>, called
|
||||
‘Palatino’ itself.</p>
|
||||
|
||||
<p>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. <tt>arial.ttf</tt> for
|
||||
‘Arial Regular’, <tt>ariali.ttf</tt> for
|
||||
‘Arial Italic’, etc.). The file is also
|
||||
called a ‘font’ but really contains a font
|
||||
face.</p>
|
||||
|
||||
<p>A <em>digital font</em> is thus a data file that may
|
||||
contain <em>one or more font faces</em>. 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.</p>
|
||||
|
||||
<p>As a convenience, a font file containing more than one
|
||||
face is called a <em>font collection</em>. 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.</p>
|
||||
|
||||
|
||||
<p><hr></p>
|
||||
<h3 id="section-2">2. Character images and
|
||||
mappings</h3>
|
||||
|
||||
<center>
|
||||
<table width="100%"
|
||||
border=0
|
||||
cellpadding=5>
|
||||
<tr bgcolor="#CCFFCC" valign=center>
|
||||
<td align=center
|
||||
width="30%">
|
||||
|
||||
</td>
|
||||
<td align=center
|
||||
width="30%">
|
||||
<a href="index.html">Contents</a>
|
||||
</td>
|
||||
<td align=center
|
||||
width="30%">
|
||||
<a href="glyphs-2.html">Next</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</center>
|
||||
<p>The character images are called <em>glyphs</em>. 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:</p>
|
||||
|
||||
</td></tr>
|
||||
</table>
|
||||
</center>
|
||||
<ul>
|
||||
<li>
|
||||
<p>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.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>The font file contains one or more tables, called
|
||||
<em>character maps</em> (also called
|
||||
‘charmaps’ or ‘cmaps’ for
|
||||
short), which are used to convert character codes for
|
||||
a given encoding (e.g. ASCII, Unicode, DBCS, Big5,
|
||||
etc.) into glyph indices relative to the font file. A
|
||||
single font face may contain several charmaps. For
|
||||
example, many TrueType fonts contain an Apple-specific
|
||||
charmap as well as a Unicode charmap, which makes them
|
||||
usable on both Mac and Windows platforms.</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h3 id="section-3">3. Character and font metrics</h3>
|
||||
|
||||
<p>Each glyph image is associated with various metrics which
|
||||
describe how to place and manage it when rendering text;
|
||||
see <a href="glyphs-3.html">section III</a> 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.</p>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
<p>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.</p>
|
||||
</div>
|
||||
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<div class="updated">
|
||||
<p>Last update: 07-Dec-2014</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<div class="col2">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<div id="TOC">
|
||||
<ul>
|
||||
<li class="funding">
|
||||
<p><a href="https://pledgie.com/campaigns/24434">
|
||||
<img alt="Click here to lend your support to the FreeType project and make a donation at pledgie.com!"
|
||||
src="https://pledgie.com/campaigns/24434.png?skin_name=chrome"
|
||||
border="0"
|
||||
align="middle">
|
||||
</a></p>
|
||||
|
||||
<p><a href="https://flattr.com/thing/421342/lemzwerg-on-Flattr"
|
||||
target="_blank">
|
||||
<img class="with-border"
|
||||
src="http://api.flattr.com/button/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>
|
||||
<!-- separate primary from secondary entries -->
|
||||
</li>
|
||||
|
||||
<li class="secondary">
|
||||
<a href="index.html">FreeType Glyph Conventions</a>
|
||||
</li>
|
||||
<li class="tertiary">
|
||||
<a href="glyphs-1.html" class="current">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">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> <!-- id="wrapper" -->
|
||||
|
||||
<div id="TOC-bottom">
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,395 +1,472 @@
|
||||
<!doctype html public "-//w3c//dtd html 4.0 transitional//en"
|
||||
"http://www.w3.org/TR/REC-html40/loose.dtd">
|
||||
<html>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
||||
"http://www.w3.org/TR/html4/loose.dtd">
|
||||
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type"
|
||||
content="text/html; charset=iso-8859-1">
|
||||
content="text/html; charset=utf-8">
|
||||
<meta http-equiv="Content-Style-Type"
|
||||
content="text/css">
|
||||
<meta http-equiv="Content-Script-Type"
|
||||
content="text/javascript">
|
||||
<meta name="description"
|
||||
content="FreeType Documentation">
|
||||
<meta name="Author"
|
||||
content="David Turner">
|
||||
<title>FreeType Glyph Conventions</title>
|
||||
|
||||
<link rel="icon"
|
||||
href="../image/favicon_-90.ico">
|
||||
<link rel="shortcut icon"
|
||||
href="../image/favicon_-90.ico">
|
||||
<link rel="stylesheet"
|
||||
type="text/css"
|
||||
href="../css/freetype2_-90.css">
|
||||
|
||||
<script type="text/javascript"
|
||||
src="../javascript/jquery-1.11.0.min.js">
|
||||
</script>
|
||||
<script type="text/javascript"
|
||||
src="../javascript/jquery.ba-resize.min.js">
|
||||
</script>
|
||||
<script type="text/javascript"
|
||||
src="../javascript/freetype2.js">
|
||||
</script>
|
||||
|
||||
<title>FreeType Glyph Conventions / II</title>
|
||||
</head>
|
||||
|
||||
<body text="#000000"
|
||||
bgcolor="#FFFFFF"
|
||||
link="#0000EF"
|
||||
vlink="#51188E"
|
||||
alink="#FF0000">
|
||||
|
||||
<h1 align=center>
|
||||
FreeType Glyph Conventions
|
||||
</h1>
|
||||
<body>
|
||||
|
||||
<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, 2007 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-1.html">Previous</a>
|
||||
</td>
|
||||
<td align=center
|
||||
width="30%">
|
||||
<a href="index.html">Contents</a>
|
||||
</td>
|
||||
<td align=center
|
||||
width="30%">
|
||||
<a href="glyphs-3.html">Next</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</center>
|
||||
|
||||
<p><hr></p>
|
||||
|
||||
<table width="100%">
|
||||
<tr bgcolor="#CCCCFF"
|
||||
valign=center><td>
|
||||
<h2>
|
||||
II. Glyph Outlines
|
||||
</h2>
|
||||
</td></tr>
|
||||
</table>
|
||||
|
||||
<p>This section describes the way scalable representations of glyph images,
|
||||
called outlines, are used by FreeType as well as client applications.</p>
|
||||
|
||||
<a name="section-1">
|
||||
<h3>
|
||||
1. Pixels, points and device resolutions
|
||||
</h3>
|
||||
|
||||
<p>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, be it a
|
||||
screen or printer, exhibits varying resolutions in both horizontal and
|
||||
vertical direction, and this must be taken care of when rendering
|
||||
text.</p>
|
||||
|
||||
<p>It is thus common to define a device's characteristics through two
|
||||
numbers expressed in <em>dpi</em> (dots per inch). For example, a
|
||||
printer with a resolution of 300x600 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
|
||||
(15" and 17" monitors don't have the same pixel sizes at
|
||||
640x480), and of course the graphics mode resolution.</p>
|
||||
|
||||
<p>As a consequence, the size of text is usually given in
|
||||
<em>points</em>, rather than device-specific pixels. Points are a
|
||||
simple <em>physical</em> unit, where 1 point = 1/72th of
|
||||
an inch, in digital typography. As an example, most Roman books are
|
||||
printed with a body text whose size is somewhere between 10 and
|
||||
14 points.</p>
|
||||
|
||||
<p>It is thus possible to compute the size of text in pixels from the
|
||||
size in points with the following formula:</p>
|
||||
|
||||
<center>
|
||||
<tt>pixel_size = point_size * resolution / 72</tt>
|
||||
</center>
|
||||
|
||||
<p>The resolution is expressed in <em>dpi</em>. Since horizontal and
|
||||
vertical resolutions may differ, a single point size usually defines a
|
||||
different text width and height in pixels.</p>
|
||||
|
||||
<p><em>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 relate to 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).</em></p>
|
||||
<div id="top"
|
||||
class="bar">
|
||||
<h1><a href="http://freetype.org/index.html">FreeType</a> Glyph
|
||||
Conventions / II</h1>
|
||||
</div>
|
||||
|
||||
|
||||
<a name="section-2">
|
||||
<h3>
|
||||
2. Vectorial representation
|
||||
</h3>
|
||||
<div id="wrapper">
|
||||
|
||||
<p>The source format of outlines is a collection of closed paths called
|
||||
<em>contours</em>. Each contour delimits an outer or inner
|
||||
<em>region</em> of the glyph, and can be made of either <em>line
|
||||
segments</em> or <em>Bézier arcs</em>.</p>
|
||||
|
||||
<p>The arcs are defined through <em>control points</em>, and can be
|
||||
either second-order (these are <em>conic</em> Béziers) or
|
||||
third-order (<em>cubic</em> Béziers) polynomials, depending on
|
||||
the font format. Note that conic Béziers are usually called
|
||||
<em>quadratic</em> Béziers in the literature. Hence, each point
|
||||
of the outline has an associated flag indicating its type (normal or
|
||||
control point). And scaling the points will scale the whole
|
||||
outline.</p>
|
||||
|
||||
<p>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 origin's being at (0,0);
|
||||
they thus range from -16384 to 16383. (Even though point
|
||||
coordinates can be floats in other formats such as Type 1, we will
|
||||
restrict our analysis to integer values for simplicity).</p>
|
||||
|
||||
<p><em>The grid is always oriented like the traditional mathematical
|
||||
two-dimensional plane, i.e., the <i>X</i> axis from the left to the
|
||||
right, and the <i>Y</i> axis from bottom to top.</em></p>
|
||||
|
||||
<p>In creating the glyph outlines, a type designer uses an imaginary
|
||||
square called the <em>EM square</em>. 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:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p>It is the reference used to scale the outlines to a given text
|
||||
dimension. For example, a size of 12pt at 300x300 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:</p>
|
||||
|
||||
<p><center>
|
||||
<tt>pixel_size = point_size * resolution / 72</tt><br>
|
||||
<tt>pixel_coord = grid_coord * pixel_size / EM_size</tt>
|
||||
</center></p>
|
||||
</li>
|
||||
<li>
|
||||
<p>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 PostScript fonts have a fixed EM size of 1000 grid
|
||||
units but point coordinates can be expressed as floating values.</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>Note that glyphs can freely extend beyond the EM square if the font
|
||||
designer wants so. The EM is used as a convenience, and is a valuable
|
||||
convenience from traditional typography.</p>
|
||||
|
||||
<p>Grid units are very often called <em>font units</em> or <em>EM
|
||||
units</em>.</p>
|
||||
|
||||
<p><em>As said before, <tt>pixel_size</tt> computed in the above formula
|
||||
does not relate directly 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:</em>
|
||||
|
||||
<p><center>
|
||||
<img src="body_comparison.png"
|
||||
height=40 width=580
|
||||
alt="Comparison of font heights">
|
||||
</center></p>
|
||||
|
||||
<p>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.</p>
|
||||
<div class="colmask leftmenu">
|
||||
<div class="colright">
|
||||
<div class="col1wrap">
|
||||
<div class="col1">
|
||||
|
||||
|
||||
<a name="section-3">
|
||||
<h3>
|
||||
3. Hinting and Bitmap rendering
|
||||
</h3>
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<p>The outline as stored in a font file is called the "master" outline,
|
||||
as its points coordinates are expressed in font units. Before it can be
|
||||
converted into a bitmap, it must be scaled to a given size/resolution.
|
||||
This is done through a very simple transformation, but always creates
|
||||
undesirable artifacts, e.g. stems of different widths or heights in
|
||||
letters like "E" or "H".</p>
|
||||
<div id="glyph-outlines">
|
||||
<h2>II. Glyph Outlines</h2>
|
||||
|
||||
<p>As a consequence, proper glyph rendering needs the scaled points to
|
||||
be aligned along the target device pixel grid, through an operation
|
||||
called <em>grid-fitting</em> (often called <em>hinting</em>). 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" 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.</p>
|
||||
<p>This section describes the way scalable representations
|
||||
of glyph images, called outlines, are used by FreeType as
|
||||
well as client applications.</p>
|
||||
|
||||
<p>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:</p>
|
||||
<h3 id="section-1">1. Pixels, points and device
|
||||
resolutions</h3>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p><em>explicit grid-fitting</em></p>
|
||||
<p>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, be it a screen device
|
||||
or a printer, exhibits varying resolutions in both
|
||||
horizontal and vertical directions, and this must be taken
|
||||
care of when rendering text.</p>
|
||||
|
||||
<p>The TrueType format defines a stack-based virtual machine, for
|
||||
which programs can be written with the help of more than
|
||||
200 opcodes (most of these relating 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.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><em>implicit grid-fitting (also called hinting)</em></p>
|
||||
<p>It is thus common to define a device's characteristics
|
||||
through two numbers expressed in <em>dpi</em> (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.</p>
|
||||
|
||||
<p>The Type 1 format takes a much simpler approach: Each glyph
|
||||
is made of an outline as well as several pieces called
|
||||
<em>hints</em> 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.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><em>automatic grid-fitting</em></p>
|
||||
<p>As a consequence, the size of text is usually given in
|
||||
<em>points</em>, rather than device-specific pixels.
|
||||
Points are a <em>physical</em> 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.</p>
|
||||
|
||||
<p>Some formats simply include no control information with each
|
||||
glyph outline, apart 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.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>It is thus possible to compute the size of text in pixels
|
||||
from the size in points with the following formula:</p>
|
||||
|
||||
<p>The following table summarises the pros and cons of each scheme.</p>
|
||||
|
||||
<center>
|
||||
<table width="90%"
|
||||
bgcolor="#CCCCCC"
|
||||
cellpadding=5>
|
||||
<tr bgcolor="#999999">
|
||||
<td>
|
||||
<center>
|
||||
<b>grid-fitting scheme</b>
|
||||
<tt>pixel_size = point_size * resolution / 72</tt>
|
||||
</center>
|
||||
</td>
|
||||
<td>
|
||||
<center>
|
||||
<b>advantages</b>
|
||||
</center>
|
||||
</td>
|
||||
<td>
|
||||
<center>
|
||||
<b>disadvantages</b>
|
||||
</center>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td valign=top>
|
||||
<center>
|
||||
<b>explicit</b>
|
||||
</center>
|
||||
</td>
|
||||
<p>The resolution is expressed in <em>dpi</em>. Since
|
||||
horizontal and vertical resolutions may differ, a single
|
||||
point size usually defines a different text width and
|
||||
height in pixels.</p>
|
||||
|
||||
<td valign=top>
|
||||
<p><b>Quality.</b> Excellent results at small sizes are possible.
|
||||
This is very important for screen display.</p>
|
||||
<p><em>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 depend 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).</em></p>
|
||||
|
||||
<p><b>Consistency.</b> All renderers produce the same glyph
|
||||
bitmaps.</p>
|
||||
</td>
|
||||
|
||||
<td valign=top>
|
||||
<p><b>Speed.</b> Interpreting bytecode can be slow if the glyph
|
||||
programs are complex.</p>
|
||||
<h3 id="section-2">2. Vectorial representation</h3>
|
||||
|
||||
<p><b>Size.</b> Glyph programs can be long.</p>
|
||||
<p>The source format of outlines is a collection of closed paths called
|
||||
<em>contours</em>. Each contour delimits an outer or
|
||||
inner <em>region</em> of the glyph, and can be made of
|
||||
either <em>line segments</em> or <em>Bézier
|
||||
arcs</em>.</p>
|
||||
|
||||
<p><b>Technical difficulty.</b>
|
||||
It is extremely difficult to write good hinting
|
||||
programs. Very few tools available.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign=top>
|
||||
<center>
|
||||
<b>implicit</b>
|
||||
</center>
|
||||
</td>
|
||||
<p>The arcs are defined through <em>control points</em>, and
|
||||
can be either second-order (these are <em>conic</em>
|
||||
Béziers) or third-order (<em>cubic</em>
|
||||
Béziers) polynomials, depending on the font format.
|
||||
Note that conic Béziers are usually called
|
||||
<em>quadratic</em> Béziers in the literature.
|
||||
Hence, FreeType associates each point of the outline with
|
||||
flag to indicate its type (normal or control point). And
|
||||
scaling the points will scale the whole outline.</p>
|
||||
|
||||
<td valign=top>
|
||||
<p><b>Size.</b> Hints are usually much smaller than explicit glyph
|
||||
programs.</p>
|
||||
<p>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).</p>
|
||||
|
||||
<p><b>Speed.</b>
|
||||
Grid-fitting is usually a fast process.</p>
|
||||
</td>
|
||||
<p><em>The grid is always oriented like the traditional
|
||||
mathematical two-dimensional plane, i.e.,
|
||||
the <i>X</i> axis goes from the left to the right,
|
||||
and the <i>Y</i> axis from bottom to top.</em></p>
|
||||
|
||||
<p>In creating the glyph outlines, a type designer uses an
|
||||
imaginary square called the <em>EM square</em>.
|
||||
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:</p>
|
||||
|
||||
<td valign=top>
|
||||
<p><b>Quality.</b> Often questionable at small sizes. Better with
|
||||
anti-aliasing though.</p>
|
||||
<ul>
|
||||
<li>
|
||||
<p>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:</p>
|
||||
|
||||
<p><b>Inconsistency.</b> Results can vary between different
|
||||
renderers, or even distinct versions of the same engine.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<p align="center">
|
||||
<tt>pixel_size = point_size * resolution / 72</tt><br>
|
||||
<tt>pixel_coord = grid_coord * pixel_size / EM_size</tt>
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>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).</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<tr>
|
||||
<td valign=top>
|
||||
<center>
|
||||
<b>automatic</b>
|
||||
</center>
|
||||
</td>
|
||||
<p>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.</p>
|
||||
|
||||
<td valign=top>
|
||||
<p><b>Size.</b> No need for control information, resulting in
|
||||
smaller font files.</p>
|
||||
<p>Grid units are very often called <em>font units</em>
|
||||
or <em>EM units</em>.</p>
|
||||
|
||||
<p><b>Speed.</b> Depends on the grid-fitting algorithm. Usually
|
||||
faster than explicit grid-fitting.</p>
|
||||
</td>
|
||||
<p><em>As said before, <tt>pixel_size</tt> 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:</em></p>
|
||||
|
||||
<td valign=top>
|
||||
<p><b>Quality.</b> Often questionable at small sizes. Better with
|
||||
anti-aliasing though.</p>
|
||||
<p align="center">
|
||||
<img src="body_comparison.png"
|
||||
height="40"
|
||||
width="580"
|
||||
alt="Comparison of font heights">
|
||||
</p>
|
||||
|
||||
<p><b>Speed.</b> Depends on the grid-fitting algorithm.</p>
|
||||
<p>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.</p>
|
||||
|
||||
<p><b>Inconsistency.</b> Results can vary between different
|
||||
renderers, or even distinct versions of the same engine.</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</center>
|
||||
|
||||
<p><hr></p>
|
||||
<h3 id="section-3">3. Hinting and Bitmap rendering</h3>
|
||||
|
||||
<center>
|
||||
<table width="100%"
|
||||
border=0
|
||||
cellpadding=5>
|
||||
<tr bgcolor="#CCFFCC"
|
||||
valign=center>
|
||||
<td align=center
|
||||
width="30%">
|
||||
<a href="glyphs-1.html">Previous</a>
|
||||
</td>
|
||||
<td align=center
|
||||
width="30%">
|
||||
<a href="index.html">Contents</a>
|
||||
</td>
|
||||
<td align=center
|
||||
width="30%">
|
||||
<a href="glyphs-3.html">Next</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</center>
|
||||
<p>The outline as stored in a font file is called the
|
||||
‘master’ outline, as its points 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 always creates undesirable artifacts,
|
||||
in particular stems of different widths or heights in
|
||||
letters like ‘E’ or ‘H’.</p>
|
||||
|
||||
</td></tr>
|
||||
</table>
|
||||
</center>
|
||||
<p>As a consequence, proper glyph rendering needs the scaled
|
||||
points to be aligned along the target device pixel grid,
|
||||
through an operation called <em>grid-fitting</em> (often
|
||||
called <em>hinting</em>). 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’
|
||||
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.</p>
|
||||
|
||||
<p>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:</p>
|
||||
|
||||
<ul>
|
||||
<li class="emph">
|
||||
<p>explicit grid-fitting</p>
|
||||
|
||||
<p>The TrueType format defines a stack-based virtual
|
||||
machine, for which programs can be written with the
|
||||
help of more than 200 opcodes (most of them
|
||||
relating 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.</p>
|
||||
</li>
|
||||
<li class="emph">
|
||||
<p>implicit grid-fitting (also called hinting)</p>
|
||||
|
||||
<p>The Type 1 and CFF formats take a much simpler
|
||||
approach: Each glyph is made of an outline as well as
|
||||
several pieces called <em>hints</em> 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.</p>
|
||||
</li>
|
||||
<li class="emph">
|
||||
<p>automatic grid-fitting</p>
|
||||
|
||||
<p>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.</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>The following table summarizes the pros and cons of each
|
||||
scheme.</p>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th align="center">
|
||||
<b>grid-fitting scheme</b>
|
||||
</th>
|
||||
<th align="center">
|
||||
<b>advantages</b>
|
||||
</th>
|
||||
<th align="center">
|
||||
<b>disadvantages</b>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td valign="top" align="center">
|
||||
<p><b>explicit</b></p>
|
||||
</td>
|
||||
|
||||
<td valign="top">
|
||||
<p><b>Quality.</b> Excellent results at small sizes
|
||||
are possible. This is very important for screen
|
||||
display.</p>
|
||||
|
||||
<p><b>Consistency.</b> All renderers produce the
|
||||
same glyph bitmaps (at least in theory).</p>
|
||||
</td>
|
||||
|
||||
<td valign="top">
|
||||
<p><b>Speed.</b> Interpreting bytecode can be slow
|
||||
if the glyph programs are complex.</p>
|
||||
|
||||
<p><b>Size.</b> Glyph programs can be long.</p>
|
||||
|
||||
<p><b>Technical difficulty.</b> It is extremely
|
||||
difficult to write good hinting programs. Very
|
||||
few tools available.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top" align="center">
|
||||
<p><b>implicit</b></p>
|
||||
</td>
|
||||
|
||||
<td valign="top">
|
||||
<p><b>Size.</b> Hints are usually much smaller than
|
||||
explicit glyph programs.</p>
|
||||
|
||||
<p><b>Speed.</b> Grid-fitting is usually a fast
|
||||
process.</p>
|
||||
</td>
|
||||
|
||||
<td valign="top">
|
||||
<p><b>Quality.</b> Often questionable at small
|
||||
sizes. Better with anti-aliasing though.</p>
|
||||
|
||||
<p><b>Inconsistency.</b> Results can vary between
|
||||
different renderers, or even distinct versions of
|
||||
the same engine.</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td valign="top" align="center">
|
||||
<p><b>automatic</b></p>
|
||||
</td>
|
||||
|
||||
<td valign="top">
|
||||
<p><b>Size.</b> No need for control information,
|
||||
resulting in smaller font files.</p>
|
||||
|
||||
<p><b>Speed.</b> Depends on the grid-fitting
|
||||
algorithm. Usually faster than explicit
|
||||
grid-fitting.</p>
|
||||
</td>
|
||||
|
||||
<td valign="top">
|
||||
<p><b>Quality.</b> Often questionable at small
|
||||
sizes. Better with anti-aliasing though.</p>
|
||||
|
||||
<p><b>Speed.</b> Depends on the grid-fitting
|
||||
algorithm.</p>
|
||||
|
||||
<p><b>Inconsistency.</b> Results can vary between
|
||||
different renderers, or even distinct versions
|
||||
of the same engine.</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<div class="updated">
|
||||
<p>Last update: 07-Dec-2014</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<div class="col2">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<div id="TOC">
|
||||
<ul>
|
||||
<li class="funding">
|
||||
<p><a href="https://pledgie.com/campaigns/24434">
|
||||
<img alt="Click here to lend your support to the FreeType project and make a donation at pledgie.com!"
|
||||
src="https://pledgie.com/campaigns/24434.png?skin_name=chrome"
|
||||
border="0"
|
||||
align="middle">
|
||||
</a></p>
|
||||
|
||||
<p><a href="https://flattr.com/thing/421342/lemzwerg-on-Flattr"
|
||||
target="_blank">
|
||||
<img class="with-border"
|
||||
src="http://api.flattr.com/button/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>
|
||||
<!-- separate primary from secondary entries -->
|
||||
</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" class="current">Glyph Outlines</a>
|
||||
</li>
|
||||
<li class="tertiary">
|
||||
<a href="glyphs-3.html">Glyph Metrics</a>
|
||||
</li>
|
||||
<li class="tertiary">
|
||||
<a href="glyphs-4.html">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> <!-- id="wrapper" -->
|
||||
|
||||
<div id="TOC-bottom">
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,430 +1,519 @@
|
||||
<!doctype html public "-//w3c//dtd html 4.0 transitional//en"
|
||||
"http://www.w3.org/TR/REC-html40/loose.dtd">
|
||||
<html>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
||||
"http://www.w3.org/TR/html4/loose.dtd">
|
||||
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type"
|
||||
content="text/html; charset=iso-8859-1">
|
||||
content="text/html; charset=utf-8">
|
||||
<meta http-equiv="Content-Style-Type"
|
||||
content="text/css">
|
||||
<meta http-equiv="Content-Script-Type"
|
||||
content="text/javascript">
|
||||
<meta name="description"
|
||||
content="FreeType Documentation">
|
||||
<meta name="Author"
|
||||
content="David Turner">
|
||||
<title>FreeType Glyph Conventions</title>
|
||||
|
||||
<link rel="icon"
|
||||
href="../image/favicon_-90.ico">
|
||||
<link rel="shortcut icon"
|
||||
href="../image/favicon_-90.ico">
|
||||
<link rel="stylesheet"
|
||||
type="text/css"
|
||||
href="../css/freetype2_-90.css">
|
||||
|
||||
<script type="text/javascript"
|
||||
src="../javascript/jquery-1.11.0.min.js">
|
||||
</script>
|
||||
<script type="text/javascript"
|
||||
src="../javascript/jquery.ba-resize.min.js">
|
||||
</script>
|
||||
<script type="text/javascript"
|
||||
src="../javascript/freetype2.js">
|
||||
</script>
|
||||
|
||||
<title>FreeType Glyph Conventions / III</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 ones.</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 keep the 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_Outline_Translate()</tt> API should all be multiples
|
||||
of 64, as the point coordinates are in 26.6 fixed-point
|
||||
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>
|
||||
|
||||
<div id="top"
|
||||
class="bar">
|
||||
<h1><a href="http://freetype.org/index.html">FreeType</a> Glyph
|
||||
Conventions / III</h1>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="wrapper">
|
||||
|
||||
<div class="colmask leftmenu">
|
||||
<div class="colright">
|
||||
<div class="col1wrap">
|
||||
<div class="col1">
|
||||
|
||||
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<div id="glyph-metrics">
|
||||
<h2>III. Glyph Metrics</h2>
|
||||
|
||||
<h3 id="section-1">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. Latin, Cyrillic, Arabic, etc.) or
|
||||
vertical (e.g. Chinese, Japanese, Mongolian, 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 scripts 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 align="center">
|
||||
<img src="Image1.png"
|
||||
height="179"
|
||||
width="458"
|
||||
alt="horizontal layout">
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>With a vertical layout, glyphs are centered around
|
||||
the baseline:</p>
|
||||
|
||||
<p align="center">
|
||||
<img src="Image2.png"
|
||||
height="275"
|
||||
width="162"
|
||||
alt="vertical layout">
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h3 id="section-2">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 class="emph">
|
||||
<p>Ascent</p>
|
||||
|
||||
<p>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 <i>Y</i> axis upwards.</p>
|
||||
</li>
|
||||
<li class="emph">
|
||||
<p>Descent</p>
|
||||
|
||||
<p>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.</p>
|
||||
</li>
|
||||
<li class="emph">
|
||||
<p>Linegap</p>
|
||||
|
||||
<p>The distance that must be placed between two lines of
|
||||
text. The baseline-to-baseline distance should be
|
||||
computed as
|
||||
|
||||
<p align="center">
|
||||
<tt>linespace = ascent - descent + linegap</tt>
|
||||
</p>
|
||||
|
||||
<p>if you use the typographic values.</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>Other, simpler metrics are:</p>
|
||||
|
||||
<ul>
|
||||
<li class="emph">
|
||||
<p>Bounding box</p>
|
||||
|
||||
<p>This is an imaginary box that encloses all glyphs
|
||||
from the font, usually as tightly as possible. It is
|
||||
represented by four parameters,
|
||||
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 integer (or
|
||||
fractional) pixel units when measured on scaled
|
||||
outlines.</p>
|
||||
|
||||
<p>A common shorthand for the bounding box is
|
||||
‘bbox’.</p>
|
||||
</li>
|
||||
<li class="emph">
|
||||
<p>Internal leading</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>
|
||||
|
||||
<p align="center">
|
||||
<tt>internal leading = ascent - descent - EM_size</tt>
|
||||
</p>
|
||||
</li>
|
||||
<li class="emph">
|
||||
<p>External leading</p>
|
||||
|
||||
<p>This is another name for the line gap.</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h3 id="section-3">3. Bearings and Advances</h3>
|
||||
|
||||
<p>Each glyph has also distances called <em>bearings</em> and
|
||||
<em>advances</em>. The actual values depend on the
|
||||
layout, as the same glyph can be used to render text
|
||||
either horizontally or vertically:</p>
|
||||
|
||||
<ul>
|
||||
<li class="emph">
|
||||
<p>Left side bearing</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 ones.</p>
|
||||
|
||||
<p>In the FreeType API, this is also called
|
||||
<tt>bearingX</tt>. Another shorthand is
|
||||
‘lsb’.</p>
|
||||
</li>
|
||||
<li class="emph">
|
||||
<p>Top side bearing</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>
|
||||
|
||||
<p>In the FreeType API, this is also called
|
||||
<tt>bearingY</tt>.</p>
|
||||
</li>
|
||||
<li class="emph">
|
||||
<p>Advance width</p>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
<p>In the FreeType API, this is also called
|
||||
<tt>advanceX</tt>.</p>
|
||||
</li>
|
||||
<li class="emph">
|
||||
<p>Advance height</p>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
<p>In the FreeType API, this is also called
|
||||
<tt>advanceY</tt>.</p>
|
||||
</li>
|
||||
<li class="emph">
|
||||
<p>Glyph width</p>
|
||||
|
||||
<p>The glyph's horizontal extent. For unscaled font
|
||||
coordinates, it is</p>
|
||||
|
||||
<p align="center">
|
||||
<tt>glyph width = bbox.xMax - bbox.xMin</tt>
|
||||
</p>
|
||||
|
||||
<p>For scaled glyphs, its computation requests specific
|
||||
care, described in the grid-fitting chapter below.</p>
|
||||
</li>
|
||||
<li class="emph">
|
||||
<p>Glyph height</p>
|
||||
|
||||
<p>The glyph's vertical extent. For unscaled font
|
||||
coordinates, it is</p>
|
||||
|
||||
<p align="center">
|
||||
<tt>glyph height = bbox.yMax - bbox.yMin</tt>
|
||||
</p>
|
||||
|
||||
<p>For scaled glyphs, its computation requests specific
|
||||
care, described in the grid-fitting chapter below.</p>
|
||||
</li>
|
||||
<li class="emph">
|
||||
<p>Right side bearing</p>
|
||||
|
||||
<p>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:</p>
|
||||
|
||||
<p align="center">
|
||||
<tt>right side bearing = advance_width -
|
||||
left_side_bearing - (xMax-xMin)</tt>
|
||||
</p>
|
||||
|
||||
<p>A common shorthand for this value is
|
||||
‘rsb’.</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>Here is a picture giving all the details for horizontal metrics:
|
||||
|
||||
<p align="center">
|
||||
<img src="Image3.png"
|
||||
height="253"
|
||||
width="388"
|
||||
alt="horizontal glyph metrics">
|
||||
</p>
|
||||
|
||||
<p>And here is another one for the vertical metrics:</p>
|
||||
|
||||
<p align="center">
|
||||
<img src="Image4.png"
|
||||
height="278"
|
||||
width="294"
|
||||
alt="vertical glyph metrics">
|
||||
</p>
|
||||
|
||||
|
||||
<h3 id="section-4">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 horizontally in order
|
||||
to keep its three legs distinctly visible, resulting in a
|
||||
wider character bitmap.</p>
|
||||
|
||||
<p>The glyph metrics are also influenced by the grid-fitting
|
||||
process:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p>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.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>The image's bounding box is modified, thus modifying
|
||||
the bearings.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>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.</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>This has some implications:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p>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.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>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.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>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.</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>Performing 2D transformations on glyph outlines is very
|
||||
easy with FreeType. However, when using translation on
|
||||
hinted outlines, one should always take care
|
||||
of <b>exclusively using integer pixel distances</b> (which
|
||||
means that the parameters to the
|
||||
<tt>FT_Outline_Translate</tt> API function should all be
|
||||
multiples of 64, as the point coordinates are in
|
||||
26.6 fixed-point format). Otherwise, the translation
|
||||
will simply <em>ruin the hinter's work</em>, resulting in
|
||||
very low quality bitmaps!</p>
|
||||
|
||||
|
||||
<h3 id="section-5">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>
|
||||
|
||||
<p>The same conventions apply to strings of text. This
|
||||
means that:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p>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.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>The string's advance width isn't related to its
|
||||
bounding box dimensions. Especially if it contains
|
||||
beginning and terminal spaces or tabs.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>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.</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<div class="updated">
|
||||
<p>Last update: 07-Dec-2014</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<div class="col2">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<div id="TOC">
|
||||
<ul>
|
||||
<li class="funding">
|
||||
<p><a href="https://pledgie.com/campaigns/24434">
|
||||
<img alt="Click here to lend your support to the FreeType project and make a donation at pledgie.com!"
|
||||
src="https://pledgie.com/campaigns/24434.png?skin_name=chrome"
|
||||
border="0"
|
||||
align="middle">
|
||||
</a></p>
|
||||
|
||||
<p><a href="https://flattr.com/thing/421342/lemzwerg-on-Flattr"
|
||||
target="_blank">
|
||||
<img class="with-border"
|
||||
src="http://api.flattr.com/button/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>
|
||||
<!-- separate primary from secondary entries -->
|
||||
</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" class="current">Glyph Metrics</a>
|
||||
</li>
|
||||
<li class="tertiary">
|
||||
<a href="glyphs-4.html">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> <!-- id="wrapper" -->
|
||||
|
||||
<div id="TOC-bottom">
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,231 +1,284 @@
|
||||
<!doctype html public "-//w3c//dtd html 4.0 transitional//en"
|
||||
"http://www.w3.org/TR/REC-html40/loose.dtd">
|
||||
<html>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
||||
"http://www.w3.org/TR/html4/loose.dtd">
|
||||
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type"
|
||||
content="text/html; charset=iso-8859-1">
|
||||
content="text/html; charset=utf-8">
|
||||
<meta http-equiv="Content-Style-Type"
|
||||
content="text/css">
|
||||
<meta http-equiv="Content-Script-Type"
|
||||
content="text/javascript">
|
||||
<meta name="description"
|
||||
content="FreeType Documentation">
|
||||
<meta name="Author"
|
||||
content="David Turner">
|
||||
<title>FreeType Glyph Conventions</title>
|
||||
|
||||
<link rel="icon"
|
||||
href="../image/favicon_-90.ico">
|
||||
<link rel="shortcut icon"
|
||||
href="../image/favicon_-90.ico">
|
||||
<link rel="stylesheet"
|
||||
type="text/css"
|
||||
href="../css/freetype2_-90.css">
|
||||
|
||||
<script type="text/javascript"
|
||||
src="../javascript/jquery-1.11.0.min.js">
|
||||
</script>
|
||||
<script type="text/javascript"
|
||||
src="../javascript/jquery.ba-resize.min.js">
|
||||
</script>
|
||||
<script type="text/javascript"
|
||||
src="../javascript/freetype2.js">
|
||||
</script>
|
||||
|
||||
<title>FreeType Glyph Conventions / IV</title>
|
||||
</head>
|
||||
|
||||
<body text="#000000"
|
||||
bgcolor="#FFFFFF"
|
||||
link="#0000EF"
|
||||
vlink="#51188E"
|
||||
alink="#FF0000">
|
||||
|
||||
<h1 align=center>
|
||||
FreeType Glyph Conventions
|
||||
</h1>
|
||||
<body>
|
||||
|
||||
<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-5.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>
|
||||
<div id="top"
|
||||
class="bar">
|
||||
<h1><a href="http://freetype.org/index.html">FreeType</a> Glyph
|
||||
Conventions / IV</h1>
|
||||
</div>
|
||||
|
||||
|
||||
<a name="section-1">
|
||||
<h3>
|
||||
1. Kerning pairs
|
||||
</h3>
|
||||
<div id="wrapper">
|
||||
|
||||
<p>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".</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>
|
||||
<div class="colmask leftmenu">
|
||||
<div class="colright">
|
||||
<div class="col1wrap">
|
||||
<div class="col1">
|
||||
|
||||
|
||||
<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>
|
||||
<div id="kerning">
|
||||
<h2>IV. Kerning</h2>
|
||||
|
||||
<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>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>
|
||||
|
||||
|
||||
<p><hr></p>
|
||||
<h3 id="section-1">1. Kerning pairs</h3>
|
||||
|
||||
<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>
|
||||
<p>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’.</p>
|
||||
|
||||
</td></tr>
|
||||
</table>
|
||||
</center>
|
||||
<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>
|
||||
|
||||
<p align="center">
|
||||
<img src="bravo_unkerned.png"
|
||||
height="37"
|
||||
width="116"
|
||||
alt="the word 'bravo' unkerned">
|
||||
</p>
|
||||
|
||||
<p>Compare this to the same word, where the distance between
|
||||
these two letters has been slightly reduced:</p>
|
||||
|
||||
<p align="center">
|
||||
<img src="bravo_kerned.png"
|
||||
height="37"
|
||||
width="107"
|
||||
alt="the word 'bravo' with kerning">
|
||||
</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
|
||||
‘(A,V)’ isn't necessarily the space for
|
||||
pair ‘(V,A)’. 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> 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 ‘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 <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 in 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 ‘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>
|
||||
|
||||
<p align="center">
|
||||
<img src="twlewis1.png"
|
||||
height="38"
|
||||
width="314"
|
||||
alt="example for sliding dots">
|
||||
</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
|
||||
‘standard’ kerning adjustments, the previous
|
||||
sentence would become</p>
|
||||
|
||||
<p align="center">
|
||||
<img src="twlewis2.png"
|
||||
height="36"
|
||||
width="115"
|
||||
alt="example for too much kerning">
|
||||
</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
|
||||
‘GPOS’ 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: 07-Dec-2014</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<div class="col2">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<div id="TOC">
|
||||
<ul>
|
||||
<li class="funding">
|
||||
<p><a href="https://pledgie.com/campaigns/24434">
|
||||
<img alt="Click here to lend your support to the FreeType project and make a donation at pledgie.com!"
|
||||
src="https://pledgie.com/campaigns/24434.png?skin_name=chrome"
|
||||
border="0"
|
||||
align="middle">
|
||||
</a></p>
|
||||
|
||||
<p><a href="https://flattr.com/thing/421342/lemzwerg-on-Flattr"
|
||||
target="_blank">
|
||||
<img class="with-border"
|
||||
src="http://api.flattr.com/button/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>
|
||||
<!-- separate primary from secondary entries -->
|
||||
</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> <!-- id="wrapper" -->
|
||||
|
||||
<div id="TOC-bottom">
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,484 +1,464 @@
|
||||
<!doctype html public "-//w3c//dtd html 4.0 transitional//en"
|
||||
"http://www.w3.org/TR/REC-html40/loose.dtd">
|
||||
<html>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
||||
"http://www.w3.org/TR/html4/loose.dtd">
|
||||
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type"
|
||||
content="text/html; charset=iso-8859-1">
|
||||
content="text/html; charset=utf-8">
|
||||
<meta http-equiv="Content-Style-Type"
|
||||
content="text/css">
|
||||
<meta http-equiv="Content-Script-Type"
|
||||
content="text/javascript">
|
||||
<meta name="description"
|
||||
content="FreeType Documentation">
|
||||
<meta name="Author"
|
||||
content="David Turner">
|
||||
<title>FreeType Glyph Conventions</title>
|
||||
|
||||
<link rel="icon"
|
||||
href="../image/favicon_-90.ico">
|
||||
<link rel="shortcut icon"
|
||||
href="../image/favicon_-90.ico">
|
||||
<link rel="stylesheet"
|
||||
type="text/css"
|
||||
href="../css/freetype2_-90.css">
|
||||
|
||||
<script type="text/javascript"
|
||||
src="../javascript/jquery-1.11.0.min.js">
|
||||
</script>
|
||||
<script type="text/javascript"
|
||||
src="../javascript/jquery.ba-resize.min.js">
|
||||
</script>
|
||||
<script type="text/javascript"
|
||||
src="../javascript/freetype2.js">
|
||||
</script>
|
||||
|
||||
<title>FreeType Glyph Conventions / V</title>
|
||||
</head>
|
||||
|
||||
<body text="#000000"
|
||||
bgcolor="#FFFFFF"
|
||||
link="#0000EF"
|
||||
vlink="#51188E"
|
||||
alink="#FF0000">
|
||||
|
||||
<h1 align=center>
|
||||
FreeType Glyph Conventions
|
||||
</h1>
|
||||
<body>
|
||||
|
||||
<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-4.html">Previous</a>
|
||||
</td>
|
||||
<td align=center
|
||||
width="30%">
|
||||
<a href="index.html">Contents</a>
|
||||
</td>
|
||||
<td align=center
|
||||
width="30%">
|
||||
<a href="glyphs-6.html">Next</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</center>
|
||||
|
||||
<p><hr></p>
|
||||
|
||||
<table width="100%">
|
||||
<tr bgcolor="#CCCCFF"
|
||||
valign=center><td>
|
||||
<h2>
|
||||
V. Text processing
|
||||
</h2>
|
||||
</td></tr>
|
||||
</table>
|
||||
|
||||
<p>This section demonstrates how to use the concepts previously defined
|
||||
to render text, whatever the layout you use.</p>
|
||||
<div id="top"
|
||||
class="bar">
|
||||
<h1><a href="http://freetype.org/index.html">FreeType</a> Glyph
|
||||
Conventions / V</h1>
|
||||
</div>
|
||||
|
||||
|
||||
<a name="section-1">
|
||||
<h3>
|
||||
1. Writing simple text strings
|
||||
</h3>
|
||||
<div id="wrapper">
|
||||
|
||||
<p>In this first example, we will generate a simple string of Roman
|
||||
text, i.e. with a horizontal left-to-right layout. Using exclusively
|
||||
pixel metrics, the process looks like:
|
||||
|
||||
<tt>
|
||||
<ol>
|
||||
<li>
|
||||
Convert the character string into a series of glyph
|
||||
indices.
|
||||
</li>
|
||||
<li>
|
||||
Place the pen to the cursor position.
|
||||
</li>
|
||||
<li>
|
||||
Get or load the glyph image.
|
||||
</li>
|
||||
<li>
|
||||
Translate the glyph so that its 'origin' matches the pen position.
|
||||
</li>
|
||||
<li>
|
||||
Render the glyph to the target device.
|
||||
</li>
|
||||
<li>
|
||||
Increment the pen position by the glyph's advance width in pixels.
|
||||
</li>
|
||||
<li>
|
||||
Start over at step 3 for each of the remaining glyphs.
|
||||
</li>
|
||||
<li>
|
||||
When all glyphs are done, set the text cursor to the new pen
|
||||
position.
|
||||
</li>
|
||||
</ol>
|
||||
</tt>
|
||||
|
||||
<p>Note that kerning isn't part of this algorithm.</p>
|
||||
<div class="colmask leftmenu">
|
||||
<div class="colright">
|
||||
<div class="col1wrap">
|
||||
<div class="col1">
|
||||
|
||||
|
||||
<a name="section-2">
|
||||
<h3>
|
||||
2. Sub-pixel positioning
|
||||
</h3>
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<p>It is somewhat useful to use sub-pixel positioning when rendering
|
||||
text. This is crucial, for example, to provide semi-WYSIWYG text
|
||||
layouts. Text rendering is very similar to the algorithm described in
|
||||
subsection 1, with the following few differences:</p>
|
||||
<div id="text-processing">
|
||||
<h2>V. Text Processing</h2>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
The pen position is expressed in fractional pixels.
|
||||
</li>
|
||||
<li>
|
||||
Because translating a hinted outline by a non-integer distance will
|
||||
ruin its grid-fitting, the position of the glyph origin must be
|
||||
rounded before rendering the character image.
|
||||
</li>
|
||||
<li>
|
||||
The advance width is expressed in fractional pixels, and isn't
|
||||
necessarily an integer.
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<p>Here an improved version of the algorithm:</p>
|
||||
|
||||
<tt>
|
||||
<ol>
|
||||
<li>
|
||||
Convert the character string into a series of glyph
|
||||
indices.
|
||||
</li>
|
||||
<li>
|
||||
Place the pen to the cursor position. This can be a non-integer
|
||||
point.
|
||||
</li>
|
||||
<li>
|
||||
Get or load the glyph image.
|
||||
</li>
|
||||
<li>
|
||||
Translate the glyph so that its "origin" matches the rounded pen
|
||||
position.
|
||||
</li>
|
||||
<li>
|
||||
Render the glyph to the target device.
|
||||
</li>
|
||||
<li>
|
||||
Increment the pen position by the glyph's advance width in
|
||||
fractional pixels.
|
||||
</li>
|
||||
<li>
|
||||
Start over at step 3 for each of the remaining glyphs.
|
||||
</li>
|
||||
<li>
|
||||
When all glyphs are done, set the text cursor to the new pen
|
||||
position.
|
||||
</li>
|
||||
</ol>
|
||||
</tt>
|
||||
|
||||
<p>Note that with fractional pixel positioning, the space between two
|
||||
given letters isn't fixed, but determined by the accumulation of
|
||||
previous rounding errors in glyph positioning.</p>
|
||||
<p>This section demonstrate algorithms which use the
|
||||
concepts previously defined to render text, whatever
|
||||
layout you use. It assumes <em>simple</em> 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 <a href="http://www.pango.org/">Pango</a>
|
||||
anyway).</p>
|
||||
|
||||
|
||||
<a name="section-3">
|
||||
<h3>
|
||||
3. Simple kerning
|
||||
</h3>
|
||||
<h3 id="section-1">1. Writing simple text strings</h3>
|
||||
|
||||
<p>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:</p>
|
||||
<p>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:
|
||||
|
||||
<p>Algorithm 1 with kerning:</p>
|
||||
<ol class="algorithm">
|
||||
<li>
|
||||
Convert the character string into a series of glyph
|
||||
indices.
|
||||
</li>
|
||||
<li>
|
||||
Place the pen to the cursor position.
|
||||
</li>
|
||||
<li>
|
||||
Get or load the glyph image.
|
||||
</li>
|
||||
<li>
|
||||
Translate the glyph so that its ‘origin’
|
||||
matches the pen position.
|
||||
</li>
|
||||
<li>
|
||||
Render the glyph to the target device.
|
||||
</li>
|
||||
<li>
|
||||
Increment the pen position by the glyph's advance
|
||||
width (in pixels).
|
||||
</li>
|
||||
<li>
|
||||
Start over at step 3 for each of the remaining
|
||||
glyphs.
|
||||
</li>
|
||||
<li>
|
||||
When all glyphs are done, set the text cursor to the
|
||||
new pen position.
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<tt>
|
||||
<ol>
|
||||
<li>
|
||||
Convert the character string into a series of glyph
|
||||
indices.
|
||||
</li>
|
||||
<li>
|
||||
Place the pen to the cursor position.
|
||||
</li>
|
||||
<li>
|
||||
Get or load the glyph image.
|
||||
</li>
|
||||
<li>
|
||||
Add the rounded scaled kerning distance, if any, to the pen
|
||||
position.
|
||||
</li>
|
||||
<li>
|
||||
Translate the glyph so that its "origin" matches the pen position.
|
||||
</li>
|
||||
<li>
|
||||
Render the glyph to the target device.
|
||||
</li>
|
||||
<li>
|
||||
Increment the pen position by the glyph's advance width in pixels.
|
||||
</li>
|
||||
<li>
|
||||
Start over at step 3 for each of the remaining glyphs.
|
||||
</li>
|
||||
</ol>
|
||||
</tt>
|
||||
|
||||
<p>Algorithm 2 with kerning:</p>
|
||||
|
||||
<tt>
|
||||
<ol>
|
||||
<li>
|
||||
Convert the character string into a series of glyph
|
||||
indices.
|
||||
</li>
|
||||
<li>
|
||||
Place the pen to the cursor position.
|
||||
</li>
|
||||
<li>
|
||||
Get or load the glyph image.
|
||||
</li>
|
||||
<li>
|
||||
Add the scaled unrounded kerning distance, if any, to the pen
|
||||
position.
|
||||
</li>
|
||||
<li>
|
||||
Translate the glyph so that its "origin" matches the rounded pen
|
||||
position.
|
||||
</li>
|
||||
<li>
|
||||
Render the glyph to the target device.
|
||||
</li>
|
||||
<li>
|
||||
Increment the pen position by the glyph's advance width in
|
||||
fractional pixels.
|
||||
</li>
|
||||
<li>
|
||||
Start over at step 3 for each of the remaining glyphs.
|
||||
</li>
|
||||
</ol>
|
||||
</tt>
|
||||
|
||||
Of course, the algorithm described in section IV can also be
|
||||
applied to prevent the sliding dot problem if one wants to.
|
||||
<p>Note that kerning isn't part of this algorithm.</p>
|
||||
|
||||
|
||||
<a name="section-4">
|
||||
<h3>
|
||||
4. Right-to-left layout
|
||||
</h3>
|
||||
<h3 id="section-2">2. Pseudo-subpixel positioning</h3>
|
||||
|
||||
<p>The process of laying out Arabic or Hebrew text is extremely 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 Arabic glyphs).</p>
|
||||
<p>It is somewhat useful to use subpixel positioning when
|
||||
rendering text. This is crucial, for example, to provide
|
||||
semi-WYSIWYG text layouts. Text rendering is very similar
|
||||
to the algorithm described in subsection 1, with the
|
||||
following few differences:</p>
|
||||
|
||||
<p>Right-to-left algorithm 1:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<p>The pen position is expressed in fractional
|
||||
pixels.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Because translating a hinted outline by a non-integer
|
||||
distance will ruin its grid-fitting, the position of
|
||||
the glyph origin must be rounded before rendering the
|
||||
character image.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>The advance width is expressed in fractional pixels,
|
||||
and isn't necessarily an integer.</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<tt>
|
||||
<ol>
|
||||
<li>
|
||||
Convert the character string into a series of glyph
|
||||
indices.
|
||||
</li>
|
||||
<li>
|
||||
Place the pen to the cursor position.
|
||||
</li>
|
||||
<li>
|
||||
Get or load the glyph image.
|
||||
</li>
|
||||
<li>
|
||||
Decrement the pen position by the glyph's advance width in pixels.
|
||||
</li>
|
||||
<li>
|
||||
Translate the glyph so that its "origin" matches the pen position.
|
||||
</li>
|
||||
<li>
|
||||
Render the glyph to the target device.
|
||||
</li>
|
||||
<li>
|
||||
Start over at step 3 for each of the remaining glyphs.
|
||||
</li>
|
||||
</ol>
|
||||
</tt>
|
||||
<p>Here an improved version of the algorithm:</p>
|
||||
|
||||
<p>The changes to algorithm 2, as well as the inclusion of kerning
|
||||
are left as an exercise to the reader.</p>
|
||||
<ol class="algorithm">
|
||||
<li>
|
||||
Convert the character string into a series of glyph
|
||||
indices.
|
||||
</li>
|
||||
<li>
|
||||
Place the pen to the cursor position. This can be a
|
||||
non-integer point.
|
||||
</li>
|
||||
<li>
|
||||
Get or load the glyph image.
|
||||
</li>
|
||||
<li>
|
||||
Translate the glyph so that its ‘origin’
|
||||
matches the rounded pen position.
|
||||
</li>
|
||||
<li>
|
||||
Render the glyph to the target device.
|
||||
</li>
|
||||
<li>
|
||||
Increment the pen position by the glyph's advance width
|
||||
in fractional pixels.
|
||||
</li>
|
||||
<li>
|
||||
Start over at step 3 for each of the remaining
|
||||
glyphs.
|
||||
</li>
|
||||
<li>
|
||||
When all glyphs are done, set the text cursor to the new
|
||||
pen position.
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<p>Note that with fractional pixel positioning, the space
|
||||
between two given letters isn't fixed, but determined by
|
||||
the accumulation of previous rounding errors in glyph
|
||||
positioning. For auto-hinted glyphs, this problem can be
|
||||
alleviated by using the <tt>lsb_delta</tt>
|
||||
and <tt>rsb_delta</tt> values (see the documentation of
|
||||
the <a href="../reference/ft2-base_interface.html#FT_GlyphSlotRec">FT_GlyphSlotRec</a>
|
||||
structure for more details).</p>
|
||||
|
||||
<p>TODO: Real subpixel positioning with glyph shifting
|
||||
before hinting.</p>
|
||||
|
||||
|
||||
<a name="section-5">
|
||||
<h3>
|
||||
5. Vertical layouts
|
||||
</h3>
|
||||
<h3 id="section-3">3. Simple kerning</h3>
|
||||
|
||||
<p>Laying out vertical text uses exactly the same processes, with the
|
||||
following significant differences:</p>
|
||||
<p>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:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p>The baseline is vertical, and the vertical metrics must be used
|
||||
instead of the horizontal one.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>The left bearing is usually negative, but this doesn't change the
|
||||
fact that the glyph origin must be located on the baseline.</p>
|
||||
</li>
|
||||
<li>
|
||||
The advance height is always positive, so the pen position must be
|
||||
decremented if one wants to write top to bottom (assuming the
|
||||
<i>Y</i> axis is oriented upwards).
|
||||
</li>
|
||||
</ul>
|
||||
<p>Algorithm 1 with kerning:</p>
|
||||
|
||||
<p>Here the algorithm:</p>
|
||||
<ol class="algorithm">
|
||||
<li>
|
||||
Convert the character string into a series of glyph
|
||||
indices.
|
||||
</li>
|
||||
<li>
|
||||
Place the pen to the cursor position.
|
||||
</li>
|
||||
<li>
|
||||
Get or load the glyph image.
|
||||
</li>
|
||||
<li>
|
||||
Add the rounded scaled kerning distance, if any, to the
|
||||
pen position.
|
||||
</li>
|
||||
<li>
|
||||
Translate the glyph so that its ‘origin’
|
||||
matches the pen position.
|
||||
</li>
|
||||
<li>
|
||||
Render the glyph to the target device.
|
||||
</li>
|
||||
<li>
|
||||
Increment the pen position by the glyph's advance width
|
||||
in pixels.
|
||||
</li>
|
||||
<li>
|
||||
Start over at step 3 for each of the remaining
|
||||
glyphs.
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<tt>
|
||||
<ol>
|
||||
<li>
|
||||
Convert the character string into a series of glyph
|
||||
indices.
|
||||
</li>
|
||||
<li>
|
||||
Place the pen to the cursor position.
|
||||
</li>
|
||||
<li>
|
||||
Get or load the glyph image.
|
||||
</li>
|
||||
<li>
|
||||
Translate the glyph so that its "origin" matches the pen position.
|
||||
</li>
|
||||
<li>
|
||||
Render the glyph to the target device.
|
||||
</li>
|
||||
<li>
|
||||
Decrement the vertical pen position by the glyph's advance height
|
||||
in pixels.
|
||||
</li>
|
||||
<li>
|
||||
Start over at step 3 for each of the remaining glyphs.
|
||||
</li>
|
||||
<li>
|
||||
When all glyphs are done, set the text cursor to the new pen
|
||||
position.
|
||||
</li>
|
||||
</ol>
|
||||
</tt>
|
||||
<p>Algorithm 2 with kerning:</p>
|
||||
|
||||
<ol class="algorithm">
|
||||
<li>
|
||||
Convert the character string into a series of glyph
|
||||
indices.
|
||||
</li>
|
||||
<li>
|
||||
Place the pen to the cursor position.
|
||||
</li>
|
||||
<li>
|
||||
Get or load the glyph image.
|
||||
</li>
|
||||
<li>
|
||||
Add the scaled unrounded kerning distance, if any, to
|
||||
the pen position.
|
||||
</li>
|
||||
<li>
|
||||
Translate the glyph so that its ‘origin’
|
||||
matches the rounded pen position.
|
||||
</li>
|
||||
<li>
|
||||
Render the glyph to the target device.
|
||||
</li>
|
||||
<li>
|
||||
Increment the pen position by the glyph's advance
|
||||
width in fractional pixels.
|
||||
</li>
|
||||
<li>
|
||||
Start over at step 3 for each of the remaining
|
||||
glyphs.
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
|
||||
<a name="section-6">
|
||||
<h3>
|
||||
6. WYSIWYG text layouts
|
||||
</h3>
|
||||
<h3 id="section-4">4. Right-to-left layout</h3>
|
||||
|
||||
<p>As you probably know, the acronym WYSIWYG stands for "What You See Is
|
||||
What You Get". Basically, this means that the output of a document on
|
||||
the screen should match "perfectly" its printed version. A
|
||||
<em>true</em> WYSIWYG system requires two things:</p>
|
||||
<p>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).</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p><em>device-independent text layout</em></p>
|
||||
<p>Right-to-left algorithm 1:</p>
|
||||
|
||||
<p>This means that the document's formatting is the same on the
|
||||
screen than on any printed output, including line breaks,
|
||||
justification, ligatures, fonts, position of inline images, etc.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><em>matching display and print character sizes</em></p>
|
||||
<ol class="algorithm">
|
||||
<li>
|
||||
Convert the character string into a series of glyph
|
||||
indices.
|
||||
</li>
|
||||
<li>
|
||||
Place the pen to the cursor position.
|
||||
</li>
|
||||
<li>
|
||||
Get or load the glyph image.
|
||||
</li>
|
||||
<li>
|
||||
Decrement the pen position by the glyph's advance
|
||||
width in pixels.
|
||||
</li>
|
||||
<li>
|
||||
Translate the glyph so that its ‘origin’
|
||||
matches the pen position.
|
||||
</li>
|
||||
<li>
|
||||
Render the glyph to the target device.
|
||||
</li>
|
||||
<li>
|
||||
Start over at step 3 for each of the remaining
|
||||
glyphs.
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<p>The displayed size of a given character should match its
|
||||
dimensions when printed. For example, a text string which is
|
||||
exactly 1 inch tall when printed should also appear 1 inch
|
||||
tall on the screen (when using a scale of 100%).</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>It is clear that matching sizes cannot be possible if the computer
|
||||
has no knowledge of the physical resolutions of the display device(s) it
|
||||
is using. And of course, this is the most common case! That is not too
|
||||
unfortunate, however, because most users really don't care about this
|
||||
feature. Legibility is much more important.</p>
|
||||
|
||||
<p>When the Mac appeared, Apple decided to choose a resolution of
|
||||
72 dpi to describe the Macintosh screen to the font sub-system
|
||||
(whatever the monitor used). This choice was most probably driven by
|
||||
the fact that, at this resolution, 1 point equals exactly
|
||||
1 pixel. However, it neglected one crucial fact: As most users
|
||||
tend to choose a document character size between 10 and 14 points,
|
||||
the resultant displayed text was rather small and not too legible
|
||||
without scaling. Microsoft engineers took notice of this problem and
|
||||
chose a resolution of 96 dpi on Windows, which resulted in slightly
|
||||
larger, and more legible, displayed characters (for the same printed
|
||||
text size).</p>
|
||||
|
||||
<p>These distinct resolutions explain some differences when displaying
|
||||
text at the same character size on a Mac and a Windows machine.
|
||||
Moreover, it is not unusual to find some TrueType fonts with enhanced
|
||||
hinting (technical note: through delta-hinting) for the sizes of 10, 12,
|
||||
14 and 16 points at 96 dpi.</p>
|
||||
|
||||
<p>The term <em>device-independent text</em> is, unfortunately, often
|
||||
abused. For example, many word processors, including MS Word, do
|
||||
not really use device-independent glyph positioning algorithms when
|
||||
laying out text. Rather, they use the target printer's resolution to
|
||||
compute <em>hinted</em> glyph metrics for the layout. Though it
|
||||
guarantees that the printed version is always the "nicest" it can be,
|
||||
especially for very low resolution printers (like dot-matrix), it has a
|
||||
very sad effect: Changing the printer can have dramatic effects on the
|
||||
<em>whole</em> document layout, especially if it makes strong use of
|
||||
justification, uses few page breaks, etc.</p>
|
||||
|
||||
<p>Because glyph metrics vary slightly when the resolution changes (due
|
||||
to hinting), line breaks can change enormously, when these differences
|
||||
accumulate over long runs of text. Try for example printing a very long
|
||||
document (with no page breaks) on a 300 dpi ink-jet printer, then
|
||||
the same one on a 3000 dpi laser printer: You will be extremely
|
||||
lucky if your final page count didn't change between the prints! Of
|
||||
course, we can still call this WYSIWYG, as long as the printer
|
||||
resolution is fixed.</p>
|
||||
|
||||
<p>Some applications, like Adobe Acrobat, which targeted
|
||||
device-independent placement from the start, do not suffer from this
|
||||
problem. There are two ways to achieve this: either use the scaled and
|
||||
unhinted glyph metrics when laying out text both in the rendering and
|
||||
printing processes, or simply use whatever metrics you want and store
|
||||
them with the text in order to get sure they are printed the same on all
|
||||
devices (the latter being probably the best solution, as it also enables
|
||||
font substitution without breaking text layouts).</p>
|
||||
|
||||
<p>Just like matching sizes, device-independent placement isn't
|
||||
necessarily a feature that most users want. However, it is pretty clear
|
||||
that for any kind of professional document processing work, it
|
||||
<em>is</em> a requirement.</p>
|
||||
<p>The changes to algorithm 2, as well as the inclusion
|
||||
of kerning are left as an exercise to the reader.</p>
|
||||
|
||||
|
||||
<p><hr></p>
|
||||
<h3 id="section-5">5. Vertical layouts</h3>
|
||||
|
||||
<center>
|
||||
<table width="100%"
|
||||
border=0
|
||||
cellpadding=5>
|
||||
<tr bgcolor="#CCFFCC"
|
||||
valign=center>
|
||||
<td align=center
|
||||
width="30%">
|
||||
<a href="glyphs-4.html">Previous</a>
|
||||
</td>
|
||||
<td align=center
|
||||
width="30%">
|
||||
<a href="index.html">Contents</a>
|
||||
</td>
|
||||
<td align=center
|
||||
width="30%">
|
||||
<a href="glyphs-6.html">Next</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</center>
|
||||
<p>Laying out vertical text uses exactly the same processes,
|
||||
with the following significant differences:</p>
|
||||
|
||||
</td></tr>
|
||||
</table>
|
||||
</center>
|
||||
<ul>
|
||||
<li>
|
||||
<p>The baseline is vertical, and the vertical metrics
|
||||
must be used instead of the horizontal one.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>The left bearing is usually negative, but this
|
||||
doesn't change the fact that the glyph origin must be
|
||||
located on the baseline.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>The advance height is always positive, so the pen
|
||||
position must be decremented if one wants to write top
|
||||
to bottom (assuming the <i>Y</i> axis is oriented
|
||||
upwards).</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>Here the algorithm:</p>
|
||||
|
||||
<ol class="algorithm">
|
||||
<li>
|
||||
Convert the character string into a series of glyph
|
||||
indices.
|
||||
</li>
|
||||
<li>
|
||||
Place the pen to the cursor position.
|
||||
</li>
|
||||
<li>
|
||||
Get or load the glyph image.
|
||||
</li>
|
||||
<li>
|
||||
Translate the glyph so that its ‘origin’
|
||||
matches the pen position.
|
||||
</li>
|
||||
<li>
|
||||
Render the glyph to the target device.
|
||||
</li>
|
||||
<li>
|
||||
Decrement the vertical pen position by the glyph's
|
||||
advance height in pixels.
|
||||
</li>
|
||||
<li>
|
||||
Start over at step 3 for each of the remaining
|
||||
glyphs.
|
||||
</li>
|
||||
<li>
|
||||
When all glyphs are done, set the text cursor to the new
|
||||
pen position.
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<div class="updated">
|
||||
<p>Last update: 07-Dec-2014</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<div class="col2">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<div id="TOC">
|
||||
<ul>
|
||||
<li class="funding">
|
||||
<p><a href="https://pledgie.com/campaigns/24434">
|
||||
<img alt="Click here to lend your support to the FreeType project and make a donation at pledgie.com!"
|
||||
src="https://pledgie.com/campaigns/24434.png?skin_name=chrome"
|
||||
border="0"
|
||||
align="middle">
|
||||
</a></p>
|
||||
|
||||
<p><a href="https://flattr.com/thing/421342/lemzwerg-on-Flattr"
|
||||
target="_blank">
|
||||
<img class="with-border"
|
||||
src="http://api.flattr.com/button/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>
|
||||
<!-- separate primary from secondary entries -->
|
||||
</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">Kerning</a>
|
||||
</li>
|
||||
<li class="tertiary">
|
||||
<a href="glyphs-5.html" class="current">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> <!-- id="wrapper" -->
|
||||
|
||||
<div id="TOC-bottom">
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,452 +1,537 @@
|
||||
<!doctype html public "-//w3c//dtd html 4.0 transitional//en"
|
||||
"http://www.w3.org/TR/REC-html40/loose.dtd">
|
||||
<html>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
||||
"http://www.w3.org/TR/html4/loose.dtd">
|
||||
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type"
|
||||
content="text/html; charset=iso-8859-1">
|
||||
content="text/html; charset=utf-8">
|
||||
<meta http-equiv="Content-Style-Type"
|
||||
content="text/css">
|
||||
<meta http-equiv="Content-Script-Type"
|
||||
content="text/javascript">
|
||||
<meta name="description"
|
||||
content="FreeType Documentation">
|
||||
<meta name="Author"
|
||||
content="David Turner">
|
||||
<title>FreeType Glyph Conventions</title>
|
||||
|
||||
<link rel="icon"
|
||||
href="../image/favicon_-90.ico">
|
||||
<link rel="shortcut icon"
|
||||
href="../image/favicon_-90.ico">
|
||||
<link rel="stylesheet"
|
||||
type="text/css"
|
||||
href="../css/freetype2_-90.css">
|
||||
|
||||
<script type="text/javascript"
|
||||
src="../javascript/jquery-1.11.0.min.js">
|
||||
</script>
|
||||
<script type="text/javascript"
|
||||
src="../javascript/jquery.ba-resize.min.js">
|
||||
</script>
|
||||
<script type="text/javascript"
|
||||
src="../javascript/freetype2.js">
|
||||
</script>
|
||||
|
||||
<title>FreeType Glyph Conventions / VI</title>
|
||||
</head>
|
||||
|
||||
<body text="#000000"
|
||||
bgcolor="#FFFFFF"
|
||||
link="#0000EF"
|
||||
vlink="#51188E"
|
||||
alink="#FF0000">
|
||||
|
||||
<h1 align=center>
|
||||
FreeType Glyph Conventions
|
||||
</h1>
|
||||
<body>
|
||||
|
||||
<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, 2006, 2011 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-5.html">Previous</a>
|
||||
</td>
|
||||
<td align=center
|
||||
width="30%">
|
||||
<a href="index.html">Contents</a>
|
||||
</td>
|
||||
<td align=center
|
||||
width="30%">
|
||||
<a href="glyphs-7.html">Next</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</center>
|
||||
|
||||
<p><hr></p>
|
||||
|
||||
<table width="100%">
|
||||
<tr bgcolor="#CCCCFF"
|
||||
valign=center><td>
|
||||
<h2>
|
||||
VI. FreeType outlines
|
||||
</h2>
|
||||
</td></tr>
|
||||
</table>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
<a name="section-1">
|
||||
<h3>
|
||||
1. FreeType outline description and structure
|
||||
</h3>
|
||||
|
||||
<h4>
|
||||
a. Outline curve decomposition
|
||||
</h4>
|
||||
|
||||
<p>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
|
||||
Type 1 format.</p>
|
||||
|
||||
<p>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 used to describe a line segment or an arc. The tags can
|
||||
take the following values:</p>
|
||||
|
||||
<center>
|
||||
<table cellspacing=5
|
||||
cellpadding=5
|
||||
width="80%">
|
||||
<tr VALIGN=TOP>
|
||||
<td valign=top>
|
||||
<tt>FT_CURVE_TAG_ON</tt>
|
||||
</td>
|
||||
<td valign=top>
|
||||
<p>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.</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td valign=top>
|
||||
<tt>FT_CURVE_TAG_CONIC</tt>
|
||||
</td>
|
||||
<td valign=top>
|
||||
<p>Used for an "off" point used to control a conic Bézier
|
||||
arc.</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td valign=top>
|
||||
<tt>FT_CURVE_TAG_CUBIC</tt>
|
||||
</td>
|
||||
<td valign=top>
|
||||
<p>Used for an "off" point used to control a cubic Bézier
|
||||
arc.</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</center>
|
||||
|
||||
<p>Use the <tt>FT_CURVE_TAG(tag)</tt> macro to filter out other,
|
||||
internally used flags.
|
||||
|
||||
<p>The following rules are applied to decompose the contour's points
|
||||
into segments and arcs:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
Two successive "on" points indicate a line segment joining them.
|
||||
</li>
|
||||
<li>
|
||||
One conic "off" point amidst 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.
|
||||
</li>
|
||||
<li>
|
||||
Two successive cubic "off" points amidst 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).
|
||||
</li>
|
||||
<li>
|
||||
Two successive conic "off" points forces the rasterizer to create
|
||||
(during the scan-line conversion process exclusively) a virtual
|
||||
"on" point amidst them, 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.
|
||||
</li>
|
||||
<li>
|
||||
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.
|
||||
</li>
|
||||
<li>
|
||||
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.
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>Note that it is possible to mix conic and cubic arcs in a single
|
||||
contour, even though no current font driver produces such
|
||||
outlines.</p>
|
||||
|
||||
<center>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="points_segment.png"
|
||||
height=166 width=221
|
||||
alt="segment example">
|
||||
</td>
|
||||
<td>
|
||||
<img src="points_conic.png"
|
||||
height=183 width=236
|
||||
alt="conic arc example">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="points_cubic.png"
|
||||
height=162 width=214
|
||||
alt="cubic arc example">
|
||||
</td>
|
||||
<td>
|
||||
<img src="points_conic2.png"
|
||||
height=204 width=225
|
||||
alt="cubic arc with virtual 'on' point">
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</center>
|
||||
<div id="top"
|
||||
class="bar">
|
||||
<h1><a href="http://freetype.org/index.html">FreeType</a> Glyph
|
||||
Conventions / VI</h1>
|
||||
</div>
|
||||
|
||||
|
||||
<h4>
|
||||
b. Outline descriptor
|
||||
</h4>
|
||||
<div id="wrapper">
|
||||
|
||||
<p>A FreeType outline is described through a simple structure:</p>
|
||||
|
||||
<center>
|
||||
<table cellspacing=3
|
||||
cellpadding=3>
|
||||
<caption>
|
||||
<b><tt>FT_Outline</tt></b>
|
||||
</caption>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<tt>n_points</tt>
|
||||
</td>
|
||||
<td>
|
||||
the number of points in the outline
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<tt>n_contours</tt>
|
||||
</td>
|
||||
<td>
|
||||
the number of contours in the outline
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<tt>points</tt>
|
||||
</td>
|
||||
<td>
|
||||
array of point coordinates
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<tt>contours</tt>
|
||||
</td>
|
||||
<td>
|
||||
array of contour end indices
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<tt>tags</tt>
|
||||
</td>
|
||||
<td>
|
||||
array of point flags
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</center>
|
||||
|
||||
<p>Here, <tt>points</tt> is a pointer to an array of
|
||||
<tt>FT_Vector</tt> 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 <em>26.6 fixed-point format</em>.</p>
|
||||
|
||||
<p><tt>contours</tt> is an array of point indices used to delimit
|
||||
contours in the outline. For example, the first contour always starts
|
||||
at point 0, and ends at point <tt>contours[0]</tt>. The second
|
||||
contour starts at point <tt>contours[0]+1</tt> and ends at
|
||||
<tt>contours[1]</tt>, etc. To traverse these points in a callback
|
||||
based manner, use <tt>FT_Outline_Decompose()</tt>.</p>
|
||||
|
||||
<p>Note that each contour is closed, and that <tt>n_points</tt> should
|
||||
be equal to <tt>contours[n_contours-1]+1</tt> for a valid outline.</p>
|
||||
|
||||
<p>Finally, <tt>tags</tt> is an array of bytes, used to store each
|
||||
outline point's tag.</p>
|
||||
<div class="colmask leftmenu">
|
||||
<div class="colright">
|
||||
<div class="col1wrap">
|
||||
<div class="col1">
|
||||
|
||||
|
||||
<a name="section-2">
|
||||
<h3>
|
||||
2. Bounding and control box computations
|
||||
</h3>
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<p>A <em>bounding box</em> (also called <em>bbox</em>) 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.</p>
|
||||
<div id="freetype-outlines">
|
||||
<h2>VI. FreeType outlines</h2>
|
||||
|
||||
<p>This situation happens when 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 it makes hinting much
|
||||
easier.</p>
|
||||
<p>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.</p>
|
||||
|
||||
<p>We thus define the <em>control box</em> (also called <em>cbox</em>)
|
||||
as the smallest possible rectangle that encloses all points of a given
|
||||
outline (including its "off" points). Clearly, it always includes the
|
||||
bbox, and equates it in most cases.</p>
|
||||
<h3 id="section-1">1. FreeType outline description and
|
||||
structure</h3>
|
||||
|
||||
<p>Unlike the bbox, the cbox is much faster to compute.</p>
|
||||
<h4>a. Outline curve decomposition</h4>
|
||||
|
||||
<center>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="bbox1.png"
|
||||
height=264 width=228
|
||||
alt="a glyph with different bbox and cbox">
|
||||
</td>
|
||||
<td>
|
||||
<img src="bbox2.png"
|
||||
height=229 width=217
|
||||
alt="a glyph with identical bbox and cbox">
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</center>
|
||||
<p>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 and Type formats.</p>
|
||||
|
||||
<p>Control and bounding boxes can be computed automatically through the
|
||||
functions <tt>FT_Outline_Get_CBox()</tt> and
|
||||
<tt>FT_Outline_Get_BBox()</tt>. The former function is always very
|
||||
fast, while the latter <em>may</em> 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.
|
||||
<p>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:</p>
|
||||
|
||||
<p>Note also that even though most glyph outlines have equal cbox and
|
||||
bbox to ease hinting, this is not necessary the case anymore when a
|
||||
transformation like rotation is applied to them.</p>
|
||||
<table>
|
||||
<tr>
|
||||
<td valign="top">
|
||||
<p><tt>FT_CURVE_TAG_ON</tt></p>
|
||||
</td>
|
||||
<td valign="top">
|
||||
<p>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.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top">
|
||||
<p><tt>FT_CURVE_TAG_CONIC</tt></p>
|
||||
</td>
|
||||
<td valign="top">
|
||||
<p>Used for an ‘off’ point used to control
|
||||
a conic Bézier arc.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top">
|
||||
<p><tt>FT_CURVE_TAG_CUBIC</tt></p>
|
||||
</td>
|
||||
<td valign="top">
|
||||
<p>Used for an ‘off’ point used to control
|
||||
a cubic Bézier arc.</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p>Use the <tt>FT_CURVE_TAG(tag)</tt> macro to filter out
|
||||
other, internally used flags.
|
||||
|
||||
<p>The following rules are applied to decompose the
|
||||
contour's points into segments and arcs:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p>Two successive ‘on’ points indicate a
|
||||
line segment joining them.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>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.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>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).</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>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.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>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.
|
||||
</li>
|
||||
<li>
|
||||
<p>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.
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="points_segment.png"
|
||||
height="166"
|
||||
width="221"
|
||||
alt="segment example">
|
||||
</td>
|
||||
<td>
|
||||
<img src="points_conic.png"
|
||||
height="183"
|
||||
width="236"
|
||||
alt="conic arc example">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="points_cubic.png"
|
||||
height="162"
|
||||
width="214"
|
||||
alt="cubic arc example">
|
||||
</td>
|
||||
<td>
|
||||
<img src="points_conic2.png"
|
||||
height="204"
|
||||
width="225"
|
||||
alt="cubic arc with virtual 'on' point">
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<a name="section-3">
|
||||
<h3>
|
||||
3. Coordinates, scaling and grid-fitting
|
||||
</h3>
|
||||
<h4>b. The <tt>FT_Outline</tt> descriptor</h4>
|
||||
|
||||
<p>A FreeType outline is described through a simple
|
||||
structure
|
||||
called <a href="../reference/ft2-outline_processing.html#FT_Outline"><tt>FT_Outline</tt></a>.
|
||||
Right now, the following fields are of interest:</p>
|
||||
|
||||
<p>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 (x:64,y:-192).</p>
|
||||
<table>
|
||||
<caption>
|
||||
<b><tt>FT_Outline</tt></b>
|
||||
</caption>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<tt>n_points</tt>
|
||||
</td>
|
||||
<td>
|
||||
the number of points in the outline
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<tt>n_contours</tt>
|
||||
</td>
|
||||
<td>
|
||||
the number of contours in the outline
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<tt>points</tt>
|
||||
</td>
|
||||
<td>
|
||||
array of point coordinates
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<tt>contours</tt>
|
||||
</td>
|
||||
<td>
|
||||
array of contour end indices
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<tt>tags</tt>
|
||||
</td>
|
||||
<td>
|
||||
array of point flags
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p>Here, <tt>points</tt> is a pointer to an array of
|
||||
<a href="../reference/ft2-basic_types.html#FT_Vector"><tt>FT_Vector</tt></a>
|
||||
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 <em>26.6 fixed-point
|
||||
format</em>.</p>
|
||||
|
||||
<p>After a master glyph outline is scaled from the EM grid 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.</p>
|
||||
<p><tt>contours</tt> 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 <tt>contours[0]</tt>. The second contour starts at
|
||||
point <tt>contours[0]+1</tt> and ends at
|
||||
<tt>contours[1]</tt>, etc. To traverse these points in a
|
||||
callback based manner,
|
||||
use <a href="../reference/ft2-outline_processing.html#FT_Outline_Decompose"><tt>FT_Outline_Decompose</tt></a>.</p>
|
||||
|
||||
<p>The following operations can be used to round vectorial distances in
|
||||
the 26.6 format to the grid:</p>
|
||||
<p>Note that each contour is closed, and that value
|
||||
of <tt>n_points</tt> should be equal
|
||||
to <tt>contours[n_contours-1]+1</tt> for a valid
|
||||
outline.</p>
|
||||
|
||||
<pre>
|
||||
round( x ) == ( x + 32 ) & -64
|
||||
floor( x ) == x & -64
|
||||
ceiling( x ) == ( x + 63 ) & -64</pre>
|
||||
|
||||
<p>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:</p>
|
||||
|
||||
<p>The scan-line converter draws all the pixels whose <em>centers</em>
|
||||
fall inside the glyph shape. It can also detect <em>drop-outs</em>,
|
||||
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.</p>
|
||||
|
||||
<p>This leads to the following computations:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p>compute the bbox</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>grid-fit the bounding box with the following:</p>
|
||||
|
||||
<pre>
|
||||
xmin = floor( bbox.xMin )
|
||||
xmax = ceiling( bbox.xMax )
|
||||
ymin = floor( bbox.yMin )
|
||||
ymax = ceiling( bbox.yMax )</pre>
|
||||
</li>
|
||||
<li>
|
||||
return pixel dimensions, i.e.
|
||||
|
||||
<pre>
|
||||
width = (xmax - xmin)/64</pre>
|
||||
|
||||
and
|
||||
|
||||
<pre>
|
||||
height = (ymax - ymin)/64</pre>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>By grid-fitting the bounding box, it is guaranteed that all the pixel
|
||||
centers that are to be drawn, <em>including those coming from drop-out
|
||||
control</em>, will be <em>within</em> the adjusted box. Then the box's
|
||||
dimensions in pixels can be computed.</p>
|
||||
|
||||
<p>Note also that, when translating a grid-fitted outline, one should
|
||||
<em>always use integer distances</em> 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 <em>very low
|
||||
quality </em>bitmaps and pixmaps.</p>
|
||||
<p>Finally, <tt>tags</tt> is an array of bytes, used to
|
||||
store each outline point's tag.</p>
|
||||
|
||||
|
||||
<p><hr></p>
|
||||
<h3 id="section-2">2. Bounding and control box
|
||||
computations</h3>
|
||||
|
||||
<center>
|
||||
<table width="100%"
|
||||
border=0
|
||||
cellpadding=5>
|
||||
<tr bgcolor="#CCFFCC"
|
||||
valign=center>
|
||||
<td align=center
|
||||
width="30%">
|
||||
<a href="glyphs-5.html">Previous</a>
|
||||
</td>
|
||||
<td align=center
|
||||
width="30%">
|
||||
<a href="index.html">Contents</a>
|
||||
</td>
|
||||
<td align=center
|
||||
width="30%">
|
||||
<a href="glyphs-7.html">Next</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</center>
|
||||
<p>As described earlier, a <em>bounding box</em> (also
|
||||
called <em>bbox</em>) 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.</p>
|
||||
|
||||
</td></tr>
|
||||
</table>
|
||||
</center>
|
||||
<p>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), as it makes hinting much
|
||||
easier.</p>
|
||||
|
||||
<font size=-1>Last update: 06-Mar-2011</font>
|
||||
<p>We thus define the <em>control box</em> (also
|
||||
called <em>cbox</em>) 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.</p>
|
||||
|
||||
<p>Unlike the bbox, the cbox is much faster to compute.</p>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="bbox1.png"
|
||||
height="264"
|
||||
width="228"
|
||||
alt="a glyph with different bbox and cbox">
|
||||
</td>
|
||||
<td>
|
||||
<img src="bbox2.png"
|
||||
height="229"
|
||||
width="217"
|
||||
alt="a glyph with identical bbox and cbox">
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p>Control and bounding boxes can be computed automatically
|
||||
using the
|
||||
functions <a href="../reference/ft2-outline_processing.html#FT_Outline_Get_CBox"><tt>FT_Outline_Get_CBox</tt></a>
|
||||
and
|
||||
<a href="../reference/ft2-outline_processing.html#FT_Outline_Get_BBox"><tt>FT_Outline_Get_BBox</tt></a>.
|
||||
The former function is always very fast, while the
|
||||
latter <em>may</em> 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.
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
|
||||
<h3 id="section-3">3. Coordinates, scaling and
|
||||
grid-fitting</h3>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
<p>The following operations can be used to round vectorial
|
||||
distances in the 26.6 format to the grid:</p>
|
||||
|
||||
<pre>
|
||||
round( x ) == ( x + 32 ) & -64
|
||||
floor( x ) == x & -64
|
||||
ceiling( x ) == ( x + 63 ) & -64</pre>
|
||||
|
||||
<p>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:</p>
|
||||
|
||||
<p>The scan-line converter draws all the pixels
|
||||
whose <em>centers</em> fall inside the glyph shape. In
|
||||
B/W rendering mode, it can also detect <em>drop-outs</em>,
|
||||
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.</p>
|
||||
|
||||
<p>This leads to the following computations:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p>compute the bbox</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>grid-fit the bounding box with the following:</p>
|
||||
|
||||
<pre>
|
||||
xmin = floor( bbox.xMin )
|
||||
xmax = ceiling( bbox.xMax )
|
||||
ymin = floor( bbox.yMin )
|
||||
ymax = ceiling( bbox.yMax )</pre>
|
||||
</li>
|
||||
<li>
|
||||
<p>return pixel dimensions, i.e.</p>
|
||||
|
||||
<pre>
|
||||
width = (xmax - xmin)/64</pre>
|
||||
|
||||
<p>and</p>
|
||||
|
||||
<pre>
|
||||
height = (ymax - ymin)/64</pre>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>By grid-fitting the bounding box, it is guaranteed that
|
||||
all the pixel centers that are to be drawn, <em>including
|
||||
those coming from drop-out control</em>, will
|
||||
be <em>within</em> the adjusted box. Then the box's
|
||||
dimensions in pixels can be computed.</p>
|
||||
|
||||
<p>Note also that, when translating a grid-fitted outline, one should
|
||||
<em>always use integer distances</em> 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 <em>very low quality</em> bitmaps and
|
||||
pixmaps.</p>
|
||||
</div>
|
||||
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<div class="updated">
|
||||
<p>Last update: 07-Dec-2014</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<div class="col2">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<div id="TOC">
|
||||
<ul>
|
||||
<li class="funding">
|
||||
<p><a href="https://pledgie.com/campaigns/24434">
|
||||
<img alt="Click here to lend your support to the FreeType project and make a donation at pledgie.com!"
|
||||
src="https://pledgie.com/campaigns/24434.png?skin_name=chrome"
|
||||
border="0"
|
||||
align="middle">
|
||||
</a></p>
|
||||
|
||||
<p><a href="https://flattr.com/thing/421342/lemzwerg-on-Flattr"
|
||||
target="_blank">
|
||||
<img class="with-border"
|
||||
src="http://api.flattr.com/button/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>
|
||||
<!-- separate primary from secondary entries -->
|
||||
</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">Kerning</a>
|
||||
</li>
|
||||
<li class="tertiary">
|
||||
<a href="glyphs-5.html">Text Processing</a>
|
||||
</li>
|
||||
<li class="tertiary">
|
||||
<a href="glyphs-6.html" class="current">FreeType Outlines</a>
|
||||
</li>
|
||||
<li class="tertiary">
|
||||
<a href="glyphs-7.html">FreeType Bitmaps</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div> <!-- id="wrapper" -->
|
||||
|
||||
<div id="TOC-bottom">
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,356 +1,427 @@
|
||||
<!doctype html public "-//w3c//dtd html 4.0 transitional//en"
|
||||
"http://www.w3.org/TR/REC-html40/loose.dtd">
|
||||
<html>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
||||
"http://www.w3.org/TR/html4/loose.dtd">
|
||||
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type"
|
||||
content="text/html; charset=iso-8859-1">
|
||||
content="text/html; charset=utf-8">
|
||||
<meta http-equiv="Content-Style-Type"
|
||||
content="text/css">
|
||||
<meta http-equiv="Content-Script-Type"
|
||||
content="text/javascript">
|
||||
<meta name="description"
|
||||
content="FreeType Documentation">
|
||||
<meta name="Author"
|
||||
content="David Turner">
|
||||
<title>FreeType Glyph Conventions</title>
|
||||
|
||||
<link rel="icon"
|
||||
href="../image/favicon_-90.ico">
|
||||
<link rel="shortcut icon"
|
||||
href="../image/favicon_-90.ico">
|
||||
<link rel="stylesheet"
|
||||
type="text/css"
|
||||
href="../css/freetype2_-90.css">
|
||||
|
||||
<script type="text/javascript"
|
||||
src="../javascript/jquery-1.11.0.min.js">
|
||||
</script>
|
||||
<script type="text/javascript"
|
||||
src="../javascript/jquery.ba-resize.min.js">
|
||||
</script>
|
||||
<script type="text/javascript"
|
||||
src="../javascript/freetype2.js">
|
||||
</script>
|
||||
|
||||
<title>FreeType Glyph Conventions / VII</title>
|
||||
</head>
|
||||
|
||||
<body text="#000000"
|
||||
bgcolor="#FFFFFF"
|
||||
link="#0000EF"
|
||||
vlink="#51188E"
|
||||
alink="#FF0000">
|
||||
|
||||
<h1 align=center>
|
||||
FreeType Glyph Conventions
|
||||
</h1>
|
||||
<body>
|
||||
|
||||
<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-6.html">Previous</a>
|
||||
</td>
|
||||
<td align=center
|
||||
width="30%">
|
||||
<a href="index.html">Contents</a>
|
||||
</td>
|
||||
<td align=center
|
||||
width="30%">
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</center>
|
||||
|
||||
<p><hr></p>
|
||||
|
||||
<table width="100%">
|
||||
<tr bgcolor="#CCCCFF"
|
||||
valign=center><td>
|
||||
<h2>
|
||||
VII. FreeType bitmaps
|
||||
</h2>
|
||||
</td></tr>
|
||||
</table>
|
||||
|
||||
<p>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 relationships between vectorial and pixel coordinates is
|
||||
explained.</p>
|
||||
<div id="top"
|
||||
class="bar">
|
||||
<h1><a href="http://freetype.org/index.html">FreeType</a> Glyph
|
||||
Conventions / VII</h1>
|
||||
</div>
|
||||
|
||||
|
||||
<a name="section-1">
|
||||
<h3>
|
||||
1. Vectorial versus pixel coordinates
|
||||
</h3>
|
||||
<div id="wrapper">
|
||||
|
||||
<p>This sub-section explains the differences 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).</p>
|
||||
|
||||
<p>In the pixel case, as we use the <em>Y upwards</em> convention;
|
||||
the coordinate [0,0] always refers to the <em>lower left pixel</em> of a
|
||||
bitmap, while coordinate [width-1, rows-1] to its <em>upper right
|
||||
pixel</em>.</p>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
<p>The pixels themselves are indeed <em>square boxes</em> 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).</p>
|
||||
|
||||
<p>This introduces some differences when computing distances. For
|
||||
example, the <em>length</em> 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.</p>
|
||||
|
||||
<center>
|
||||
<img src="grid_1.png"
|
||||
height=390 width=402
|
||||
alt="bitmap and vector grid">
|
||||
</center>
|
||||
<div class="colmask leftmenu">
|
||||
<div class="colright">
|
||||
<div class="col1wrap">
|
||||
<div class="col1">
|
||||
|
||||
|
||||
<a name="section-2">
|
||||
<h3>
|
||||
2. FreeType bitmap and pixmap descriptor
|
||||
</h3>
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<p>A bitmap or pixmap is described through a single structure, called
|
||||
<tt>FT_Bitmap</tt>, defined in the file
|
||||
<tt><freetype/ftimage.h></tt>. It is a simple descriptor whose
|
||||
fields are:</p>
|
||||
<div id="freetype-bitmaps">
|
||||
<h2>VII. FreeType Bitmaps</h2>
|
||||
|
||||
<center>
|
||||
<table cellspacing=3
|
||||
cellpadding=5
|
||||
width="80%">
|
||||
<caption>
|
||||
<b><tt>FT_Bitmap</tt></b>
|
||||
</caption>
|
||||
|
||||
<tr>
|
||||
<td valign=top>
|
||||
<tt>rows</tt>
|
||||
</td>
|
||||
<td valign=top>
|
||||
the number of rows, i.e. lines, in the bitmap
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td valign=top>
|
||||
<tt>width</tt>
|
||||
</td>
|
||||
<td valign=top>
|
||||
the number of horizontal pixels in the bitmap
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td valign=top>
|
||||
<tt>pitch</tt>
|
||||
</td>
|
||||
<td valign=top>
|
||||
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
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td valign=top>
|
||||
<tt>buffer</tt>
|
||||
</td>
|
||||
<td valign=top>
|
||||
a typeless pointer to the bitmap pixel bufer
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td valign=top>
|
||||
<tt>pixel_mode</tt>
|
||||
</td>
|
||||
<td valign=top>
|
||||
an enumeration used to describe the pixel format of the bitmap;
|
||||
examples are <tt>ft_pixel_mode_mono</tt> for 1-bit monochrome
|
||||
bitmaps and <tt>ft_pixel_mode_grays</tt> for 8-bit anti-aliased
|
||||
"gray" values
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td valign=top>
|
||||
<tt>num_grays</tt>
|
||||
</td>
|
||||
<td valign=top>
|
||||
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
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</center>
|
||||
<p>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.</p>
|
||||
|
||||
|
||||
<p>Note that the sign of the <tt>pitch</tt> fields determines whether
|
||||
the rows in the pixel buffer are stored in ascending or descending
|
||||
order.</p>
|
||||
<h3 id="section-1">1. Vectorial versus pixel
|
||||
coordinates</h3>
|
||||
|
||||
<p>Remember that FreeType uses the <em>Y upwards</em> convention in
|
||||
the 2D plane, which means that a coordinate of (0,0) always refer to the
|
||||
<em>lower-left corner</em> of a bitmap.</p>
|
||||
<p>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)’.</p>
|
||||
|
||||
<p>If the pitch is positive, the rows are stored in decreasing vertical
|
||||
position; the first bytes of the pixel buffer are part of the
|
||||
<em>upper</em> bitmap row.</p>
|
||||
<p>In the pixel case, as we use the <em>Y upwards</em>
|
||||
convention; the coordinate [0, 0] always refers to
|
||||
the <em>lower left pixel</em> of a bitmap, while
|
||||
coordinate [width-1, rows-1] to its <em>upper right
|
||||
pixel</em>.</p>
|
||||
|
||||
<p>On the opposite, if the pitch is negative, the first bytes of the
|
||||
pixel buffer are part of the <em>lower</em> bitmap row.</p>
|
||||
<p>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.</p>
|
||||
|
||||
<p>In all cases, one can see the pitch as the byte increment needed to
|
||||
skip to the <em>next lower scanline</em> in a given bitmap buffer.</p>
|
||||
<p>The pixels themselves are indeed <em>square boxes</em> 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).</p>
|
||||
|
||||
<center>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="up_flow.png"
|
||||
height=261 width=275
|
||||
alt="negative 'pitch'">
|
||||
</td>
|
||||
<td>
|
||||
<img src="down_flow.png"
|
||||
height=263 width=273
|
||||
alt="positive 'pitch'">
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</center>
|
||||
<p>This introduces some differences when computing
|
||||
distances. For example, the <em>length</em> 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.</p>
|
||||
|
||||
<p>The "positive pitch" convention is very often used, though
|
||||
some systems might need the other.</p>
|
||||
<p align="center">
|
||||
<img src="grid_1.png"
|
||||
height="390"
|
||||
width="402"
|
||||
alt="bitmap and vector grid">
|
||||
</p>
|
||||
|
||||
|
||||
<a name="section-3">
|
||||
<h3>
|
||||
3. Converting outlines into bitmaps and pixmaps
|
||||
</h3>
|
||||
<h3 id="section-2">2. The <tt>FT_Bitmap</tt> descriptor</h3>
|
||||
|
||||
<p>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:</p>
|
||||
<p>In FreeType, a bitmap or pixmap is described through a
|
||||
single structure,
|
||||
called <a href="../reference/ft2-basic_types.html#FT_Bitmap"><tt>FT_Bitmap</tt></a>.
|
||||
The fields we are interested in are:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p>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).</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>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 [<tt>w,h</tt>] will be mapped to a 2D rectangle window
|
||||
delimited by (0,0)-(<tt>w,h</tt>).</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>When scan-converting the outline, everything that falls within
|
||||
the bitmap window is rendered, the rest is ignored.</p>
|
||||
</li>
|
||||
<table>
|
||||
<caption>
|
||||
<b><tt>FT_Bitmap</tt></b>
|
||||
</caption>
|
||||
|
||||
<p>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.</p>
|
||||
<tr>
|
||||
<td valign="top">
|
||||
<tt>rows</tt>
|
||||
</td>
|
||||
<td valign="top">
|
||||
the number of rows, i.e. lines, in the bitmap
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top">
|
||||
<tt>width</tt>
|
||||
</td>
|
||||
<td valign="top">
|
||||
the number of horizontal pixels in the bitmap
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top">
|
||||
<tt>pitch</tt>
|
||||
</td>
|
||||
<td valign="top">
|
||||
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
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top">
|
||||
<tt>buffer</tt>
|
||||
</td>
|
||||
<td valign="top">
|
||||
a typeless pointer to the bitmap pixel buffer
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top">
|
||||
<tt>pixel_mode</tt>
|
||||
</td>
|
||||
<td valign="top">
|
||||
an enumeration used to describe the pixel format of
|
||||
the bitmap; examples are <tt>ft_pixel_mode_mono</tt>
|
||||
for 1-bit monochrome bitmaps
|
||||
and <tt>ft_pixel_mode_grays</tt> for 8-bit
|
||||
anti-aliased ‘gray’ values
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top">
|
||||
<tt>num_grays</tt>
|
||||
</td>
|
||||
<td valign="top">
|
||||
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)
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
The first image shows a loaded outline in the 2D plane.
|
||||
</li>
|
||||
<li>
|
||||
The second one shows the target window for a bitmap of arbitrary
|
||||
dimensions [w,h].
|
||||
</li>
|
||||
<li>
|
||||
The third one shows the juxtaposition of the outline and window in
|
||||
the 2D plane.
|
||||
</li>
|
||||
<li>
|
||||
The last image shows what will really be rendered in the bitmap.
|
||||
</li>
|
||||
</ul>
|
||||
<p>Note that the sign of the <tt>pitch</tt> field determines
|
||||
whether the rows in the pixel buffer are stored in
|
||||
ascending or descending order.</p>
|
||||
|
||||
<center>
|
||||
<img src="clipping.png"
|
||||
height=151 width=539
|
||||
alt="clipping algorithm">
|
||||
</center>
|
||||
</ul>
|
||||
<p>Remember that FreeType uses the <em>Y upwards</em>
|
||||
convention in the 2D plane, which means that a coordinate
|
||||
of (0, 0) always refer to the <em>lower-left
|
||||
corner</em> of a bitmap.</p>
|
||||
|
||||
<p>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.</p>
|
||||
<p>If the pitch is positive, the rows are stored in
|
||||
decreasing vertical position; the first bytes of the pixel
|
||||
buffer are part of the <em>upper</em> bitmap row.</p>
|
||||
|
||||
<p>For example, the correct way of creating a <em>standalone</em> glyph
|
||||
bitmap is as follows</p>
|
||||
<p>On the opposite, if the pitch is negative, the first
|
||||
bytes of the pixel buffer are part of the <em>lower</em>
|
||||
bitmap row.</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p>Compute 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 the load, as the glyph metrics are not valid
|
||||
anymore).</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Create the bitmap with the computed dimensions. Don't forget to
|
||||
fill the pixel buffer with the background color.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>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
|
||||
<tt>(-ROUND(xMin), -ROUND(yMin))</tt>.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Call the rendering function (it can be
|
||||
<tt>FT_Outline_Render()</tt> for example).</p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>In all cases, one can see the pitch as the byte increment
|
||||
needed to skip to the <em>next lower scanline</em> in a
|
||||
given bitmap buffer.</p>
|
||||
|
||||
<p>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 correspond to the current text cursor/character origin.</p>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="up_flow.png"
|
||||
height="261"
|
||||
width="275"
|
||||
alt="negative 'pitch'">
|
||||
</td>
|
||||
<td>
|
||||
<img src="down_flow.png"
|
||||
height="263"
|
||||
width="273"
|
||||
alt="positive 'pitch'">
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p><hr></p>
|
||||
<p>The ‘positive pitch’ convention is very often
|
||||
used, though some systems might need the other.</p>
|
||||
|
||||
<center>
|
||||
<table width="100%"
|
||||
border=0
|
||||
cellpadding=5>
|
||||
<tr bgcolor="#CCFFCC"
|
||||
valign=center>
|
||||
<td align=center
|
||||
width="30%">
|
||||
<a href="glyphs-6.html">Previous</a>
|
||||
</td>
|
||||
<td align=center
|
||||
width="30%">
|
||||
<a href="index.html">Contents</a>
|
||||
</td>
|
||||
<td align=center
|
||||
width="30%">
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</center>
|
||||
|
||||
</td></tr>
|
||||
</table>
|
||||
</center>
|
||||
<h3 id="section-3">3. Converting outlines into bitmaps and
|
||||
pixmaps</h3>
|
||||
|
||||
<p>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:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p>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).</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>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
|
||||
[<tt>w</tt>, <tt>h</tt>] will be mapped to a 2D
|
||||
rectangle window delimited by
|
||||
(0, 0)-(<tt>w</tt>, <tt>h</tt>).</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>When scan-converting the outline, everything that
|
||||
falls within the bitmap window is rendered, the rest
|
||||
is ignored.</p>
|
||||
</li>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
The first image shows a loaded outline in the 2D
|
||||
plane.
|
||||
</li>
|
||||
<li>
|
||||
The second one shows the target window for a bitmap of
|
||||
arbitrary dimensions [<tt>w</tt>, <tt>h</tt>].
|
||||
</li>
|
||||
<li>
|
||||
The third one shows the juxtaposition of the outline
|
||||
and window in the 2D plane.
|
||||
</li>
|
||||
<li>
|
||||
The last image shows what will really be rendered in
|
||||
the bitmap.
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p align="center">
|
||||
<img src="clipping.png"
|
||||
height="151"
|
||||
width="539"
|
||||
alt="clipping algorithm">
|
||||
</p>
|
||||
</ul>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
<p>For example, the correct way of creating
|
||||
a <em>standalone</em> glyph bitmap is as follows:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p>Compute 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).</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Create the bitmap with the computed dimensions.
|
||||
Don't forget to fill the pixel buffer with the
|
||||
background color.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>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
|
||||
(<tt>-ROUND(xMin)</tt>, <tt>-ROUND(yMin)</tt>).</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Call the rendering function (it can be
|
||||
<a href="../reference/ft2-outline_processing.html#FT_Outline_Render"><tt>FT_Outline_Render</tt></a>,
|
||||
for example).</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>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.</p>
|
||||
</div>
|
||||
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<div class="updated">
|
||||
<p>Last update: 07-Dec-2014</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<div class="col2">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<div id="TOC">
|
||||
<ul>
|
||||
<li class="funding">
|
||||
<p><a href="https://pledgie.com/campaigns/24434">
|
||||
<img alt="Click here to lend your support to the FreeType project and make a donation at pledgie.com!"
|
||||
src="https://pledgie.com/campaigns/24434.png?skin_name=chrome"
|
||||
border="0"
|
||||
align="middle">
|
||||
</a></p>
|
||||
|
||||
<p><a href="https://flattr.com/thing/421342/lemzwerg-on-Flattr"
|
||||
target="_blank">
|
||||
<img class="with-border"
|
||||
src="http://api.flattr.com/button/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>
|
||||
<!-- separate primary from secondary entries -->
|
||||
</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">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" class="current">FreeType Bitmaps</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div> <!-- id="wrapper" -->
|
||||
|
||||
<div id="TOC-bottom">
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,200 +1,289 @@
|
||||
<!doctype html public "-//w3c//dtd html 4.0 transitional//en"
|
||||
"http://www.w3.org/TR/REC-html40/loose.dtd">
|
||||
<html>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
||||
"http://www.w3.org/TR/html4/loose.dtd">
|
||||
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type"
|
||||
content="text/html; charset=iso-8859-1">
|
||||
content="text/html; charset=utf-8">
|
||||
<meta http-equiv="Content-Style-Type"
|
||||
content="text/css">
|
||||
<meta http-equiv="Content-Script-Type"
|
||||
content="text/javascript">
|
||||
<meta name="description"
|
||||
content="FreeType Documentation">
|
||||
<meta name="Author"
|
||||
content="David Turner">
|
||||
|
||||
<link rel="icon"
|
||||
href="../image/favicon_-90.ico">
|
||||
<link rel="shortcut icon"
|
||||
href="../image/favicon_-90.ico">
|
||||
<link rel="stylesheet"
|
||||
type="text/css"
|
||||
href="../css/freetype2_-90.css">
|
||||
|
||||
<script type="text/javascript"
|
||||
src="../javascript/jquery-1.11.0.min.js">
|
||||
</script>
|
||||
<script type="text/javascript"
|
||||
src="../javascript/jquery.ba-resize.min.js">
|
||||
</script>
|
||||
<script type="text/javascript"
|
||||
src="../javascript/freetype2.js">
|
||||
</script>
|
||||
|
||||
<title>FreeType Glyph Conventions</title>
|
||||
</head>
|
||||
|
||||
<body text="#000000"
|
||||
bgcolor="#FFFFFF"
|
||||
link="#0000EF"
|
||||
vlink="#51188E"
|
||||
alink="#FF0000">
|
||||
|
||||
<h1 align=center>
|
||||
FreeType Glyph Conventions
|
||||
</h1>
|
||||
<body>
|
||||
|
||||
<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>
|
||||
<div id="top"
|
||||
class="bar">
|
||||
<h1><a href="http://freetype.org/index.html">FreeType</a> Glyph Conventions</h1>
|
||||
</div>
|
||||
|
||||
|
||||
<center>
|
||||
<table width="70%">
|
||||
<tr><td>
|
||||
<div id="wrapper">
|
||||
|
||||
<p>This document presents the core conventions used within the FreeType
|
||||
library to manage font and glyph data. It is a <em>must-read</em> for all
|
||||
developers who need to understand digital typography, especially if you
|
||||
want to use the FreeType 2 library in your projects.</p>
|
||||
<div class="colmask leftmenu">
|
||||
<div class="colright">
|
||||
<div class="col1wrap">
|
||||
<div class="col1">
|
||||
|
||||
<table width="100%">
|
||||
<tr valign=center
|
||||
bgcolor="#CCCCFF">
|
||||
<td align=center>
|
||||
<h2>
|
||||
Table of Contents
|
||||
</h2>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<center>
|
||||
<table width="80%">
|
||||
<tr><td>
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<h2>
|
||||
<a href="glyphs-1.html">I. Basic Typographic Concepts</a>
|
||||
</h2>
|
||||
<blockquote>
|
||||
<h3>
|
||||
<a href="glyphs-1.html#section-1">1. Font files, format and
|
||||
information</a>
|
||||
<br>
|
||||
<div id="introduction">
|
||||
<p>This document presents the core conventions used within
|
||||
the FreeType library to manage font and glyph data. It is
|
||||
a <em>must-read</em> for all developers who need to
|
||||
understand digital typography, especially if you want to
|
||||
use the FreeType 2 library in your projects.</p>
|
||||
</div>
|
||||
|
||||
<a href="glyphs-1.html#section-2">2. Character images and mappings</a>
|
||||
<br>
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<a href="glyphs-1.html#section-3">3. Character and font metrics</a>
|
||||
<br>
|
||||
</h3>
|
||||
</blockquote>
|
||||
<div id="contents">
|
||||
<h3><a href="glyphs-1.html">I. Basic Typographic
|
||||
Concepts</a></h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="glyphs-1.html#section-1">1. Font files, format
|
||||
and information</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="glyphs-1.html#section-2">2. Character images
|
||||
and mappings</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="glyphs-1.html#section-3">3. Character and font
|
||||
metrics</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h2>
|
||||
<a href="glyphs-2.html">II. Glyph outlines</a>
|
||||
</h2>
|
||||
<blockquote>
|
||||
<h3>
|
||||
<a href="glyphs-2.html#section-1">1. Pixels, points and device
|
||||
resolutions</a>
|
||||
<br>
|
||||
<h3><a href="glyphs-2.html">II. Glyph Outlines</a></h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="glyphs-2.html#section-1">1. Pixels, points and
|
||||
device resolutions</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="glyphs-2.html#section-2">2. Vectorial
|
||||
representation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="glyphs-2.html#section-3">3. Hinting and bitmap
|
||||
rendering</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a href="glyphs-2.html#section-2">2. Vectorial representation</a>
|
||||
<br>
|
||||
<h3><a href="glyphs-3.html">III. Glyph Metrics</a></h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="glyphs-3.html#section-1">1. Baseline, pens and
|
||||
layouts</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="glyphs-3.html#section-2">2. Typographic metrics
|
||||
and bounding boxes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="glyphs-3.html#section-3">3. Bearings and
|
||||
advances</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="glyphs-3.html#section-4">4. The effects of
|
||||
grid-fitting</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="glyphs-3.html#section-5">5. Text widths and
|
||||
bounding box</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a href="glyphs-2.html#section-3">3. Hinting and bitmap rendering</a>
|
||||
<br>
|
||||
</h3>
|
||||
</blockquote>
|
||||
<h3><a href="glyphs-4.html">IV. Kerning</a></h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="glyphs-4.html#section-1">1. Kerning pairs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="glyphs-4.html#section-2">2. Applying
|
||||
kerning</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h2>
|
||||
<a href="glyphs-3.html">III. Glyph metrics</a>
|
||||
</h2>
|
||||
<blockquote>
|
||||
<h3>
|
||||
<a href="glyphs-3.html#section-1">1. Baseline, pens and layouts</a>
|
||||
<br>
|
||||
<h3><a href="glyphs-5.html">V. Text Processing</a></h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="glyphs-5.html#section-1">1. Writing simple text
|
||||
strings</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="glyphs-5.html#section-2">2. Sub-pixel
|
||||
positioning</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="glyphs-5.html#section-3">3. Simple kerning</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="glyphs-5.html#section-4">4. Right-to-left
|
||||
layouts</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="glyphs-5.html#section-5">5. Vertical
|
||||
layouts</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a href="glyphs-3.html#section-2">2. Typographic metrics and
|
||||
bounding boxes</a>
|
||||
<br>
|
||||
<h3><a href="glyphs-6.html">VI. FreeType Outlines</a></h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="glyphs-6.html#section-1">1. FreeType outline
|
||||
description and structure</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="glyphs-6.html#section-2">2. Bounding and
|
||||
control box computations</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="glyphs-6.html#section-3">3. Coordinates,
|
||||
scaling, and grid-fitting</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a href="glyphs-3.html#section-3">3. Bearings and advances</a>
|
||||
<br>
|
||||
<h3><a href="glyphs-7.html">VII. FreeType Bitmaps</a></h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="glyphs-7.html#section-1">1. Vectorial versus
|
||||
pixel coordinates</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="glyphs-7.html#section-2">2. The <tt>FT_Bitmap</tt>
|
||||
descriptor</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="glyphs-7.html#section-3">3. Converting outlines
|
||||
into bitmaps and pixmaps</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<a href="glyphs-3.html#section-4">4. The effects of grid-fitting</a>
|
||||
<br>
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<a href="glyphs-3.html#section-5">5. Text widths and bounding box</a>
|
||||
<br>
|
||||
</h3>
|
||||
</blockquote>
|
||||
<div class="updated">
|
||||
<p>Last update: 07-Dec-2014</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>
|
||||
<a href="glyphs-4.html">IV. Kerning</a>
|
||||
</h2>
|
||||
<blockquote>
|
||||
<h3>
|
||||
<a href="glyphs-4.html#section-1">1. Kerning pairs</a>
|
||||
<br>
|
||||
|
||||
<a href="glyphs-4.html#section-2">2. Applying kerning</a>
|
||||
<br>
|
||||
</h3>
|
||||
</blockquote>
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<h2>
|
||||
<a href="glyphs-5.html">V. Text processing</a>
|
||||
</h2>
|
||||
<blockquote>
|
||||
<h3>
|
||||
<a href="glyphs-5.html#section-1">1. Writing simple text strings</a>
|
||||
<br>
|
||||
<div class="col2">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="glyphs-5.html#section-2">2. Sub-pixel positioning</a>
|
||||
<br>
|
||||
|
||||
<a href="glyphs-5.html#section-3">3. Simple kerning</a>
|
||||
<br>
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<a href="glyphs-5.html#section-4">4. Right-to-left layouts</a>
|
||||
<br>
|
||||
<div id="TOC">
|
||||
<ul>
|
||||
<li class="funding">
|
||||
<p><a href="https://pledgie.com/campaigns/24434">
|
||||
<img alt="Click here to lend your support to the FreeType project and make a donation at pledgie.com!"
|
||||
src="https://pledgie.com/campaigns/24434.png?skin_name=chrome"
|
||||
border="0"
|
||||
align="middle">
|
||||
</a></p>
|
||||
|
||||
<a href="glyphs-5.html#section-5">5. Vertical layouts</a>
|
||||
<br>
|
||||
<p><a href="https://flattr.com/thing/421342/lemzwerg-on-Flattr"
|
||||
target="_blank">
|
||||
<img class="with-border"
|
||||
src="http://api.flattr.com/button/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>
|
||||
|
||||
<a href="glyphs-5.html#section-6">6. WYSIWYG text layouts</a>
|
||||
<br>
|
||||
</h3>
|
||||
</blockquote>
|
||||
<li>
|
||||
<!-- separate primary from secondary entries -->
|
||||
</li>
|
||||
|
||||
<h2>
|
||||
<a href="glyphs-6.html">VI. FreeType Outlines</a>
|
||||
</h2>
|
||||
<blockquote>
|
||||
<h3>
|
||||
<a href="glyphs-6.html#section-1">1. FreeType outline description
|
||||
and structure</a>
|
||||
<br>
|
||||
<li class="secondary">
|
||||
<a href="glyphs-1.html" class="current">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">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>
|
||||
|
||||
<a href="glyphs-6.html#section-2">2. Bounding and control box
|
||||
computations</a>
|
||||
<br>
|
||||
</div> <!-- id="wrapper" -->
|
||||
|
||||
<a href="glyphs-6.html#section-3">3. Coordinates, scaling, and
|
||||
grid-fitting</a>
|
||||
<br>
|
||||
</h3>
|
||||
</blockquote>
|
||||
|
||||
<h2>
|
||||
<a href="glyphs-7.html">VII. FreeType bitmaps</a>
|
||||
</h2>
|
||||
<blockquote>
|
||||
<h3>
|
||||
<a href="glyphs-7.html#section-1">1. Vectorial versus pixel
|
||||
coordinates</a>
|
||||
<br>
|
||||
|
||||
<a href="glyphs-7.html#section-2">2. FreeType bitmap and pixmap
|
||||
descriptor</a>
|
||||
<br>
|
||||
|
||||
<a href="glyphs-7.html#section-3">3. Converting outlines into
|
||||
bitmaps and pixmaps</a>
|
||||
<br>
|
||||
</h3>
|
||||
</blockquote>
|
||||
|
||||
</td></tr>
|
||||
</table>
|
||||
</center>
|
||||
|
||||
</td></tr>
|
||||
</table>
|
||||
</center>
|
||||
<div id="TOC-bottom">
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
BIN
lib/freetype/docs/image/favicon.ico
Normal file
BIN
lib/freetype/docs/image/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
lib/freetype/docs/image/favicon_-30.ico
Normal file
BIN
lib/freetype/docs/image/favicon_-30.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
lib/freetype/docs/image/favicon_-60.ico
Normal file
BIN
lib/freetype/docs/image/favicon_-60.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
lib/freetype/docs/image/favicon_-90.ico
Normal file
BIN
lib/freetype/docs/image/favicon_-90.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
lib/freetype/docs/image/favicon_30.ico
Normal file
BIN
lib/freetype/docs/image/favicon_30.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
lib/freetype/docs/image/favicon_60.ico
Normal file
BIN
lib/freetype/docs/image/favicon_60.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
lib/freetype/docs/image/favicon_90.ico
Normal file
BIN
lib/freetype/docs/image/favicon_90.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
lib/freetype/docs/image/fond2-small.png
Normal file
BIN
lib/freetype/docs/image/fond2-small.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
lib/freetype/docs/image/fond2.png
Normal file
BIN
lib/freetype/docs/image/fond2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
BIN
lib/freetype/docs/image/fond3.jpg
Normal file
BIN
lib/freetype/docs/image/fond3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
lib/freetype/docs/image/fond3.png
Normal file
BIN
lib/freetype/docs/image/fond3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
lib/freetype/docs/image/fond3_-30.png
Normal file
BIN
lib/freetype/docs/image/fond3_-30.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
lib/freetype/docs/image/fond3_-60.png
Normal file
BIN
lib/freetype/docs/image/fond3_-60.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
lib/freetype/docs/image/fond3_-90.png
Normal file
BIN
lib/freetype/docs/image/fond3_-90.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
lib/freetype/docs/image/fond3_30.png
Normal file
BIN
lib/freetype/docs/image/fond3_30.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
lib/freetype/docs/image/fond3_60.png
Normal file
BIN
lib/freetype/docs/image/fond3_60.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
lib/freetype/docs/image/fond3_90.png
Normal file
BIN
lib/freetype/docs/image/fond3_90.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
lib/freetype/docs/image/freetype.jpg
Normal file
BIN
lib/freetype/docs/image/freetype.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
lib/freetype/docs/image/top.gif
Normal file
BIN
lib/freetype/docs/image/top.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 226 B |
330
lib/freetype/docs/index.html
Normal file
330
lib/freetype/docs/index.html
Normal file
@ -0,0 +1,330 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
||||
"http://www.w3.org/TR/html4/loose.dtd">
|
||||
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type"
|
||||
content="text/html; charset=utf-8">
|
||||
<meta http-equiv="Content-Style-Type"
|
||||
content="text/css">
|
||||
<meta http-equiv="Content-Script-Type"
|
||||
content="text/javascript">
|
||||
<meta name="description"
|
||||
content="FreeType Overview">
|
||||
|
||||
<link rel="icon"
|
||||
href="image/favicon_-60.ico">
|
||||
<link rel="shortcut icon"
|
||||
href="image/favicon_-60.ico">
|
||||
<link rel="stylesheet"
|
||||
type="text/css"
|
||||
href="css/freetype2_-60.css">
|
||||
|
||||
<script type="text/javascript"
|
||||
src="javascript/jquery-1.11.0.min.js">
|
||||
</script>
|
||||
<script type="text/javascript"
|
||||
src="javascript/jquery.ba-resize.min.js">
|
||||
</script>
|
||||
<script type="text/javascript"
|
||||
src="javascript/freetype2.js">
|
||||
</script>
|
||||
|
||||
<title>FreeType Overview</title>
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
<div id="top"
|
||||
class="bar">
|
||||
<h1><a href="http://freetype.org/index.html">FreeType</a> Overview</h1>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="wrapper">
|
||||
|
||||
<div class="colmask leftmenu">
|
||||
<div class="colright">
|
||||
<div class="col1wrap">
|
||||
<div class="col1">
|
||||
|
||||
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<div id="what-is-freetype">
|
||||
<h2>What is FreeType?</h2>
|
||||
|
||||
<p>FreeType is a software font engine that is designed to
|
||||
be small, efficient, highly customizable, and portable
|
||||
while capable of producing high-quality output (glyph
|
||||
images). It can be used in graphics libraries, display
|
||||
servers, font conversion tools, text image generation
|
||||
tools, and many other products as well.</p>
|
||||
|
||||
<p>Note that FreeType is a <em>font service</em> and doesn't
|
||||
provide APIs to perform higher-level features like text
|
||||
layout or graphics processing (e.g., colored text
|
||||
rendering, ‘hollowing’, etc.). However, it
|
||||
greatly simplifies these tasks by providing a simple, easy
|
||||
to use, and uniform interface to access the content of
|
||||
font files.</p>
|
||||
|
||||
<p>FreeType is released under two open-source licenses: our
|
||||
own
|
||||
BSD-like <a href="http://git.savannah.gnu.org/cgit/freetype/freetype2.git/tree/docs/FTL.TXT">FreeType
|
||||
License</a> and
|
||||
the <a href="http://git.savannah.gnu.org/cgit/freetype/freetype2.git/tree/docs/GPLv2.TXT">GNU
|
||||
Public License, Version 2</a>. It can thus be used
|
||||
by any kind of projects, be they proprietary or not.</p>
|
||||
|
||||
<p>Please note that ‘FreeType’ is also called
|
||||
‘FreeType 2’, to distinguish it from the
|
||||
old, deprecated ‘FreeType 1’ library, a
|
||||
predecessor no longer maintained and supported.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<div id="features">
|
||||
<h2>Features</h2>
|
||||
|
||||
<p>The following is a non-exhaustive list of features
|
||||
provided by FreeType.</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p>FreeType provides a simple and easy-to-use API to
|
||||
access font content in a uniform way, independently of
|
||||
the file format. Additionally, some format-specific
|
||||
APIs can be used to access special data in the font
|
||||
file.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>The design of FreeType is based on modules that can
|
||||
be either linked statically to the library at compile
|
||||
time, or loaded on demand at runtime. Modules are
|
||||
used to support specific font formats, or even new
|
||||
glyph image formats!</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>FreeType was written with embedded systems in mind.
|
||||
This means that it doesn't use static writable data
|
||||
(i.e., it can be run from ROM directly), and that
|
||||
client applications can provide their own memory
|
||||
manager and I/O stream implementation. The latter
|
||||
allows you to easily read from ROM-based, compressed
|
||||
or remote font files with the same API. Several
|
||||
stream implementations can be used concurrently with a
|
||||
single FreeType instance.</p>
|
||||
|
||||
<p>You can also reduce the size of the FreeType code by
|
||||
only compiling the modules you need for your embedded
|
||||
project or environment.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>By default, FreeType supports the following font
|
||||
formats.</p>
|
||||
|
||||
<ul>
|
||||
<li>TrueType fonts (TTF) and TrueType collections
|
||||
(TTC)</li>
|
||||
<li>CFF fonts</li>
|
||||
<li>WOFF fonts</li>
|
||||
<li>OpenType fonts (OTF, both TrueType and CFF
|
||||
variants) and OpenType collections (OTC)</li>
|
||||
<li>Type 1 fonts (PFA and PFB)</li>
|
||||
<li>CID-keyed Type 1 fonts</li>
|
||||
<li>SFNT-based bitmap fonts, including color Emoji</li>
|
||||
<li>X11 PCF fonts</li>
|
||||
<li>Windows FNT fonts</li>
|
||||
<li>BDF fonts (including anti-aliased ones)</li>
|
||||
<li>PFR fonts</li>
|
||||
<li>Type 42 fonts (limited support)</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<p>From a given glyph outline, FreeType is capable of
|
||||
producing a high-quality monochrome bitmap, or
|
||||
anti-aliased pixmap, using 256 levels of
|
||||
‘gray’.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>FreeType supports all the character mappings defined
|
||||
by the TrueType and OpenType specifications. It is
|
||||
also capable of automatically synthetizing a Unicode
|
||||
charmap from Type 1 fonts, avoiding painful
|
||||
‘encoding translation’ problems common
|
||||
with this format (of course, original encodings are
|
||||
also available if necessary).</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>The FreeType core API provides simple functions to
|
||||
access advanced information like glyph names or basic
|
||||
kerning data.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>A full-featured and efficient TrueType bytecode
|
||||
interpreter, trying to match the results of the
|
||||
Windows bytecode engine. There is also the
|
||||
possibility to activate subpixel hinting
|
||||
(a.k.a. <em>ClearType</em>, still under
|
||||
development).</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>For those who don't need or want to use the bytecode
|
||||
interpreter for TrueType fonts, we developed our
|
||||
own <em>automatic hinter</em> module. It is also used
|
||||
by other scalable formats.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Due to its modular design, it is easy to enhance the
|
||||
library, providing additional format-specific
|
||||
information through optional APIs (as an example, an
|
||||
optional API is provided to retrieve SFNT tables from
|
||||
TrueType and OpenType fonts).</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>FreeType provides its own caching subsystem. It can
|
||||
be used to cache either face instances or glyph images
|
||||
efficiently.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>A bundle of demo programs demonstrate the usage of
|
||||
FreeType; look for the
|
||||
‘ft2demos-<i>x.x.x</i>’ archive (or
|
||||
‘ftdmo<i>xxx</i>’ in case you are on a
|
||||
Windows platform) at the locations
|
||||
given <a href="http://freetype.org/download.html">here</a>.
|
||||
‘<i>x.x.x</i>’ (or
|
||||
‘<i>xxx</i>’) gives the version number,
|
||||
for example ‘2.4.10’ or
|
||||
‘2410’.</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<div id="requirements">
|
||||
<h2>Requirements</h2>
|
||||
|
||||
<p>FreeType is written in industry-standard ANSI C and
|
||||
should compile easily with any compliant C or C++
|
||||
compiler. We have even taken great care to
|
||||
eliminate <em>all warnings</em> when compiling with
|
||||
popular compilers like gcc, Visual C++, and Borland
|
||||
C++.</p>
|
||||
|
||||
<p>Apart from a standard ANSI C library, FreeType
|
||||
doesn't have any external dependencies and can be compiled
|
||||
and installed on its own on any kind of system. Some
|
||||
modules <em>need</em> external libraries (e.g., for
|
||||
handling fonts compressed with gzip or bz2), however, they
|
||||
are optional and can be disabled.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<div id="patents">
|
||||
<h2>Patent Issues</h2>
|
||||
|
||||
<p>All patents related to the TrueType bytecode interpreter
|
||||
have expired since May 2010. Support for the still
|
||||
patented ClearType color filtering model is disabled by
|
||||
default.</p>
|
||||
|
||||
<p>More information regarding this topic is available at
|
||||
our <a href="http://freetype.org/patents.html">patents page</a>.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<div class="updated">
|
||||
<p>Last update: 7-Dec-2014</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<div class="col2">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<div id="TOC">
|
||||
<ul>
|
||||
<li class="funding">
|
||||
<p><a href="https://pledgie.com/campaigns/24434">
|
||||
<img alt="Click here to lend your support to the FreeType project and make a donation at pledgie.com!"
|
||||
src="https://pledgie.com/campaigns/24434.png?skin_name=chrome"
|
||||
border="0"
|
||||
align="middle">
|
||||
</a></p>
|
||||
|
||||
<p><a href="https://flattr.com/thing/421342/lemzwerg-on-Flattr"
|
||||
target="_blank">
|
||||
<img class="with-border"
|
||||
src="http://api.flattr.com/button/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" class="current">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>
|
||||
<!-- separate primary from secondary entries -->
|
||||
</li>
|
||||
|
||||
<li class="secondary">
|
||||
<a href="#what-is-freetype">What is FreeType?</a>
|
||||
</li>
|
||||
<li class="secondary">
|
||||
<a href="#features">Features</a>
|
||||
</li>
|
||||
<li class="secondary">
|
||||
<a href="#requirements">Requirements</a>
|
||||
</li>
|
||||
<li class="secondary">
|
||||
<a href="#patents">Patents</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div> <!-- id="wrapper" -->
|
||||
|
||||
<div id="TOC-bottom">
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
78
lib/freetype/docs/javascript/freetype2.js
Normal file
78
lib/freetype/docs/javascript/freetype2.js
Normal file
@ -0,0 +1,78 @@
|
||||
/*!
|
||||
* freetype2.js
|
||||
*
|
||||
* auxiliary JavaScript functions for freetype.org
|
||||
*
|
||||
* written 2012 by Werner Lemberg
|
||||
*/
|
||||
|
||||
// This code snippet needs `jquery'
|
||||
// (http://code.jquery.com/jquery-1.8.3.js) and `jquery-resize'
|
||||
// (http://github.com/cowboy/jquery-resize/raw/master/jquery.ba-resize.js)
|
||||
|
||||
|
||||
// Add a bottom bar if the document length exceeds the window height.
|
||||
// Additionally ensure that the TOC background reaches the bottom of the
|
||||
// window.
|
||||
|
||||
function addBottomBar() {
|
||||
var columnHeight = $('.colright').height();
|
||||
var topBarHeight = $('#top').height();
|
||||
var winHeight = $(window).height();
|
||||
|
||||
if (columnHeight + topBarHeight > winHeight) {
|
||||
$('#TOC-bottom').css('height', columnHeight);
|
||||
/* add bottom bar if it doesn't exist already */
|
||||
if ($('#bottom').length == 0) {
|
||||
$('body').append('<div class="bar" id="bottom"></div>');
|
||||
}
|
||||
}
|
||||
else {
|
||||
$('#TOC-bottom').css('height', winHeight - topBarHeight);
|
||||
$('#bottom').remove();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// `Slightly' scroll the TOC so that its top moves up to the top of the
|
||||
// screen if we scroll down. The function also assures that the bottom of
|
||||
// the TOC doesn't cover the bottom bar (e.g., if the window height is very
|
||||
// small).
|
||||
|
||||
function adjustTOCPosition() {
|
||||
var docHeight = $(document).height();
|
||||
var TOCHeight = $('#TOC').height();
|
||||
var bottomBarHeight = $('#bottom').height();
|
||||
var topBarHeight = $('#top').height();
|
||||
|
||||
var scrollTopPos = $(window).scrollTop();
|
||||
var topBarBottomPos = 0 + topBarHeight;
|
||||
var bottomBarTopPos = docHeight - bottomBarHeight;
|
||||
|
||||
if (scrollTopPos >= topBarBottomPos) {
|
||||
$('#TOC').css('top', 0);
|
||||
}
|
||||
if (scrollTopPos < topBarBottomPos) {
|
||||
$('#TOC').css('top', topBarBottomPos - scrollTopPos);
|
||||
}
|
||||
if (bottomBarTopPos - scrollTopPos < TOCHeight)
|
||||
$('#TOC').css('top', bottomBarTopPos - scrollTopPos - TOCHeight);
|
||||
}
|
||||
|
||||
|
||||
// Hook functions into loading, resizing, and scrolling events.
|
||||
|
||||
$(window).load(function() {
|
||||
addBottomBar();
|
||||
adjustTOCPosition();
|
||||
|
||||
$(window).scroll(function() {
|
||||
adjustTOCPosition();
|
||||
});
|
||||
|
||||
$('#TOC-bottom').add(window).resize(function() {
|
||||
addBottomBar();
|
||||
});
|
||||
});
|
||||
|
||||
/* end of freetype2.js */
|
||||
4
lib/freetype/docs/javascript/jquery-1.11.0.min.js
vendored
Normal file
4
lib/freetype/docs/javascript/jquery-1.11.0.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
9
lib/freetype/docs/javascript/jquery.ba-resize.min.js
vendored
Normal file
9
lib/freetype/docs/javascript/jquery.ba-resize.min.js
vendored
Normal file
@ -0,0 +1,9 @@
|
||||
/*
|
||||
* jQuery resize event - v1.1 - 3/14/2010
|
||||
* http://benalman.com/projects/jquery-resize-plugin/
|
||||
*
|
||||
* Copyright (c) 2010 "Cowboy" Ben Alman
|
||||
* Dual licensed under the MIT and GPL licenses.
|
||||
* http://benalman.com/about/license/
|
||||
*/
|
||||
(function($,h,c){var a=$([]),e=$.resize=$.extend($.resize,{}),i,k="setTimeout",j="resize",d=j+"-special-event",b="delay",f="throttleWindow";e[b]=250;e[f]=true;$.event.special[j]={setup:function(){if(!e[f]&&this[k]){return false}var l=$(this);a=a.add(l);$.data(this,d,{w:l.width(),h:l.height()});if(a.length===1){g()}},teardown:function(){if(!e[f]&&this[k]){return false}var l=$(this);a=a.not(l);l.removeData(d);if(!a.length){clearTimeout(i)}},add:function(l){if(!e[f]&&this[k]){return false}var n;function m(s,o,p){var q=$(this),r=$.data(this,d);r.w=o!==c?o:q.width();r.h=p!==c?p:q.height();n.apply(this,arguments)}if($.isFunction(l)){n=l;return m}else{n=l.handler;l.handler=m}}};function g(){i=h[k](function(){a.each(function(){var n=$(this),m=n.width(),l=n.height(),o=$.data(this,d);if(m!==o.w||l!==o.h){n.trigger(j,[o.w=m,o.h=l])}});g()},e[b])}})(jQuery,this);
|
||||
215
lib/freetype/docs/tutorial/index.html
Normal file
215
lib/freetype/docs/tutorial/index.html
Normal file
@ -0,0 +1,215 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
||||
"http://www.w3.org/TR/html4/loose.dtd">
|
||||
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type"
|
||||
content="text/html; charset=utf-8">
|
||||
<meta http-equiv="Content-Style-Type"
|
||||
content="text/css">
|
||||
<meta http-equiv="Content-Script-Type"
|
||||
content="text/javascript">
|
||||
<meta name="description"
|
||||
content="FreeType Documentation">
|
||||
<meta name="Author"
|
||||
content="David Turner">
|
||||
|
||||
<link rel="icon"
|
||||
href="../image/favicon_-90.ico">
|
||||
<link rel="shortcut icon"
|
||||
href="../image/favicon_-90.ico">
|
||||
<link rel="stylesheet"
|
||||
type="text/css"
|
||||
href="../css/freetype2_-90.css">
|
||||
|
||||
<script type="text/javascript"
|
||||
src="../javascript/jquery-1.11.0.min.js">
|
||||
</script>
|
||||
<script type="text/javascript"
|
||||
src="../javascript/jquery.ba-resize.min.js">
|
||||
</script>
|
||||
<script type="text/javascript"
|
||||
src="../javascript/freetype2.js">
|
||||
</script>
|
||||
|
||||
<title>FreeType Tutorial</title>
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
<div id="top"
|
||||
class="bar">
|
||||
<h1><a href="http://freetype.org/index.html">FreeType</a> Tutorial</h1>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="wrapper">
|
||||
|
||||
<div class="colmask leftmenu">
|
||||
<div class="colright">
|
||||
<div class="col1wrap">
|
||||
<div class="col1">
|
||||
|
||||
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<div id="introduction">
|
||||
<p>This tutorial presents a step-by-step introduction into
|
||||
the FreeType library, covering the most basic needs.</p>
|
||||
</div>
|
||||
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<div id="contents">
|
||||
<h3><a href="step1.html">I. Simple Glyph Loading</a></h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="step1.html#section-1">1. Header Files</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="step1.html#section-2">2. Library
|
||||
Initialization</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="step1.html#section-3">3. Loading a Font
|
||||
Face</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="step1.html#section-4">4. Accessing the Face
|
||||
Data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="step1.html#section-5">5. Setting the Current
|
||||
Pixel Size</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="step1.html#section-6">6. Loading a Glyph
|
||||
Image</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="step1.html#section-7">7. Simple Text
|
||||
Rendering</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h3><a href="step2.html">II. Managing Glyphs</a></h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="step2.html#section-1">1. Glyph Metrics</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="step2.html#section-2">2. Managing Glyph
|
||||
Images</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="step2.html#section-3">3. Global Glyph
|
||||
Metrics</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="step2.html#section-4">4. Simple Text Rendering:
|
||||
Kerning and Centering</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="step2.html#section-5">5. Advanced Text
|
||||
Rendering: Transformation and Centering and
|
||||
Kerning</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="step2.html#section-6">6. Accessing Metrics in
|
||||
Design Font Units, and Scaling Them</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="step2.html#conclusion">Conclusion</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h3><a href="step3.html">III. Examples</a></h3>
|
||||
</div>
|
||||
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<div class="updated">
|
||||
<p>Last update: 7-Dec-2014</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<div class="col2">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<div id="TOC">
|
||||
<ul>
|
||||
<li class="funding">
|
||||
<p><a href="https://pledgie.com/campaigns/24434">
|
||||
<img alt="Click here to lend your support to the FreeType project and make a donation at pledgie.com!"
|
||||
src="https://pledgie.com/campaigns/24434.png?skin_name=chrome"
|
||||
border="0"
|
||||
align="middle">
|
||||
</a></p>
|
||||
|
||||
<p><a href="https://flattr.com/thing/421342/lemzwerg-on-Flattr"
|
||||
target="_blank">
|
||||
<img class="with-border"
|
||||
src="http://api.flattr.com/button/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>
|
||||
<!-- separate primary from secondary entries -->
|
||||
</li>
|
||||
|
||||
<li class="secondary">
|
||||
<a href="index.html" class="current">FreeType Tutorial</a>
|
||||
</li>
|
||||
<li class="tertiary">
|
||||
<a href="step1.html">Simple Glyph Loading</a>
|
||||
</li>
|
||||
<li class="tertiary">
|
||||
<a href="step2.html">Managing Glyphs</a>
|
||||
</li>
|
||||
<li class="tertiary">
|
||||
<a href="step3.html">Examples</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div> <!-- id="wrapper" -->
|
||||
|
||||
<div id="TOC-bottom">
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1,111 +1,171 @@
|
||||
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"
|
||||
"http://www.w3.org/TR/html4/loose.dtd">
|
||||
<html>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
||||
"http://www.w3.org/TR/html4/loose.dtd">
|
||||
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<style type="text/css">
|
||||
body { font-family: Verdana, Geneva, Arial, Helvetica, serif;
|
||||
color: #000000;
|
||||
background: #FFFFFF; }
|
||||
|
||||
p { text-align: justify; }
|
||||
h1 { text-align: center; }
|
||||
li { text-align: justify; }
|
||||
td { padding: 0 0.5em 0 0.5em; }
|
||||
|
||||
a:link { color: #0000EF; }
|
||||
a:visited { color: #51188E; }
|
||||
a:hover { color: #FF0000; }
|
||||
|
||||
div.pre { font-family: monospace;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
color: blue; }
|
||||
|
||||
div.example { font-family: monospace;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
color: purple; }
|
||||
|
||||
span.comment { color: gray; }
|
||||
</style>
|
||||
<meta http-equiv="Content-Type"
|
||||
content="text/html; charset=iso-8859-1">
|
||||
content="text/html; charset=utf-8">
|
||||
<meta http-equiv="Content-Style-Type"
|
||||
content="text/css">
|
||||
<meta http-equiv="Content-Script-Type"
|
||||
content="text/javascript">
|
||||
<meta name="description"
|
||||
content="FreeType Documentation">
|
||||
<meta name="Author"
|
||||
content="David Turner">
|
||||
<title>FreeType 2 Tutorial</title>
|
||||
|
||||
<link rel="icon"
|
||||
href="../image/favicon_-90.ico">
|
||||
<link rel="shortcut icon"
|
||||
href="../image/favicon_-90.ico">
|
||||
<link rel="stylesheet"
|
||||
type="text/css"
|
||||
href="../css/freetype2_-90.css">
|
||||
|
||||
<script type="text/javascript"
|
||||
src="../javascript/jquery-1.11.0.min.js">
|
||||
</script>
|
||||
<script type="text/javascript"
|
||||
src="../javascript/jquery.ba-resize.min.js">
|
||||
</script>
|
||||
<script type="text/javascript"
|
||||
src="../javascript/freetype2.js">
|
||||
</script>
|
||||
|
||||
<title>FreeType Tutorial / III</title>
|
||||
</head>
|
||||
|
||||
<body text="#000000"
|
||||
bgcolor="#FFFFFF"
|
||||
link="#0000EF"
|
||||
vlink="#51188E"
|
||||
alink="#FF0000">
|
||||
|
||||
<h1 align=center>
|
||||
FreeType 2 Tutorial<br>
|
||||
Step 3 — handling internals
|
||||
</h1>
|
||||
<body>
|
||||
|
||||
<h3 align=center>
|
||||
© 2010 Werner Lemberg
|
||||
(<a href="mailto:wl@gnu.org">wl@gnu.org</a>)<br>
|
||||
© 2010 The FreeType Development Team
|
||||
(<a href="http://www.freetype.org">www.freetype.org</a>)
|
||||
</h3>
|
||||
<div id="top"
|
||||
class="bar">
|
||||
<h1><a href="http://freetype.org/index.html">FreeType</a>
|
||||
Tutorial / III</h1>
|
||||
</div>
|
||||
|
||||
<center>
|
||||
<table width="70%">
|
||||
<tr><td>
|
||||
|
||||
<hr>
|
||||
<div id="wrapper">
|
||||
|
||||
<h2>
|
||||
Introduction
|
||||
</h2>
|
||||
<div class="colmask leftmenu">
|
||||
<div class="colright">
|
||||
<div class="col1wrap">
|
||||
<div class="col1">
|
||||
|
||||
<p>This is the third section of the FreeType 2 tutorial. It
|
||||
describes how to deal with various internals of the library like</p>
|
||||
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<div id="examples">
|
||||
<h2>III. Examples</h2>
|
||||
|
||||
<p>For completeness, here again a link to
|
||||
the <a href="example1.c">example</a> used and explained in
|
||||
the <a href="step1.html">first part of the
|
||||
tutorial</a>.</p>
|
||||
|
||||
<p><a href="mailto:erik@timetrap.se">Erik Möller</a>
|
||||
contributed a very nice C++ example that shows renderer
|
||||
callbacks in action to draw a coloured glyph with a
|
||||
differently coloured outline. The source code can be
|
||||
found <a href="example2.cpp">here</a>.</p>
|
||||
|
||||
<p><a href="example3.cpp">Another example</a> demonstrates
|
||||
how to use FreeType's stand-alone rasterizer,
|
||||
<tt>ftraster.c</tt>, both in B/W and 5-levels gray mode.
|
||||
You need files from FreeType version 2.3.10 or newer.</p>
|
||||
|
||||
<p><a href="mailto:gsmiko@gmail.com">Róbert Márki</a>
|
||||
contributed a small
|
||||
<a href="example4.cpp">Qt demonstration program</a>
|
||||
(together with its <a href="example4.pro">qmake file</a>)
|
||||
that shows both direct rendering with a callback and
|
||||
rendering with a buffer, yielding the same result. You
|
||||
need FreeType 2.4.3 or newer.</p>
|
||||
</div>
|
||||
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<div class="updated">
|
||||
<p>Last update: 13-Dec-2014</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<div class="col2">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ************************************************** -->
|
||||
|
||||
<div id="TOC">
|
||||
<ul>
|
||||
<li>the module interface</li>
|
||||
<li>functions for manipulating vector outlines</li>
|
||||
<li>font driver issues</li>
|
||||
<li>interaction with renderers using callbacks</li>
|
||||
<li>accessing font specific data, for example PostScript font
|
||||
dictionaries and TrueType tables</li>
|
||||
<li class="funding">
|
||||
<p><a href="https://pledgie.com/campaigns/24434">
|
||||
<img alt="Click here to lend your support to the FreeType project and make a donation at pledgie.com!"
|
||||
src="https://pledgie.com/campaigns/24434.png?skin_name=chrome"
|
||||
border="0"
|
||||
align="middle">
|
||||
</a></p>
|
||||
|
||||
<p><a href="https://flattr.com/thing/421342/lemzwerg-on-Flattr"
|
||||
target="_blank">
|
||||
<img class="with-border"
|
||||
src="http://api.flattr.com/button/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>
|
||||
<!-- separate primary from secondary entries -->
|
||||
</li>
|
||||
|
||||
<li class="secondary">
|
||||
<a href="index.html">FreeType Tutorial</a>
|
||||
</li>
|
||||
<li class="tertiary">
|
||||
<a href="step1.html">Simple Glyph Loading</a>
|
||||
</li>
|
||||
<li class="tertiary">
|
||||
<a href="step2.html">Managing Glyphs</a>
|
||||
</li>
|
||||
<li class="tertiary">
|
||||
<a href="step3.html" class="current">Examples</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<p>None of these items have been written yet.</p>
|
||||
</div> <!-- id="wrapper" -->
|
||||
|
||||
<h2>
|
||||
Examples
|
||||
</h2>
|
||||
|
||||
<p><a href="mailto:erik@timetrap.se">Erik Möller</a> contributed a very
|
||||
nice C++ example which shows renderer callbacks in action to draw a
|
||||
coloured glyph with a differently coloured outline. The source code can
|
||||
be found <a href="example2.cpp">here</a>.</p>
|
||||
|
||||
<p><a href="example3.cpp">Another example</a> demonstrates how to use
|
||||
FreeType's stand-alone rasterizer, <tt>ftraster.c</tt>, both in B/W and
|
||||
5-levels gray mode. You need files from FreeType version 2.3.10 or
|
||||
newer.</p>
|
||||
|
||||
<p><a href="mailto:gsmiko@gmail.com">Róbert Márki</a> contributed a small
|
||||
<a href="example4.cpp">Qt demonstration program</a> (together with its <a
|
||||
href="example4.pro">qmake file</a>) which shows both direct rendering with
|
||||
a callback and rendering with a buffer, yielding the same result. You
|
||||
need FreeType 2.4.3 or newer.</p>
|
||||
|
||||
</td></tr>
|
||||
</table>
|
||||
</center>
|
||||
|
||||
<h3 align=center>
|
||||
<a href="step1.html">FreeType 2 Tutorial Step 1</a>
|
||||
</h3>
|
||||
|
||||
<p><font size=-3>Last update: 07-Dec-2010</font></p>
|
||||
<div id="TOC-bottom">
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user