forked from fontforge/fontforge.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
charview.html
1083 lines (1083 loc) · 48.3 KB
/
charview.html
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
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<HTML>
<HEAD>
<!-- Created with AOLpress/2.0 -->
<!-- AP: Created on: 6-Dec-2000 -->
<!-- AP: Last modified: 5-Apr-2010 -->
<TITLE>Outline Glyph View</TITLE>
<LINK REL="icon" href="fftype16.png">
<LINK REL="stylesheet" TYPE="text/css" HREF="/assets/css/old/FontForge.css">
</HEAD>
<BODY id="menued">
<div style="margin:0; height: 4 em; padding: 0.5em; background: red; color:yellow; text-align:center; font-size:1em; font-family: sans-serif;">
<p><a href="http://fontforge.github.io" style="padding: 0.5em; color: yellow; font-weight: bold; text-decoration: none;" onmouseover="this.style.background='black';" onmouseout="this.style.background='red';" >This is part of the old website. New website begins at fontforge.github.io</a></p>
<p><a href="https://github.com/fontforge/fontforge.github.io" style="padding: 0.5em; color: yellow; font-weight: bold; text-decoration: none;" onmouseover="this.style.background='black';" onmouseout="this.style.background='red';" >Are you a web developer? Help us migrate this page on Github</a></p>
</div>
<P ALIGN=CENTER>
<IMG SRC="/assets/img/old/fontforge-banner-420.jpeg" WIDTH=420 HEIGHT=80>
<DIV class="menucontainer">
<UL class="menubar">
<LI class="menu">
<A href="http://sourceforge.net/projects/fontforge/files/">Download</A>
<UL>
<LI>
<A href="http://sourceforge.net/projects/fontforge/files/fontforge-docs/"
>Documentation</A>
<LI>
<A href="http://sourceforge.net/projects/fontforge/files/fontforge-source/"
>Source</A>
</UL>
<LI>
<A HREF="overview.html#TOC">Introduction</A>
<LI>
<A href="editexample.html">Tutorial</A>
<LI class="menu">
<A href="fontview.html">Windows</A>
<UL>
<LI>
<A href="fontview.html" >Font</A>
<LI>
<A href="charview.html" >Outline Glyph</A>
<LI>
<SMALL><A href="charview.html#Debugging" > Debugging
TrueType</A></SMALL>
<LI>
<SMALL><A href="multilayer.html" > Type3 Glyphs</A></SMALL>
<LI>
<A href="bitmapview.html" >Bitmap Glyph</A>
<LI>
<A href="metricsview.html" >Metrics</A>
</UL>
<LI class="menu">
<A href="fontinfo.html">Dialogs 1</A>
<UL>
<LI>
<A href="fontinfo.html" >Font Information</A>
<LI>
<SMALL><A href="histogram.html" > Histogram Dialog</A></SMALL>
<LI>
<A href="charinfo.html" >Glyph Information</A>
<LI>
<A href="getinfo.html" >Point, Reference Information</A>
<LI>
<A href="multilayer.html#Layer" >Type3 Layer Information</A>
<LI>
<A href="bdfinfo.html" >Bitmap Properties</A>
<LI>
<A href="baseline.html" >Baseline Information</A>
<LI>
<A HREF="justify.html">Justification Information</A>
<LI>
<A href="math.html" >Math Information</A>
<LI>
<A href="multiplemaster.html" >Multiple Master Information</A>
<LI>
<HR>
<LI>
<A href="lookups.html" >Lookups & subtables</A>
<LI>
<A href="metricsview.html#kernpair" >Kerning glyph pairs 1</A>
<LI>
<A href="kernpairs.html" >Kerning glyph pairs 2</A>
<LI>
<A href="metricsview.html#kernclass" >Kerning by classes</A>
<LI>
<A href="anchorcontrol.html" >Anchor Control</A>
<LI>
<A href="contextchain.html" >Contextual lookup dialog</A>
<LI>
<A href="statemachine.html" >Apple State Machine dialog</A>
<LI>
<A href="showatt.html" >Show Advanced Typography</A>
<LI>
<HR>
<LI>
<A href="problems.html" >Potential Problems dialog</A>
<LI>
<A href="validation.html" >Font Validation dialog</A>
</UL>
<LI class="menu">
<A href="generate.html">Dialogs 2</A>
<UL>
<LI>
<A href="filemenu.html#Open" >Open Fonts dialog</A>
<LI>
<A href="oflib.html" >Browsing OFLib dialog</A>
<LI>
<A href="generate.html" >Generate Fonts dialog</A>
<LI>
<A href="generate.html#Mac" >Generate Mac Family dialog</A>
<LI>
<HR>
<LI>
<A href="display.html" >Print & Display dialog</A>
<LI>
<A href="prefs.html" >Preferences dialog</A>
<LI>
<A href="groups.html" >Groups dialog</A>
<LI>
<HR>
<LI>
<A href="elementmenu.html#Bitmaps">Manage Bitmap Strikes</A>
<LI>
<A href="elementmenu.html#Regenerate">Re-Rasterize Bitmap Strikes</A>
<LI>
<HR>
<LI>
<A href="search.html" >Search & Replace dialog</A>
<LI>
<A href="Styles.html" >Style Transformation dialogs</A>
<LI>
<A href="transform.html" >Transformation dialog</A>
<LI>
<A href="elementmenu.html#Expand" >Expand Stroke dialog</A>
<LI>
<A href="tilepath.html" >Tile Path dialog</A>
<LI>
<A href="InsertTextDlg.html" >Insert Text dialog</A>
<LI>
<HR>
<LI>
<A href="metricsmenu.html#Width">Set width dialogs</A>
<LI>
<A href="metricsmenu.html#Width">Set left/right bearings</A>
<LI>
<A href="autowidth.html" >Auto Width & Kern dialogs</A>
<LI>
<HR>
<LI>
<A href="hintsmenu.html#Review" >Review PS Hints dialog</A>
<LI>
<A href="ttfinstrs.html" >TrueType Instruction Editor</A>
<LI>
<A href="ttfinstrs.html#cvt" >TrueType 'cvt ' Editor</A>
<LI>
<HR>
<LI>
<A href="selectbyatt.html" >Select by feature dialog</A>
<LI>
<A href="elementmenu.html#MassRename" >Rename Glyphs dialog</A>
<LI>
<A href="elementmenu.html#CompareFonts" >Compare Fonts dialog</A>
</UL>
<LI class="menu">
<A href="filemenu.html">Menus</A>
<UL>
<LI>
<A href="filemenu.html" >File</A>
<LI>
<A href="editmenu.html" >Edit</A>
<LI>
<A href="pointmenu.html" >Point</A>
<LI>
<A href="elementmenu.html">Element</A>
<LI>
<A href="toolsmenu.html">Tools</A>
<LI>
<A href="hintsmenu.html" >Hints</A>
<LI>
<A href="encodingmenu.html" >Encoding</A>
<LI>
<A href="viewmenu.html" >View</A>
<LI>
<A href="metricsmenu.html" >Metrics</A>
<LI>
<A href="cidmenu.html" >CID</A>
<LI>
<A href="mmmenu.html" >Multi Master</A>
<LI>
<A href="windowmenu.html" >Window</A>
<LI>
<A href="helpmenu.html" >Help</A>
</UL>
<LI>
<A href="faqFS.html">FAQ</A>
<LI>
<A href="IndexFS.html">Index</A>
<LI>
<A href="GlossaryFS.html">Glossary</A>
</UL>
</DIV>
<DIV id="in">
<H1 ALIGN=Center>
Outline Glyph View
</H1>
<P>
<IMG SRC="/assets/img/old/charview2.png" WIDTH="544" HEIGHT="656">
<P>
The outline glyph view is the window in which most editing happens.
<P>
At the top of the window, underneath the menu bar is an information line.
The first item is the location of the mouse pointer (in the internal coordinate
system of the glyph). If there is a single selected point then the next item
gives its location, and the next three are, respectively, the offsets from
the selected point to the current location, the distance from the selected
point, and the angle from the horizontal (measured counter-clockwise). Then
we have the current scale factor, and the layer which is active. Finally
(in the debugging view) is an indication of whether the instruction pointer
is in the glyph program, the 'prep' program of the 'fpgm'.
<P>
Underneath the information is a ruler showing the current pointer location
as a red line. There's a similar ruler on the left side.
<P>
Underneath that is the glyph itself. On the left edge of the screen is a
grey line indicating the x=0 line, further right is a black line showing
where the glyph's width is currently set. There are also grey lines showing
the ascent, descent and baseline.
<P>
Background images and background splines are drawn in grey. Grid lines are
also drawn in grey. Vertical hinting regions are drawn in light blue, Horizontal
hints are drawn in light green. If any hints overlap the boundaries are drawn
in cyan.
<P>
The points of the glyph are of three types, corner points drawn as filled
squares, curve points drawn as filled circles and tangent points drawn as
filled triangles. If a point is selected then it will be drawn as an outlined
square, circle or triangle and its control points are drawn as little magenta
or dull-cyan xs at the end of a similarly colored line. (in a curved point
the control points will be collinear). (the "Next" control point will be
drawn dull cyan, and the Prev point will be magenta).
<P>
<IMG SRC="/assets/img/old/charview-quadratic.png" WIDTH="344" HEIGHT="392" ALT="A quadratic glyph"
ALIGN="Right">In a TrueType font, an on-curve point can be implied between
two control points. FontForge will draw these with an open circle.
<P>
The initial point in a contour will be drawn in green, and beside it will
be a tiny arrow pointing in the direction of the contour.
<P>
<IMG SRC="/assets/img/old/extrema-poi.png" WIDTH="204" HEIGHT="274" ALT="Showing extrema"
ALIGN="Left">Sometimes it is important to know which points are at the extrema
of splines (postscript likes for there to be points at the extrema of all
splines), if this is important to you set the "Mark Extrema" flag in the
View menu. After that points at extrema will show up as dull purple. And
internal extrema will also be marked.
<P>
There are also two palettes, one, a layer palette, allowing you to control
<A HREF="#Layers">which layers are visible</A>, and one, a tool palette,
from which you <A HREF="#Tools">may pick editing tools</A>. Normally these
are free floating windows, but you may choose to dock them in the window
with View->Palettes->Dock Palettes.
<P>
You select an editing tool by clicking on the appropriate button on the tools
palette, or you may depress the right mouse button and select a tool from
a popup menu (you may also change layers and do a few other things with this
menu). There are four different tools bindings available to you (this may
be a complication with no utility). The left mouse button has a tool bound
to it, and this tool will be displayed when the program is idle. If you hold
down the control key, another tool is available, by default this is a pointer
but if you click on the tools palette with the control key down you can select
something else. If you depress the middle mouse button you get a third tool
(by default a magnifying glass), and the control key and middle button give
you the fourth (a ruler).
<P>
If the mouse pointer is close to a point (within a few pixels) when you depress
the mouse, then the effective location of the press will be the location
of the point.
<P>
If you drag a glyph from the font view and drop it into a glyph view then
FontForge will drop a reference to the dragged glyph into the view.
<P>
Warning: <FONT COLOR="Red"><STRONG>If your glyph has truetype instructions
then editing it may cause those instructions to behave very oddly. If your
glyph has anchor points which depend on truetype point matching then editing
the glyph may disconnect the points. If your glyph is used as a reference
in another glyph that positions references by point matching then editing
this glyph may reposition those references.</STRONG></FONT>
<H2>
<A NAME="Layers">Layers</A>
</H2>
<P>
<IMG SRC="/assets/img/old/layers.png" WIDTH="123" HEIGHT="84" ALIGN="Left"> There are several
drawing layers in the outline view. Each layer has an "eye box" (indicating
whether it is visible or not), curve type ("C" for cubic, "Q"for quadratic,
" " for Guide layer, which is always cubic), mode ("#" for Guide layer, "B"
for background layers, "F" for foreground layers) and a name.
<P>
The first layer is a set of guide lines/splines. These are common to all
glyphs in the font. A few lines are provided for you (the x=0 line, the ascent,
descent and baseline). Other handy lines might be the x-height of the font,
the cap-height, ascender-height, descender-height, ... When you are working
in any of the other layers, points will snap to splines in this layer (making
it easy to force a consistent x-height for example).
<P>
Next are the background layers, these contain background images and splines.
These do not go into the font, but may be helpful to you in tracing the outline
of your glyph. It is possible to paste an image into the background if you
have an image manipulation program that supports selection by mime type (the
kde family of applications does this, perhaps others), then FontForge will
be able to read images in either "image/png" or "image/bmp", otherwise you
may import background image files.
<P>
When debugging truetype
(<CODE><A HREF="hintsmenu.html#Debug">Hints->Debug</A>)</CODE>, or showing
gritfit outlines (<A HREF="viewmenu.html#ShowGridFit"><CODE>View->Show
Gridfit</CODE></A>) the visibility of the gridfit outlines can be controlled
by the background layer's visibility.
<P>
The last is the foreground layer, this contains the splines that actually
make up the glyph that will be placed into the font.
<P>
One can actually have multiple foreground and background layers. They can
be created and deleted with "+" and "-" buttons. FontForge, won't delete
last layer of its type, though. And care must be taken when generating
a font to have the right foreground layer selected, if multiple are present.
<P>
Layer curve type and visibility can be toggled freely with left mouse button.
Making the layer cubic or quadratic is a little trickier, as it's done with
right mouse button: a pop-up menu will appear, allowing for some additional
operations, like moving contents between layers.
<H2>
<A NAME="Tools">Tools</A>
</H2>
<P>
<IMG SRC="/assets/img/old/tools.png" WIDTH="116" HEIGHT="321" ALIGN="Left" ISMAP USEMAP="#im-tools"><MAP
NAME="im-tools">
<AREA SHAPE="RECT" HREF="#spiro-mode" COORDS="89,108,116,135">
<AREA SHAPE="RECT" HREF="#spiro-add-point" COORDS="63,108,89,135">
<AREA SHAPE="RECT" HREF="#spiro-add-point" COORDS="63,54,116,108">
<AREA SHAPE="RECT" HREF="#spiro-mode" COORDS="27,109,54,135">
<AREA SHAPE="RECT" HREF="#pen" COORDS="1,108,28,136">
<AREA SHAPE="RECT" HREF="#rectangle" COORDS="0,244,54,272">
<AREA SHAPE="RECT" HREF="#perspective" COORDS="27,216,54,243">
<AREA SHAPE="RECT" HREF="#rotate3d" COORDS="0,216,27,243">
<AREA SHAPE="RECT" HREF="#skew" COORDS="27,189,55,217">
<AREA SHAPE="RECT" HREF="#rotate" COORDS="0,189,27,216">
<AREA SHAPE="RECT" HREF="#flip" COORDS="27,162,54,189">
<AREA SHAPE="RECT" HREF="#scale" COORDS="0,163,27,190">
<AREA SHAPE="RECT" HREF="#ruler" COORDS="27,135,54,161">
<AREA SHAPE="RECT" HREF="#knife" COORDS="-1,135,27,162">
<AREA SHAPE="RECT" HREF="#add-point" COORDS="27,80,54,108">
<AREA SHAPE="RECT" HREF="#add-point" COORDS="1,82,27,109">
<AREA SHAPE="RECT" HREF="#add-point" COORDS="1,53,54,80">
<AREA SHAPE="RECT" HREF="#scroll" COORDS="27,27,53,53">
<AREA SHAPE="RECT" HREF="#freehand" COORDS="1,27,26,54">
<AREA SHAPE="RECT" HREF="#magnify" COORDS="28,0,53,27">
<AREA SHAPE="RECT" HREF="#pointer" COORDS="1,0,28,28">
</MAP>
There are 19 different editing tools, a mode button which alters the behavior
of 5 of them, and two others (rectangle/ellipse and polygon/star) which come
in two forms.
<P>
At the bottom of the palette is a list of the current bindings of the mouse
buttons. Here mouse button 1 is bound to the pointer tool, mouse button 1
with the control key pressed is also bound to pointer, mouse button 2 is
bound to magnify, and mouse button 2 with control is bound to ruler.
<P>
Many of the tools have different <A NAME="alt-meta-capslock">behaviors</A>
if you hold the shift or alt (meta) key down when using the tool. On the
mac there is no alt/meta key, and the Option and Command keys are usually
bound to making a one button mouse look like a three button mouse. So on
the mac fontforge uses the caps-lock key rather than alt/meta.
<H3>
<IMG SRC="/assets/img/old/cvarrowicon.png" ALIGN="Middle">The <A NAME="pointer">pointer</A>
tool
</H3>
<P>
This tool is used for selecting points, images and referenced glyphs. It
can also move these and scale images and referenced glyphs.
<P>
Only things that are in the layer that is currently editable may be selected
or moved or scaled.
<P>
A simple click on an unselected point selects it and deselects everything
else. A shift click on a point toggles whether that point is selected or
not. A double click selects all points on the path containing that point.
A tripple click selects everything in the layer. Clicking on the background
will deselect everything. Clicking on the background and dragging out a rectangle
will select everything within the rectangle. Clicking on a line or spline
will select the two end points of that line or spline. Clicking on the dark
part of an image (when in a layer with images) will select the image. Clicking
on the outline of a referenced glyph will select that reference (if a reference
glyph happens to have the same outline and bounding box, then holding down
the <A HREF="charview.html#alt-meta-capslock">meta/alt/caps-lock</A> key
will allow you to move it once it is selected, without the meta key you will
resize it).
<P>
If a point has no visible control points, then they are at the same location
as the point itself. If you want to select one of the control points then
first select the point (to make the control points active) then hold down
the meta key (use caps-lock on the mac) and depress the mouse on the point.
This should allow you to drag one of the control points (if you get the wrong
point the first time drag it out of the way, repeat the process to get the
other control and then put the first one back). Sadly some window managers
(gnome-sawtooth for one) will steal meta-clicks. If this happens you will
need to use Element->Get Info to set the control points.
<P>
<IMG SRC="/assets/img/old/cpinfo.png" WIDTH="296" HEIGHT="337" ALIGN="Right">When you move
a <A NAME="CpInfo">control point</A> you have the option
(<CODE><A HREF="viewmenu.html#CpInfo">View->Show Control Point
Info</A></CODE>) of getting a popup box showing information about the control
point (and its opposite number on the other side of the on-curve point).
You will be told whether this is the next or previous control point, the
absolute location of the point, the offset from the on-curve point, the slope
expressed as a ratio, and as an angle, and the curvature on this side of
the base point. At the very bottom is the difference between the two curvatures.
Try to make this number approach 0 for curved points.
<P>
Once something is selected you may drag it around. If you select something
and drag the mouse then it and everything else selected will be moved. If
you drag an open path and one of the end points happens to fall on the end
point of another open path, then the two will be merged into one (If you
don't want open paths to merge, hold down the
<A HREF="charview.html#alt-meta-capslock">Alt/meta/caps-lock</A> key). If
you drag a control point then it will be moved (if you drag a control point
defining an implied point, then the implied point(s) will also be moved).
<P>
If you selected a spline, then dragging it will drag the location on the
spline where you pressed the mouse (so you are changing the shape of the
spline).
<P>
If you hold the shift key down when you drag then the motion will be constrained
to be either horizontal, vertical, or at a 45° angle. (When moving control
points the combination of shift and
<A HREF="charview.html#alt-meta-capslock">meta (alt) </A>will mean that the
control point is constrained to be the same angle from the base point as
it was before you started moving it).
<P>
If your font has an ItalicAngle set, and the ItalicConstrain preference item
is set, then motion that would normally be constrained to the vertical is
constrained to be along the ItalicAngle.
<P>
If you move the mouse to the bounding box of a selected image or reference
glyph and drag it then you will scale that object.
<P>
If you move the mouse to the <A NAME="set-width">advance width</A> line,
then dragging it will change the width of the current glyph. If there are
any bitmaps of this glyph then their widths will also be updated. If there
are any other glyphs which depend on this glyph (ie. include this glyph as
a reference) and their width was the same as the glyph's, then their widths
will also be updated (so if you change the width of A, then the width of
À, Á, Â, Ã, Ä and Å might also be changed).
If you are displaying vertical metrics (in a font that has them), then you
can use the same technique to modify the vertical advance.
<P>
If you are in an accented glyph then you may not be able to change the width,
as its width is bound to that of the base glyph (By setting the "Use My Metrics"
bit in the reference containing the base glyph). This will be displayed as
a lock icon at the top of the window near the width line.
<P>
It is also possible to use the arrow keys to move selected items around.
Each arrow will move the selection one em-unit (this can be changed in
preferences to be any number of em-units) in the obvious direction. The selection
may include the width (right bearing) line (or vertical with line). If the
last thing you selected was a control point then that point will be moved.
If you hold down the shift key at the same time the up and down arrows will
move parallel to the italic angle (be careful of this: this leads to non-integral
values). If you hold down the <A HREF="charview.html#alt-meta-capslock">meta
(alt)</A> key, then the motion will be 10 times the normal amount.
<P>
If you hold down the control key while working with the arrows then the view
will be scrolled rather than moving the selection.
<P>
If the glyph is a ligature (and has a ligature entry in Glyph Info) then
it has the potential of having "ligature caret locations". Essentially this
means that between each ligature component it is possible to place a caret
location (so that the word processor will place be able to place a caret
between each component of the ligature). In a ligature window a series of
vertical lines will be drawn across the screen at the caret locations. By
default these lines will be placed at the origin, but you may move one by
placing the mouse pointer on it, depressing the button and dragging the line
around. See the description on <A HREF="editexample4.html#ligature">building
a ligature </A>for a more complete description.
<H3>
<IMG SRC="/assets/img/old/cvmagicon.png" WIDTH="26" HEIGHT="26" ALIGN="Middle">The
<A NAME="magnify">magnifying</A> tool
</H3>
<P>
Clicking with the magnifying tool will magnify the view and center it around
the point you clicked on. Holding down the
<A HREF="charview.html#alt-meta-capslock">Alt/Meta/CapsLock </A>key and clicking
will minify the view, again centered around the point at which you clicked.
Again some window managers will steal meta-clicks, so you may have to use
the View menu to minify (It's called Zoom Out
<P>
If you drag out a rectangle with this tool then when you release, FontForge
will shift and scale the view so that your rectangle just fits into the window.
<P>
If your mouse has a scroll wheel then holding down the control key with the
scroll wheel causes it to magnify or minify the window.
<H3>
<IMG SRC="/assets/img/old/cvhandicon.png" WIDTH="26" HEIGHT="26" ALIGN="Middle">The
<A NAME="scroll">scroll</A> tool
</H3>
<P>
You can use this tool to scroll the window without using the scroll bars.
<H3>
<IMG SRC="/assets/img/old/cvfreehandicon.png" WIDTH="26" HEIGHT="26" ALIGN="Middle"><IMG
SRC="freehandctl.png" ALIGN="Right" WIDTH="313" HEIGHT="684">The
<A NAME="freehand">freehand</A> tool
</H3>
<P>
You can use this tool to draw a random curve which FontForge will then attempt
to convert into a set of splines. If you hold down the
<A HREF="charview.html#alt-meta-capslock">Alt/Meta/CapsLock</A> key then
FontForge will close the curve when you release the mouse.
<P>
If you double click on the icon in the tool palette you get a dialog similar
to the <A HREF="elementmenu.html#Expand">Element->Expand Stroke</A> which
will give you slightly more control over the results, as you can have it
not expand the stroke you draw (ie. leave a single trace.)<BR CLEAR=ALL>
<H3>
<IMG SRC="/assets/img/old/cvcurveicon.png" WIDTH="26" HEIGHT="26" ALIGN="Middle">
<IMG SRC="/assets/img/old/cvhvcurveicon.png" WIDTH="25" HEIGHT="26" ALIGN="Middle"><IMG SRC="/assets/img/old/cvcornericon.png"
WIDTH="26" HEIGHT="26" ALIGN="Middle">
<IMG SRC="/assets/img/old/cvtangenticon.png" WIDTH="26" HEIGHT="26" ALIGN="Middle">Tools
for <A NAME="add-point">adding</A> curved, corner and tangent points.
</H3>
<P>
These four tools behave similarly, differing only in what kind of point is
added to the view.
<P>
If a single point is selected, and if that point is at the end of a path
then depressing the mouse button will create a new point where the mouse
was depressed and draw a spline from the selected point to new point. If
this new location happens to be the end of a path then the two paths will
be joined (or if it is the end of the current path then the path will be
closed).
<P>
Otherwise if the mouse is depressed while being on a spline then a point
will be added to that spline.
<P>
Otherwise a new point is created not on any path at the location of the press.
<P>
Once the point has been created then it becomes selected and all others are
deselected. You may drag the point around, and if the point is on an open
path and you drag it to the end point of another open path then the two paths
will be joined.
<P>
If you double click then a point will be added as above and a
<A HREF="getinfo.html">Point Info</A> dlg will appear to give you fine control
over the location of the point and its control points.
<P>
The four different point types are
<UL>
<LI>
curved points (where the incoming and outgoing splines have the same slope)
<LI>
horizontal/vertical curved points (similar to the above except the slope
is constrained to be either horizontal or vertical)
<LI>
corner points (where the incoming and outgoing splines may have different
slopes)
<LI>
tangent points (where one spline is a line segment and the other spline is
curved then the curved spline is constrained to start with the same slope
as the line).
</UL>
<H3>
<IMG SRC="/assets/img/old/cvpenicon.png" WIDTH="26" HEIGHT="26" ALIGN="Middle">The
<A NAME="pen">pen</A> tool
</H3>
<P>
This tool behaves differently in cubic and quadratic editing. In many ways
it is similar to the tools above as it adds a point to the current spline.
<P>
In a cubic font the points created are curved points, and they are initially
created with the control points on the point and as you drag you drag out
the control points rather than moving the point itself around.
<P>
In a quadratic font a point will be created half-way between the last control
point and the current location (which becomes the next control point).
<P>
If you hold down the Alt (Meta, etc) key you change the behavior so that
cubic editing looks like quadratic and vice versa.
<H3>
<IMG SRC="/assets/img/old/cvspiroG4icon.png" WIDTH="26" HEIGHT="26" ALIGN="Middle">
<IMG SRC="/assets/img/old/cvspiroG2icon.png" WIDTH="26" HEIGHT="26" ALIGN="Middle">
<IMG SRC="/assets/img/old/cvspirocornericon.png" WIDTH="26" HEIGHT="26" ALIGN="Middle">
<IMG SRC="/assets/img/old/cvspirolefticon.png" WIDTH="26" HEIGHT="26" ALIGN="Middle">
<IMG SRC="/assets/img/old/cvspirorighticon.png" WIDTH="26" HEIGHT="26" ALIGN="Middle"> Tools
for <A NAME="spiro-add-points">adding</A> spiro control points
</H3>
<P>
These tools add spiro control points to the current contour, these are only
available in spiro mode, but the basic adding process is similar to the above.
<P>
The different point types are:
<UL>
<LI>
G4 (continuous up to the fourth derivative)
<LI>
G2 (continuous up to the second derivative)<BR>
Basically, if you have a sharp curve you should probably use a G2 point,
and if a more gentle curve a G4.
<LI>
corner
<LI>
prev constraint point -- vaguely like a tangent (Raph calls this a "left"
point)<BR>
This type of point should be used where the contour changes from a curve
to a straight line (where the curve is on the previous side of the constraint
point)
<LI>
next constraint point -- vaguely like a tangent (Raph calls this a "right"
point)<BR>
This type of point should be used where the contour changes from a straight
line to a curve (where the curve is on the next side of the constraint point)
</UL>
<P>
This is based on <A HREF="http://www.levien.com/spiro/">Raph Levien's work</A>
with clothoid splines which provide constant curvature across points.
<H3>
<IMG SRC="/assets/img/old/cvspiromodeicon.png" WIDTH="25" HEIGHT="26" ALIGN="Middle"><A NAME="spiro-mode">Spiro
mode</A>
</H3>
<P>
This button toggles between editing contours using Bézier control
points, or between using spiro (clothoid) control points.
<H3>
<IMG SRC="/assets/img/old/cvknifeicon.png" WIDTH="26" HEIGHT="26" ALIGN="Middle">The
<A NAME="knife">knife</A> tool
</H3>
<P>
This tool is used to cut splines. As you drag it across the view fontforge
draws a line showing where the cut will happen. When you release, every spline
you intersect will be cut-- that is at the location where this line intersects
the spline two new points will be created and the old spline will be split
in two connecting to the two new end points. These endpoints are not joined,
so the spline is now open (or if it were previously open, it is now cut in
two).
<H3>
<IMG SRC="/assets/img/old/cvrulericon.png" WIDTH="26" HEIGHT="26" ALIGN="Middle">The
<A NAME="ruler">ruler</A> tool
</H3>
<P>
<IMG SRC="/assets/img/old/ruler.png" WIDTH="234" HEIGHT="102" ALIGN="Right">This tool tells
you current position of the mouse. If the mouse is near the outline it will
give the slope and curvature there. If the mouse is near a point on the outline
will give the slope and curvature on each side of the point.
<P>
If you depress the button and drag, the tool will show the x-y offsets, distance
and angle from the point where you depressed the mouse to the mouse's current
location. If you depress the tool at one end point of a spline and move it
to the other endpoint then it will also show the length of that spline.
<P>
If you hold down the
<A HREF="charview.html#alt-meta-capslock">Meta/Alt/CapsLock </A>key then
information will only be shown when the mouse is depressed.
<H3>
<IMG SRC="/assets/img/old/cvscaleicon.png" WIDTH="26" HEIGHT="26" ALIGN="Middle">The
<A NAME="scale">scale</A> tool
</H3>
<P>
This tool allows you to scale the selection by eye rather than by a set amount
(if there is no selection then everything in the current layer will be scaled).
The location of the press will be the origin of the transformation, the further
you move the point up and to the right the more it will be scaled in that
dimension. If you want the scaling to be uniform or only in one dimension
then hold down the shift key.
<P>
Double clicking on this will bring up the transform dialog with the "Scale..."
option selected.
<H3>
<IMG SRC="/assets/img/old/cvflipicon.png" WIDTH="26" HEIGHT="26" ALIGN="Middle">The
<A NAME="flip">flip</A> tool
</H3>
<P>
This tool allows you to flip the selection either horizontally or vertically.
Again the point at which you press the mouse is the origin of the transformation.
<P>
Double clicking on this will bring up the transform dialog with the "Flip..."
option selected.
<P>
<FONT COLOR="Red"> <STRONG>Note: After flipping an outline you will almost
certainly want to apply
<A HREF="elementmenu.html#Correct">Element->Correct
Direction</A>.</STRONG></FONT>
<H3>
<IMG SRC="/assets/img/old/cvrotateicon.png" WIDTH="26" HEIGHT="26" ALIGN="Middle">The
<A NAME="rotate">rotate</A> tool
</H3>
<P>
This tools allows you to rotate the selection freely.
<P>
Double clicking on this will bring up the transform dialog with the "Rotate..."
option selected.
<H3>
<IMG SRC="/assets/img/old/cvskewicon.png" WIDTH="26" HEIGHT="26" ALIGN="Middle">The
<A NAME="skew">skew</A> tool
</H3>
<P>
This tool allows you to skew the selection.
<P>
Double clicking on this will bring up the transform dialog with the "Skew..."
option selected.
<H3>
<IMG SRC="/assets/img/old/cvrotate3dicon.png" WIDTH="26" HEIGHT="26" ALIGN="Middle">The
<A NAME="rotate3d">rotate</A> 3D tool
</H3>
<P>
This tool allows you to rotate the selection in the third dimension and project
the result back onto the x-y plane. An imaginary line is drawn from the point
where you pressed to the current point, this line determines the axis of
rotation. The distance you move from the initial press determines the amount
of rotation.
<P>
Double clicking on this will bring up the transform dialog with the "Rotate
3D..." option selected.
<H3>
<IMG SRC="/assets/img/old/Eperspective.png" WIDTH="154" HEIGHT="361" ALIGN="Right"><IMG SRC="/assets/img/old/cvperspectiveicon.png"
WIDTH="26" HEIGHT="26" ALIGN="Middle">The
<A NAME="perspective">perspective</A> tool
</H3>
<P>
This tool allows you to apply a perspective transformation to the selection
(this is a non-linear transformation). This tool uses three points: The glyph
origin, the press point, and the current location of the cursor. In the image
at right the mouse was pressed on the baseline near the glyph's advance width,
and the mouse was released in the upper middle of the image. The glyph is
transformed so that the release point is treated as the point at infinity.
The line between the origin and the press point defines one axis of the
transformation. Distances perpendicular to this line are retained, distances
parallel to it are scaled as:
<BLOCKQUOTE>
<I>x' = release_x + (release_y - y)/release_y * ( x - release_x )</I><BR>
<I>y' = y</I><BR CLEAR=ALL>
</BLOCKQUOTE>
<H3>
<IMG SRC="/assets/img/old/cvrecticon.png" WIDTH="26" HEIGHT="26" ALIGN="Middle">
<IMG SRC="/assets/img/old/cvellipseicon.png" WIDTH="26" HEIGHT="26" ALIGN="Middle">The
<A NAME="rectangle">rectangle</A>/ellipse tools
</H3>
<P>
By default this produces a rectangle, single-clicking on the tool palette
will toggle between rectangle and ellipse, and double clicking in the tools
palette gives you a dialog which allows you to control whether your rectangles
are drawn with round corners, and how both rectangles and ellipses are specified.
<P>
You can choose whether the rectangle (or ellipse) will be drawn between the
point where you depressed the mouse on the view and the point where you released
it (bounding box), or whether the point where you depress the mouse becomes
the center of the rectangle and the point where you release it provides an
end-point (center out).
<P>
If you want even more control, you can double click in the glyph view and
get another dialog which allows you to define numerically where the
rectangle/ellipse should be placed, how big it should be, and whether it
should be rotated.
<H3>
<IMG SRC="/assets/img/old/cvpolyicon.png" WIDTH="26" HEIGHT="26" ALIGN="Middle">
<IMG SRC="/assets/img/old/cvstaricon.png" WIDTH="26" HEIGHT="26" ALIGN="Middle">The polygon/star
tools
</H3>
<P>
By default this draws a regular polygon, but by double clicking on the button
in the tools palette you can make it draw a star, or select the number of
verteces in your polygon.
<P>
The polygon is drawn as though it were inscribed in the circle whose center
is the point where you depressed the mouse and whose radius is the distance
between the press point and the release point. One of the polygon's verteces
will be at the release point.
<P>
A star is drawn similarly. It will be a star generated from a regular polygon.
As the number of verteces of the polygon gets larger the star will look more
and more like a circle, for this reason the dialog box that allows you to
pick the number of verteces will also allow you to pick how far the star's
points should extend beyond the circle in which the polygon is inscribed
(this will make a non-regular star, but it might look nicer).
<H2>
<A NAME="Vertical">Vertical View</A>
</H2>
<P>
<IMG SRC="/assets/img/old/charview-vert.png" WIDTH="544" HEIGHT="563" ALIGN="Right"> In this
view the vertical metrics of the glyph are shown. You can change the vertical
advance just as you changed the glyph's width (by selecting the pointer tool
and dragging the vertical advance line up or down).<BR Clear=Right>
<H2>
<A NAME="GridFit">Grid Fit View</A>
</H2>
<P>
<IMG SRC="/assets/img/old/GridFit.png" WIDTH="327" HEIGHT="368" ALIGN="Right">If you have
the freetype library, then you can see the results of rasterizing your glyph.
If you have freetype's bytecode interpreter enabled you can also see how
the truetype instructions in the glyph have moved the points around (if you
don't have the bytecode interpreter enabled you will see what freetype's
autohinter does to points). This mode can be invoked with
<CODE><A HREF="viewmenu.html#ShowGridFit">View->Show Grid
Fit</A></CODE>...
<P>
The Show Grid Fit command will ask you for some basic information first.
It needs to know the pointsize and resolution for which you want the action
performed (the example at right is 12pt on a 72dpi screen).<BR>
<IMG SRC="/assets/img/old/ShowGridFit.png" WIDTH="268" HEIGHT="148"><BR CLEAR=ALL>
<H2>
<IMG SRC="/assets/img/old/cvdebug.png" WIDTH="544" HEIGHT="563" ALIGN="Right">The
<A NAME="Debugging">Debugging</A> View
</H2>
<BLOCKQUOTE ID="lit">
"I told you butter wouldn't suit the works!" he added, looking angrily at
the March Hare.
<P>
"It was the <EM>best</EM> butter," the March Hare meekly replied.
<P align=right>
Alice's Adventures in Wonderland<BR>
Lewis Carroll
</BLOCKQUOTE>
<P>
FontForge has a truetype debugger -- provided you have a version of freetype
on your machine with the bytecode interpreter enabled
<FONT COLOR="Red"><STRONG>(Note: you need a license from Apple to enable
this. It is protected by several patents)</STRONG></FONT>.
<P>
The image to the right shows an example of this mode. You invoke it with
<CODE><A HREF="hintsmenu.html#Debug">Hints->Debug</A></CODE>, and as with
the grid-fit view above you must establish a pointsize and and resolution.
The view divides into two panes, the left of which is similar to the grid
fit view above (except that it changes as you step through the instructions),
the right pane provides a list of the instructions to be executed.
<P>
In addition to showing you all the points in your glyph there are either
2 or 4 additional points. These are the so-called "phantom" points and represent
the horizontal and vertical metrics of the glyph (old versions of freetype
will only display 2 points -- left side bearing and advance width, while
newer versions will display top side bearing and advance height as well).
<P>
As you step through a glyph occasionally points will light up. This is
FontForge's attempt to show you what points will be affected (usually moved)
by the current instruction. Other points will have a circle drawn around
them. These are used as reference points by the instruction.
<P>
There are a series of buttons at the top of the instruction view. The first
will single step the truetype program (step into), the second will step over
procedure calls, the third will set a break point at the return point for
the current function and continue until that is hit, and the fourth will
continue until:
<UL>
<LI>
It hits a break point
<LI>
It hits a watch point
<LI>
It reaches the end of the glyph program
<LI>
An error occurs
</UL>
<P>
The red "STOPPED" arrow shows the current location of the instruction pointer
(and what instruction will be executed next).
<P>
The fifth button allows you to set a watch point. You select a point (or
several points) in the left hand pane, and press this button. Thereafter,
whenever one of those points is moved FontForge will stop the glyph program.
(You may also set watch points through the points window).
<P>
When you are in this mode there are a few special "hot keys"
<BLOCKQUOTE>
<TABLE>
<TR>
<TD>r</TD>
<TD>run/restart</TD>
</TR>
<TR>
<TD>k</TD>
<TD>kill/quit debugger</TD>
</TR>
<TR>
<TD>q</TD>
<TD>kill/quit debugger</TD>
</TR>
<TR>
<TD>c</TD>
<TD>continue</TD>
</TR>
<TR>
<TD>s</TD>
<TD>step (into)</TD>
</TR>
<TR>
<TD>n</TD>
<TD>next (step over)</TD>
</TR>
<TR>
<TD>f</TD>
<TD>finish function (continue until we return from the function)</TD>
</TR>
</TABLE>
</BLOCKQUOTE>
<P>
Similarly you may watch storage and cvt locations by clicking on the appropriate
spot in the storage and cvt windows.
<P>
You can set a more conventional break point by clicking on an instruction.
A little red stop sign will appear on top of the address area, and the program
will halt when the instruction pointer reaches that instruction. Clicking
on the instruction again will remove the breakpoint.
<P>
Flaw: Currently there is no way to set breakpoints outside of the current
function (or glyph).
<P>
Flaw: Currently there is no way to examine the call stack.
<P>
The sixth button brings up a menu with which you can control which of various
debugging palettes are visible. The ones available so far are: Registers,
Stack, Points, Storage, Cvt, Raster and Gloss.
<TABLE BORDER CELLPADDING="2">
<TR VALIGN="Top">
<TD><IMG SRC="/assets/img/old/TTRegisters.png" WIDTH="137" HEIGHT="292"></TD>
<TD><IMG SRC="/assets/img/old/TTStack.png" WIDTH="137" HEIGHT="292"></TD>
<TD><IMG SRC="/assets/img/old/TTPoints.png" WIDTH="220" HEIGHT="300"></TD>
</TR>
<TR VALIGN="Top">
<TD>Shows the truetype graphics state.</TD>
<TD>Shows the truetype stack. The value in parentheses is a 26.6 number.</TD>
<TD>Shows the points. You may choose to view the twilight points, or the
points displayed in the glyph pane (the normal points). You may view the
current location or the original location. You may view them in the units
of the current grid, or in em-units.
<P>
When debugging a composite glyph the Transformed check box indicates whether
the points of the current component have been transformed (to show where
they fit in the composite) or not (showing where they are in the base component
-- this is what the instructions are working on).
<P>
The points may have some flags associated with them: 'P' means the point
is an on curve point, 'C' means the point is an off curve point (a control
point), 'I' means the point is an on-curve point interpolated between two
control points, 'F' means a phantom point, 'T' means a twilight point, 'H'
means the horizontal touch flag has been set, 'V' means the vertical touch
flag has been set.
<P>
A small stop sign indicates the point is being watched (that is execution
will stop if the point moves). You may change whether a point is watched
by clicking on it.
<P>
Contours are separated by horizontal lines</TD>
</TR>
<TR VALIGN="Top">
<TD><IMG SRC="/assets/img/old/TTStorage.png" WIDTH="187" HEIGHT="131"></TD>
<TD><IMG SRC="/assets/img/old/TTCvt.png" WIDTH="198" HEIGHT="200"></TD>
<TD><IMG SRC="/assets/img/old/TTRaster.png" WIDTH="54" HEIGHT="81"></TD>
</TR>
<TR VALIGN="Top">
<TD>Shows the truetype storage locations.
<P>
A small stop sign indicates the storage location is being watched (that is
execution will stop if the location changes). You may change whether a location
is watched by clicking on it.</TD>
<TD>Shows the current values in the cvt array.
<P>
A small stop sign indicates the cvt location is being watched (that is execution
will stop if the value changes). You may change whether a location is watched
by clicking on it.</TD>
<TD>Shows the current raster with no magnificaton</TD>
</TR>
</TABLE>
<P>
<TABLE BORDER CELLPADDING="2" WIDTH="340">
<TR>
<TD><P ALIGN=Center>
<IMG SRC="/assets/img/old/TTgloss.png" WIDTH="320" HEIGHT="305"></TD>
</TR>
<TR>
<TD>This window tries to provide a gloss for the current instruction. It
gives a brief description of the instruction in the top few lines, then explains
what registers it uses, and shows their values, it shows what use is made
of the stack and attempts to interpret the data on the stack. Finally it
explains what registers will be set, and what will be pushed onto the stack.</TD>
</TR>
</TABLE>
<P>
The final button will exit the debugger.
<P>
The debugger also responds to some single character commands common to many
debuggers:
<TABLE BORDER CELLPADDING="2">
<TR>
<TD>s</TD>
<TD>step into</TD>
</TR>
<TR>
<TD>n</TD>
<TD>step over (next)</TD>
</TR>
<TR>
<TD>c</TD>
<TD>continue</TD>
</TR>
<TR>
<TD>r</TD>
<TD>restart (with same grid)</TD>
</TR>