<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="FontForge.css">
</HEAD>
<BODY id="menued">
<P ALIGN=CENTER>
<IMG SRC="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="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="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="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="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="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="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="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="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="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="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="cvcurveicon.png" WIDTH="26" HEIGHT="26" ALIGN="Middle">
<IMG SRC="cvhvcurveicon.png" WIDTH="25" HEIGHT="26" ALIGN="Middle"><IMG SRC="cvcornericon.png"
WIDTH="26" HEIGHT="26" ALIGN="Middle">
<IMG SRC="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="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="cvspiroG4icon.png" WIDTH="26" HEIGHT="26" ALIGN="Middle">
<IMG SRC="cvspiroG2icon.png" WIDTH="26" HEIGHT="26" ALIGN="Middle">
<IMG SRC="cvspirocornericon.png" WIDTH="26" HEIGHT="26" ALIGN="Middle">
<IMG SRC="cvspirolefticon.png" WIDTH="26" HEIGHT="26" ALIGN="Middle">
<IMG SRC="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="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="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="cvrulericon.png" WIDTH="26" HEIGHT="26" ALIGN="Middle">The
<A NAME="ruler">ruler</A> tool
</H3>
<P>
<IMG SRC="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="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="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="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="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="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="Eperspective.png" WIDTH="154" HEIGHT="361" ALIGN="Right"><IMG SRC="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="cvrecticon.png" WIDTH="26" HEIGHT="26" ALIGN="Middle">
<IMG SRC="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="cvpolyicon.png" WIDTH="26" HEIGHT="26" ALIGN="Middle">
<IMG SRC="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="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="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="ShowGridFit.png" WIDTH="268" HEIGHT="148"><BR CLEAR=ALL>
<H2>
<IMG SRC="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="TTRegisters.png" WIDTH="137" HEIGHT="292"></TD>
<TD><IMG SRC="TTStack.png" WIDTH="137" HEIGHT="292"></TD>
<TD><IMG SRC="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="TTStorage.png" WIDTH="187" HEIGHT="131"></TD>
<TD><IMG SRC="TTCvt.png" WIDTH="198" HEIGHT="200"></TD>
<TD><IMG SRC="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="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>
<TR>
<TD>f</TD>
<TD>step out (finish routine)</TD>
</TR>
<TR>
<TD>k</TD>
<TD>kill the debugger</TD>
</TR>
<TR>
<TD>q</TD>
<TD>kill the debugger</TD>
</TR>
</TABLE>
<P>
The Hints->Debug menu command can also be used to exit the debugger (by
turning off the debug check box), or to restart the debugger with different
values for the point size and resolution. This dlg can also control whether
the fpgm and prep tables are debugged. Usually debugging will start when
execution reaches the instructions associated with this glyph.
<H3>
Debugging composite glyphs
</H3>
<P>
FontForge is not as friendly when debugging composite glyphs as it should
be -- this is influenced by the way truetype works. Suppose you want to debug
the "Atilde" glyph.
<P>
First FontForge will load and grid fit the "A" glyph, points from the "tilde"
will not be displayed and behavior will be exactly the same as if you were
debugging a stand alone "A".
<P>
Then FontForge will load and grid fit the "tilde" glyph, and now points from
the "A" glyph will not be visible. The point numbers on the "tilde" will
be the same as they are in a stand-alone "tilde" (whereas in a true
representation of "Atilde", the points numbering in the "tilde" component
will be offset by the number of points in the "A" component). The "tilde"
may appear oddly positioned, this is caused by rounding: the "tilde" will
usually be translated, and this translation will usually be rounded to fit
the pixel grid. The width line will show the width of the "tilde" and not
of the "Atilde".
<P>
Finally FontForge will execute any instructions in the composite itself,
now all sub-components will be displayed, and all points will be numbered
as they should be.
<P>
Several words of caution:
<UL>
<LI>
If a component, or the composite as a whole, has no instructions then FontForge
will not debug that piece (there will be nothing to debug).
<LI>
FontForge does not translate references which do point matching properly
until the entire glyph has been loaded.
</UL>
<TABLE ALIGN=RIGHT>
<TR>
<TD><IMG SRC="mmcharview.png" WIDTH="431" HEIGHT="435" ALT='Intermediate version of "A" showing two other styles in background'><BR>
Intermediate version of "A" with two other styles in the background</TD>
</TR>
</TABLE>
<H2>
<A NAME="MM">Multiple Master View</A>
</H2>
<P>
In a multiple master font the <A HREF="mmmenu.html#outline-char">MM</A> menu
gives you control over which style of the font you are editing. It will also
allow you to display any (or all) of the other styles in the background.
Although the menu is called "MM" it applies equally to Apple's distortable
fonts ("*var" fonts, like Skia).<BR CLEAR=ALL>
<H2>
<A NAME="multilayer">Multiple Layer Editing</A>
</H2>
<P>
<IMG SRC="charview-multilayer.png" WIDTH="348" HEIGHT="571" ALIGN="Right">If
you wish to <A HREF="multilayer.html">edit type3 fonts</A>, and you have
configured FontForge correctly, the FontForge can display a glyph broken
down into a series of strokes and fills and allow you to edit each one.
<P>
<P ALIGN=Center>
-- <A HREF="fontview.html">Prev</A> -- <A HREF="overview.html">TOC</A> --
<A HREF="bitmapview.html">Next</A> --
</DIV>
</BODY></HTML>
distrib
>
Mageia
>
5
>
i586
>
media
>
core-release
>
by-pkgid
>
6b465285c9860724a695461ac61807f4
>
files
>
277
