Reducing cubic bezier to quadratic

Discussions about the development of TrueType and OpenType fonts.
Post Reply
jamadagni
Posts: 71
Joined: Fri Jun 17, 2011 4:10 am
Location: 11 N 78 E

Reducing cubic bezier to quadratic

Post by jamadagni »

Hello.

FC has to convert cubic beziers to a series of quadratics when it imports postscript-based vector images. In general, this conversion is only an approximation as most cubic beziers are not exactly representable by one or even more than one quadratic. http://fontforge.org/bezier.html#ps2ttf discusses the problem and notes that by splitting at even times along the cubic, one can achieve conciseness because one can avoid specifying the on-curve point halfway between two off-curve points. (The Fontforge author says he cannot prove it but it is elementary enough if one understands the de Casteljau algorithm.)

Now my question is, what is an appropriate error bound that can be permitted as tolerance for the reduction from cubic to quadratic, given that we are handling splines defined in terms of integer coordinates scaled to an em-grid?

Specifically what error bound does FC use when importing postscript outlines?

Thanks!

(P.S.: I hope I have posted this in the appropriate sub-forum as it concerns the internals of fonts.)
Shriramana Sharma
Erwin Denissen
Moderator
Moderator
Posts: 11107
Joined: Fri Oct 04, 2002 12:41 am
Location: Bilthoven, The Netherlands
Contact:

Re: Reducing cubic bezier to quadratic

Post by Erwin Denissen »

There is no easy answer. You don't want to end up with too many points, but you do want an accurate conversion. I think FontCreator does a nice job, but there is always room for improvement.
Erwin Denissen
High-Logic
Proven Font Technology
jamadagni
Posts: 71
Joined: Fri Jun 17, 2011 4:10 am
Location: 11 N 78 E

Re: Reducing cubic bezier to quadratic

Post by jamadagni »

Erwin Denissen wrote:There is no easy answer. You don't want to end up with too many points, but you do want an accurate conversion. I think FontCreator does a nice job, but there is always room for improvement.
Hi Erwin and thanks for your reply. I was not trying to comment on the quality of FC's conversion of cubics to quadratics (I haven't tested it specifically) but was only wondering if I could know what error bound it uses. Is it possible for you to share that bit of info? Thanks.
Shriramana Sharma
Erwin Denissen
Moderator
Moderator
Posts: 11107
Joined: Fri Oct 04, 2002 12:41 am
Location: Bilthoven, The Netherlands
Contact:

Re: Reducing cubic bezier to quadratic

Post by Erwin Denissen »

It is not just a number, as it involves a formula. But if it helps, the constant used in the formula is 2.
Erwin Denissen
High-Logic
Proven Font Technology
jamadagni
Posts: 71
Joined: Fri Jun 17, 2011 4:10 am
Location: 11 N 78 E

Re: Reducing cubic bezier to quadratic

Post by jamadagni »

Erwin Denissen wrote:It is not just a number, as it involves a formula. But if it helps, the constant used in the formula is 2.
H
Hi thanks -- I have the de Casteljau formula implemented, no problem. From your statement above, I will assume that 2 em units is the tolerance used. Thanks.
Shriramana Sharma
michel22
Posts: 12
Joined: Sat Jan 09, 2016 12:19 pm

Re: Reducing cubic bezier to quadratic

Post by michel22 »

Hi

i read in the changelog that fontcreator support copy ( inkscape / illustrator) / paste ( fontcreator). Even the sentences speak about SVG i really think there ll be differences in clipboard between the copy fonctionnalities when using Inkscape or Illustrator to paste inside fontcreator !! Illustrator and all Adobe software choose after use microsoft OLE to use their own implementation protocol beetween their own tools ( CC support link ) . Adobe documentation is really great about use illustrator work in firework using export/import or copy/paste beetwwen the two software .

