Friday, January 30, 2015

Combining paths to form one glyph

I have made this post to explain one issue with the convertToSvgFont-extension. Here I have some paths define the glyphs aABb. First I will show what happens IF I DON'T combine (Ctrl+K) all paths belonging to one glyph. When I select all paths I can see the bounding boxes (dotted lines). Each bounding box will be sorted by its minimum x position and placed as a path into the glyphs in the text-string. The FontForge print screen is shown and we have clearly got the wrong thing. Both outer and inner paths is regarded as separate glyphs.
Now we try something smarter: Combining (Ctrl+K) all paths belonging to one glyph. Now when we select all paths only four bounding boxes is visible and we have four glyphs defined correctly in FontForge.

Read more on creating fonts.

Direction of paths when designing outline fonts

I know I read about this in the FontForge tutorial, but I cannot remember or find where. You should be careful with the direction of your paths when designing them. Here I have tested with different glyphs having outer and inner paths. Under each path I have written which direction the outer and inner paths have. For the capital A (which have the correct directions) I have also marked them with red arrows to better visualize what I am trying to say. 
All the other glyphs end up with black holes when I opened the .svg in FontForge. If I tried to generate the font and install it the holes seemed to be correct, though, but I'd recommend to use the preferred directions, just in case.

Path - > Reverse help you change the directions.
You can use arrows as start/end markers on the strokes to visualize the directions or you can use the extension Visualize Path -> Number nodes.

Read more on creating fonts.

Wednesday, January 21, 2015

Extension to simplify font-creating with Inkscape

