1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
|
<HTML>
<HEAD>
<!-- Created with AOLpress/2.0 -->
<!-- AP: Created on: 27-Jan-2003 -->
<!-- AP: Last modified: 15-Nov-2008 -->
<TITLE>Creating the letter "o" -- consistant directions</TITLE>
<LINK REL="icon" href="ffanvil16.png">
<LINK REL="stylesheet" TYPE="text/css" HREF="FontForge.css">
</HEAD>
<BODY>
<P ALIGN=CENTER>
<IMG SRC="fontforge-banner-420.jpeg" WIDTH=420 HEIGHT=80>
<DIV id="in">
<H1 ALIGN=Center>
Tutorial #2
</H1>
<UL>
<LI>
<A HREF="editexample.html#FontCreate">Font Creation</A>
<LI>
<A HREF="editexample.html#CharCreate">Creating a glyph (tracing outlines)</A>
<LI>
<A HREF="editspiro.html">Create glyph outlines using spiro points</A>
<LI>
<A HREF="importexample.html">Importing a glyph from Inkscape (or Illustrator,
or some other vector editor)</A>
<LI>
<A HREF="editexample2.html#Navigating">Navigating to other glyphs</A>
<LI>
<A HREF="editexample2.html#Creating-o">On to the next glyph (consistent
directions)</A>
<LI>
<A HREF="editexample3.html#consistent-stems">Consistent serifs and stem
widths</A>
<LI>
<A HREF="editexample4.html#accents">Building accented glyphs</A>
<LI>
<A HREF="editexample4.html#ligature">Building a ligature</A>
<LI>
<A HREF="editexample4.html#lookups">Lookups and features</A>
<LI>
<A HREF="editexample5.html#metrics">Examining metrics</A>
<LI>
<A HREF="editexample5.html#Kerning">Kerning</A>
<LI>
<A HREF="editexample6.html#Variants">Glyph variants</A>
<LI>
<A HREF="editexample6.html#Marks">Anchoring marks</A>
<LI>
<A HREF="editexample6-5.html#Conditional">Conditional features</A>
<LI>
<A HREF="editexample7.html#checking">Checking your font</A>
<LI>
<A HREF="editexample7.html#generating">Generating it</A>
<LI>
<A HREF="editexample7.html#Families">Font Families</A>
<LI>
<A HREF="editexample7.html#summary">Final Summary</A>
<LI>
<A HREF="editexample8.html">Bitmap strikes</A>
<LI>
<A HREF="scripting-tutorial.html">Scripting Tutorial</A>
<LI>
<A HREF="scriptnotes.html#Special">Notes on various scripts</A>
<LI>
<FORM method=GET action="http://www.google.com/search">
Searching the documentation:
<INPUT type=hidden name="as_sitesearch" value="fontforge.sourceforge.net">
<INPUT type=text name="as_q">
<INPUT type=submit name="btnG" value="Search">(Powered by
<A HREF="http://www.google.com/">Google</A>)
</FORM>
</UL>
<H2>
<A NAME="Navigating">Navigating to glyphs.</A>
</H2>
<P>
The font view provides one way of navigating around the glyphs in a font.
Simple scroll around it until you find the glyph you need and then double
click on it to open a window looking at that glyph.
<P>
Typing a glyph will move to that glyph.
<P>
However some fonts are huge (Chinese, Japanese and Korean fonts have thousands
or even tens of thousands of glyphs) and scrolling around the font view is
a an inefficient way of finding your glyph. <CODE>View->Goto </CODE>provides
a simple dialog which will allow you to move directly to any glyph for which
you know the name (or encoding). If your font is a Unicode font, then this
dialog will also allow you to find glyphs by block name (ie. Hebrew rather
than Alef).
<P>
The simplest way to navigate is just to go to the next or previous glyph.
And <CODE>View->Next Char</CODE> and <CODE>View->Prev Char</CODE> will
do exactly that.
<H2>
<A NAME="Creating-o">Creating </A>the letter "o" -- consistent directions
</H2>
<P>
In the previous example the bitmap of the letter filled the canvas of the
image. And when FontForge imported the image it needed to be scaled once
in the program. But usually when you create the image of the letter you have
some idea of how much white space there should be around it. If your images
are exactly one em high then FontForge will scale them automatically to be
the right size. So in the following examples all the images have exactly
the right amount of white-space around them to fit perfectly in an em.
<P>
For the next example double click on the square in the font view that should
contain "o", and import "o_Ambrosia.png" into it.
<TABLE BORDER CELLPADDING="2">
<CAPTION>
Stages in editing "o"
</CAPTION>
<TR>
<TD><IMG SRC="o1.png" WIDTH="190" HEIGHT="287"></TD>
<TD><IMG SRC="o2.png" WIDTH="190" HEIGHT="287"></TD>
<TD><IMG SRC="o3.png" WIDTH="190" HEIGHT="287"></TD>
<TD><IMG SRC="o4.png" WIDTH="190" HEIGHT="287"></TD>
</TR>
</TABLE>
<P>
Notice that the first outline is drawn clockwise and the second
counter-clockwise. This change in drawing direction is important. Both PostScript
and TrueType require that the outer boundary of a glyph be drawn in a certain
direction (they happen to be opposite from each other, which is a mild
annoyance), within FontForge all outer boundaries must be drawn clockwise,
while all inner boundaries must be drawn counter-clockwise.
<P>
If you fail to alternate directions between outer and inner boundaries you
may get results like the one on the left
<IMG SRC="o-baddir.png" WIDTH="51" HEIGHT="28">. If you fail to draw the
outer contour in a clockwise fashion the errors are more subtle, but will
generally result in a less pleasing result once the glyph has been rasterized.
<P>
<SMALL><STRONG>TECHNICAL AND CONFUSING</STRONG>: the exact behavior of
rasterizers varies. Early PostScript rasterizers used a "non-zero winding
number rule" while more recent ones use an "even-odd" rule. TrueType uses
the "non-zero" rule. The description given above is for the "non-zero" rule.
The "even-odd" rule would fill the "o" correctly no matter which way the
paths were drawn (though there would probably be subtle problems with
hinting).</SMALL>
<P>
<SMALL>Filling using the <A NAME="even-odd">even-odd </A>rules that a line
is drawn from the current pixel to infinity (in any direction) and the number
of contour crossings is counted. If this number is even the pixel is not
filled. If the number is odd the pixel is filled. In the
<A NAME="non-zero">non-zero </A>winding number rule the same line is drawn,
contour crossings in a clockwise direction add 1 to the crossing count,
counter-clockwise contours subtract 1. If the result is 0 the pixel is not
filled, any other result will fill it.</SMALL>
<P>
The command <CODE><A HREF="elementmenu.html#Correct">Element->Correct
Direction</A></CODE> will look at each selected contour, figure out whether
it qualifies as an outer or inner contour and will reverse the drawing direction
when the contour is drawn incorrectly.
<P>
<P ALIGN=Center>
-- <A HREF="importexample.html">Prev</A> -- <A HREF="overview.html">TOC</A>
-- <A HREF="editexample3.html">Next</A> --
</DIV>
</BODY></HTML>
|