For illustrator / inkscape which are the behaviour of fontcreator about :
- mathematic algo bezier: cubic "2 control point" ( SVG, illustrator) / quadratic "1 control point" (ttf) ?
- svg path : absolute( coordinate) / relative ( distance) ?
- last svg version number supported ?
- glyph in fill mode only
-the direction of the inner/outer outline glyph inside vector tool ?
-alignement : position , scale of of original glyph ?
-resolution , boundingbox

wich is the best result / best-easy workflow for font when mix thoses options above ?
-copy or import
-inkscape or illiustrator


fontcreator support copy paste vector from vector drwing tool like inskscape and illustrator and also import.
It is strange the last line contain Scalable Vector Graphic but no extension appear after like ( *.svg , *.svgz ) .
fc_importnoSVG.png
fc_importnoSVG.png (18.32 KiB) Viewed 25049 times

It is really nice to let end user test each new version of fontcreator since i already test previous version !!!


Regard's

NB : in a font a "o" glyph ="circle" use same number of control points so quadratic ll have more points and both could be rasterize flatten or outline.
object type Text is convert to raster using " Rasterize" in photoshop and Create Outline in illustrator !!

adobe illustrator grid and font setting 1 , pixel perfection , artboard, artboard & font
Last edited by michel22 on Sun Sep 18, 2016 8:48 pm, edited 1 time in total.
michel22
Posts: 12
Joined: Sat Jan 09, 2016 12:19 pm

Re: Reducing cubic bezier to quadratic

Post by michel22 »

Hi
i test the software here some feedback :

-the glyph i use come from ttf file available on the interrnet for free .
-FC when edit it show in bottom panel 54 points ( Square points along path and Circle handle)
---- 2 continuous points can have 2 or 3 continuous handles exist and can be sometines link each others
.....the validation tool see to confirm some issues
------------redundant => need to remove the "point" ( square)
------------off curve extreme coordinate => need to replace "1 point" by "2 points " ( square and circle/handle)
.....optimize remove some "points" SCS ->C and CC->C
-copy twitter glyph from FC to AI show 33 points ( call anchor in AI appear like suqres along path,
......each square have with no exception 2 circle handles , no circle handles are share beetween square or circle )
......in zoom 6400% on the 3 squares are now 2 suqres
......the shape is counter clockwise ( after use custom brush orwidth profile)
.....paste the glyph from AI to FC show that position and scale must be done manually !
I don't succeed to find how to know in fontcreator the external and internal direction of "path outline" ( clock or counter clockwise ) .
I think have information about direction for each segment ( inner outer) is the most import ant thing and share the point of view of this post .


Two questions :
--Is there a way to see visualy direction arrow in Fontcreator ?
--Can i succeed to copy glyph in AI and paste in FC without need to manualy resize scale change position in FC ?

Regard's
Last edited by michel22 on Sun Sep 18, 2016 6:25 pm, edited 1 time in total.
Bhikkhu Pesala
Top Typographer
Top Typographer
Posts: 9869
Joined: Tue Oct 29, 2002 5:28 am
Location: Seven Kings, London UK
Contact:

Re: Reducing cubic bezier to quadratic

Post by Bhikkhu Pesala »

michel22 wrote:I don't succeed to find how to know in fontcreator the external and internal direction of "path outline" ( clock or counter clockwise )
The selected contour's direction is shown in the hintline.
Contour Direction.png
Contour Direction.png (3.24 KiB) Viewed 25029 times
My FontsReviews: MainTypeFont CreatorHelpFC15 + MT12.0 @ Win 10 64-bit build 19045.2486
michel22
Posts: 12
Joined: Sat Jan 09, 2016 12:19 pm

Re: Reducing cubic bezier to quadratic

Post by michel22 »

Hi

Thank's for your feedback .......

I understand now after test Font Creator that
-one click outside shape convert all shape to edit points mode
-cursor inside close shape convert the mouse cursor to XY translate icon and higlight in red the shape and show us the direction in bottom side .