I previously posted a simplified solution for using Inkscape to paste multiple svg paths into svg glyphs to create an svg font which again could be converted to an ttf font using FontForge. I have sofisticated this process (pretty much I'd say) and here comes the new recipe. It still has some issues to work out, but I find it presentable now. Thanks to cleversomeday getting me started by showing that it was possible to create fonts with Inkscape and for being an active test-user so that I am able to discover bugs to fix.

So - we start with the svg file fontStarter. This file already have some example paths. Play with these or remove them to put your own paths in. The example paths show a single line font, but this extension would work also for more "normal" outline fonts. 

  • Design or paste your paths here and make sure they rest on the baseline. 
  • You may move the other guides, but keep the baseline where it is. 
  • The paths will be sorted by the minimum x-position of their bounding boxes so the glyph order will be defined by this.
  • Make sure the paths are not grouped.
  • If two or more paths build one glyph (like in the character "i"), make sure you combine these paths (Ctrl+K) to one before running the extension. Or else you will have the dot in one character and the stem in the next and it will all be corrupted.
  • If the boundingbox of one path stretches to the left of the path that is supposed to be the previous glyph you will have problems. Typically the descender of a j extening to the left og the previous i. Fix this by separating these paths so that the minimum x-position fits the path order. 
  • If you want a single line open path font: Be aware of paths you want to keep closed if they contain straight lines: make sure the path is closed before you start. Or else it will not open at the correct places when you use the re-open path extension.
  • If you are making a "normal" outline font make sure the outer path is going clockwise and the inner path(s) are counterclockwise or else FontForge will do strange things.
  • I've seen that some special characters do not work very well so that will be work in progress. A temporary fix will be to design the paths with special characters at the end (highest x-positions) and let the text-string not contain these characters. Then after running the extension you will find glyphs in the svg code without a unicode defined. Add the unicode you want there or define it in FontForge. Doubleclick the glyphs marked with a red questionmark and choose Element - Glyph Info. Write the character if possible or the unicode "u+" and unicodenumber. In the latter case press the Select from Value button to fill in the rest. Here is one table of specialcharacters and their unicode.
  • Download convertToSvgFont.inx and Place it in the \Inkscape\share\extension folder. Restart Inkscape and you will find the extension Typography-> Convert selected paths to svg-font

  • Write the glyphorder as a string into the extension or copy/paste it from the textstring prepared in the fontstarter file. Name your font (can be edited in FontForge).
  • The extension will: 
    • order the paths according to the minimum x-position and link one by one to the glyphs in the string provided to the extension
    • the paths will be maximized within the svg-page 
    • and flipped upside down as it turns out that is how it works
    • if you are creating a single line open path font the paths to be kept closed is prepared to tolerate the re-opening process. Paths ending with a curve will have the first node copied to the last. Paths ending with straight line will have the last line curved to trick the object to path function to leave the path closed after the re-opening process.
    • All paths will be closed as the ttf demands closed paths as discussed before. You can choose whether you want the glyphs to start at zero at the bounding box or move zero to the maximum of the bounding box of the previous glyph. This will help you get the left bearing a quickstart if you do not want to spend a lot of time on kerning in FontForge.
To verify that the extension did its job and that you have followed all the steps correctly:
  • Go to Edit > XML Editor
  • Locate the svg:defs > svg:font > svg:glyph
  • The first glyph should have a parameter d as blank (this is the space-glyph)
  • For the next glyphs in the list: Look for a defined path (text-string starting with M and then numbers and some other letters as shown in the red box below).

Now save the svg-file and open it in the newest version of FontForge.

  • Adjust the right bearing by selecting all glyphs, Metrics - > Set Rbearing. Set the Rbearing to zero if you want the glyphs to attach.
  • Adjust the space glyph (first with an cross). Drag the vertical bar to set the width of the space glyph (for example the same width your a-glyph).
  • To get baseline at 0: Select all glyphs Ctrl+A and go to Elemtents - Transformations - Transform - Move Y -200
  • You can edit the name of your font in Element -> Font info
  • File -> Generate Font
  • Some errors may be ignored - just continue. And you have your own font.
  • Doublclick the .ttf file and install the font. 
    • PS: Windows/Inkscape issue when reinstalling after editing described here.
  • Restart Inkscape to be able to use the newly installed font.

Here I have installed the font. And written in Inkscape. It is a single line font so it looks weird until I open the paths. First line is text filled, no stroke. Second line is text, no filling, stroke. Third line is text converted to paths, ungrouped and reopened by reopenSingleLineFont
Read more on creating fonts.

Wednesday, January 14, 2015

Convert from double to single line font trix - find centerline

I have several "normal" double line fonts that I'd like to convert to single line fonts. There is many ways to do this. I know of none effective and automatic. Here I show one of the partly automatic, but still pretty ineffective ways I've found to do this and some step-by-step images.

I found this topic in Inkscape forum that discuss how to find the centerline of lines from drawings and the extension interpolate was suggested so I tried it and think it works good. To get it right and to make the single line draw the path one would with handwriting we need to add som manual preparation before using the extension on the glyphs.

So here is an example for the simple glyph c and the more complex d. I have used the font League Script that I found on Lets start with the simple c. Type the letters and convert to path. Turn on stroke and off fill.

Cut the double-path at the positions where the centerline path should start and stop. Break apart the two paths (Ctrl+Shift+K). Reverse one of the two paths to make the start and end point of the two paths match.

Select the two paths and go to Extensions->Generate from path->Interpolate and use steps 1 and do not duplicate endpaths. Apply.

Now I have the centerline as a new path. I have colored it red to better show the result.

Now, lets advance to the d. Here I have a plan to cut the final d-path into three parts; the ring, the top and the tail. The red dots show where I have cut the paths. For each of the three parts I have two paths (inner and outer if you like) that will be interpolated. The closed paths (inner ring and inner top) also have to be cut close to the position of the start and end for the outer paths.

Here I have the interpolated ring.

and the top

and the tail.

Removing the original paths I now have three paths to combine. First I combine the paths using Ctrl+K. Then I think of how I would write this by hand and combine the end nodes of the ring and top according to that

and continue to combine the top with the tail.

Now - the rest of the alphabet...