This is not the same behaviour as illustrator .
It would be nice to be able to see the baseline when viewing the glyph overview. The metric and reference lines is only available when in the glyph edit window (can it contain many "glyph" ? ).

The useful question should be instead read mode to have write mode ....so Is there a way to change the direction clock for each shape that can be contain inside a character in Fontcreator ?

When I see Inkscape font plugin ( video) I hope Fontcreator is the next tool to convert svg to font library .

Regard's
Last edited by Bhikkhu Pesala on Sun Sep 18, 2016 7:18 pm, edited 1 time in total.
Reason: Edited for greater clarity
Bhikkhu Pesala
Top Typographer
Top Typographer
Posts: 9869
Joined: Tue Oct 29, 2002 5:28 am
Location: Seven Kings, London UK
Contact:

Re: Reducing cubic bezier to quadratic

Post by Bhikkhu Pesala »

michel22 wrote:one click outside shape convert all shape to edit points mode
It takes a double-click to toggle between points mode and contour mode. I think your mouse is defective, which would explain the duplicate posts.
michel22 wrote:The metric and reference lines is only available when in the glyph edit window (can it contain many "glyph" ? ).
More than one glyph can be shown by using the Comparison Toolbar, but only one glyph can be edited at a time.
michel22 wrote:Is there a way to change the direction clock for each shape that can be contain inside a character in Fontcreator ?
There's a Change Direction icon on the toolbar. Select all contours to change their directions all at once.
michel22 wrote:I hope Fontcreator is the next tool to convert svg to font library .
Drag and drop can be used to import multiple images at once. SVG, PDF, or AI images will import very quickly. All you need to do is ensure that the names are in alphabetical order, e.g. from A.svg to Z.svg then drop them all into the "A" glyph in the glyph overview.
My FontsReviews: MainTypeFont CreatorHelpFC15 + MT12.0 @ Win 10 64-bit build 19045.2486
michel22
Posts: 12
Joined: Sat Jan 09, 2016 12:19 pm

Re: Reducing cubic bezier to quadratic

Post by michel22 »

Hi Thank's for your reply

A) comparison tool bar
The place is not in the visual menu but under view->Toolbazr ->comparision (F11)

B) Direction icon
fc_clockDirection.png
fc_clockDirection.png (18.42 KiB) Viewed 25014 times
C) event behaviour
Yes ...i use a mutitouch wacom tablet with a pen so my mouse button and keyboard key don't have the default OS behaviour




Since fontcreator fullfilled my expectation i have to test now how some svg files icon are manage by Fontcreator during import of those svg files ?
I think the Grid inside fontcreator should becreate in illustrator and inkscape to draw the glyph ?
I already find some information about illustrator but need to remember where i found them ?

Layout for Character

Horizontal reference point ( x=? , y=0)
0
1000

vertical reference point ( y =? , x=0)
WinAscent 1920
CapHeight 1830
x-Height 1760
Baseline 0
windescent 200
regard's
Erwin Denissen
Moderator
Moderator
Posts: 11107
Joined: Fri Oct 04, 2002 12:41 am
Location: Bilthoven, The Netherlands
Contact:

Re: Reducing cubic bezier to quadratic

Post by Erwin Denissen »

michel22 wrote:Since fontcreator fullfilled my expectation i have to test now how some svg files icon are manage by Fontcreator during import of those svg files ?
I think the Grid inside fontcreator should becreate in illustrator and inkscape to draw the glyph ?
I already find some information about illustrator but need to remember where i found them ?
With the release of FontCreator 10.1 we've made several improvements to the import and positioning of vector based images. You can change several settings here:
vectorimportoptions.png
vectorimportoptions.png (6.26 KiB) Viewed 24714 times
Erwin Denissen
High-Logic
Proven Font Technology
michel22
Posts: 12
Joined: Sat Jan 09, 2016 12:19 pm

Re: Reducing cubic bezier to quadratic

Post by michel22 »

Hi 2 years after my question i post here new questions :
1) Does Fontcreator support export to this format : eot ttf svg woff woff2 ? .
2) i import a svg file doing copy paste from illustrator CS6 and last version of Fontcreator here the scale after copy paste svg inside fontcreator !! Is there a way to make svg path fit and scale the whole area glyph bounding / viewabel / rendering area box ? Does this work must be done in illustrator ? I start by open fontawesome to avoid any setting properties to define ....
font_creator_copypaste_svg_illustrator.png
font_creator_copypaste_svg_illustrator.png (97 KiB) Viewed 22340 times
3) Does Fontcreator has a tool to convert line to stroke ? If not what is the best easy tool to do that ?
Fontcreator_line2stroke.png
Fontcreator_line2stroke.png (139.7 KiB) Viewed 22336 times
Erwin Denissen
Moderator
Moderator
Posts: 11107
Joined: Fri Oct 04, 2002 12:41 am
Location: Bilthoven, The Netherlands
Contact:

Re: Reducing cubic bezier to quadratic

Post by Erwin Denissen »

michel22 wrote: Sun Nov 04, 2018 3:30 pm 1) Does Fontcreator support export to this format : eot ttf svg woff woff2 ? .
FontCreator exports your font as ttf otf woff and woff2. The other two formats are not supported as those are no longer needed as all web browsers support woff.
michel22 wrote: Sun Nov 04, 2018 3:30 pm 2) i import a svg file doing copy paste from illustrator CS6 and last version of Fontcreator here the scale after copy paste svg inside fontcreator !! Is there a way to make svg path fit and scale the whole area glyph bounding / viewabel / rendering area box ?
You have to adjust the settings in Options -> Import. Then you will be able to copy and paste between FontCreator and Illustrator.

It is best to first set the Font Export settings for TrueType/OpenType to CFF based outlines.
michel22 wrote: Sun Nov 04, 2018 3:30 pm 3) Does Fontcreator has a tool to convert line to stroke ? If not what is the best easy tool to do that ?
FontCreator has the join contours feature, but it might be better to first ensure the outline is made correctly in Illustrator.
Erwin Denissen
High-Logic
Proven Font Technology
michel22
Posts: 12
Joined: Sat Jan 09, 2016 12:19 pm

Re: Reducing cubic bezier to quadratic

Post by michel22 »

Can i have more information howto set the value panel ( tool -> options -> import) during import using fontcreator ( edit paste ) refer to svg size position in illustrator and final position in glyph area in fontcreator ( value take from fontawesome placement ( position size) ?
4) i import in illustrator using file in place then i copy all in illustrator and paste in fontcreator .
5) Howto know pixel/ em in illustrator ? theaxe seem inverted beetween AI and FC !!
i test the value in FC to have the svg in AI appear right but it is only after try many value . There must be a logic behind this value when compute them that let me enter the correct value !!!
6) what is the unit of axes use by FC ?
7) what is the name of the bounding box arround copy glyph in FC ?
8)For each glyph area design zone , how many independant shape (i mean not connected ) is supported by FC or Font speciication file format type ?

( the icon must be redrawn in AI to have more "width" ..and keep only the leaf so need to remove background fill circle) -160 0 -120 seem good but the left bottom corner is not on the (0,windescent) coordinate !!
windescent is above the Baseline horizontal line and seem -70
Attachments
Fontcreator_3shapes-in-a-glyph.jpg
Fontcreator_3shapes-in-a-glyph.jpg (13.99 KiB) Viewed 22323 times
fontcreator_test-import-value.png
fontcreator_test-import-value.png (57.55 KiB) Viewed 22324 times
transform_AI-to-FC.png
transform_AI-to-FC.png (83.99 KiB) Viewed 22325 times
Post Reply