Disable Elliptical Arcs ?

[nanjizal]

Dan, hi is it possible to add an option to NOT optimise for elilptical Arcs. could not seem to see the relevant code, or point me towards how you do that! Probably simplest for me to try the original opentype.js ! :) Cheers, and thanks for getting back to me on the other repo so quick.

[nanjizal]

Are you using the 'maker' project for the ellipse arc, looks very impressive. I can implement ellipse arc I had one in justTriangles or ellipse atleast, and I have arc already, but I was worried it would mess up a fill engines but perhaps I should give it a go tomorrow, likely changing this in your project is not easy and not worth it. Will close. PS If you need any remote developers on Maker would love to try to help out looking for work even if only on demos but I might be inclined to port it to Haxe :).

[danmarshall]

I do believe that using straight opentype.js will be the best in your scenario. You will not have to deal with arcs (elliptical or circular 😉) This google-font-to-svg-path repo is primarily just here for the web page UI. There is one other major feature, which is to union the paths. This is for script fonts that overlap each character, and where you may want one continuous path. Maker.js does this work. Maker.js is always open for contributors! Take a look at the projects page to see if anything there interests you. There's a wide range of stuff to do. Or, it even helps if you just create a new parametric shape. Like an arrow library for example.

[nanjizal]

danmarshall I noticed that svg allows you to reduce script sizes by removing letters that repeat if your aim is to reduce file sizes you could implement that, I added recursion to my number storing class, so it was not so hard to implement parsing missing letters in my justPath package. https://github.com/nanjizal/Trilateral/blob/master/src/trilateral/justPath/StoreF6.hx#L41

Ellipse Arc is really nasty overhead to implement, I ported one but needs tweaking some more before it works properly. https://github.com/nanjizal/Trilateral/blob/master/src/trilateral/geom/EllipseArc.hx

But it seems like it's heavy and complex to process. So on consideration - my initial request was reasonable, I do think it would be worth providing an option for developers that don't want that overhead and complexity of processing Arcs, it's a kind of messy aspect of SVG I think FXG probably have separate Ellipse for this reason? I did render the font from your 'web page UI' , my code just skipped over the Ellipse commands ( not the 7 segment but the text below and above ). https://nanjizal.github.io/TrilateralBazaar/segmentTest/build/html5/ Recently worked out that I can get FXG data from swf's perhaps something that is interesting for your makers or similar. http://www.realcreation.com/S2F_Converter/ Managed to render some simple paths from FXG: https://nanjizal.github.io/TrilateralBazaar/fxgTest/build/html5/index.html Only had to process Group and a simple Path node to get my Parrot drawing out, and relatively easy to design in flash ( now Animate unless you have old one like me ), I think inkscape may support FXG, and maybe even Blend, what is nice about FXG from swf - is that flash uses Q curves, rather than the C that illustrator etc... use, so often smaller without the designer realising ( often one less coordinate per curve ). I suspect flash originally choose Q's to keep filesizes down in swf for internet.

I should look to contribute to Maker.js, would look good on my CV as it would prove I could do Typescript, and interesting as visual related code, but reluctant to use Typescript, I have to be honest I looked a few times at Typescript and it's not as nice as Haxe. :( But maybe will take a look it's better using ts than js atleast.

[danmarshall]

Hi @nanjizal - to reduce SVG Path data size, I would go with the awesome https://github.com/svg/svgo library. There is also a GUI versionof svgo: https://jakearchibald.github.io/svgomg/

Also, to remove arcs, you can call the unarc function of the https://github.com/fontello/svgpath library.

These are both great libraries, so I didn't want to duplicate their work :)

[nanjizal]

In the end came up with ellipse implementation that works, some converted from perl, but a lot is my original code. Visual tests show correct rendering:

The Metrophobic text was generated using your tool and has arcs now rendering properly ( just outlines converted to triangles, rather than fill ).

Source of Elliptical Arc is here: https://github.com/nanjizal/Trilateral/blob/master/src/trilateral/justPath/EllipseArc.hx It will convert Elliptical Arcs to lines, if you have a need and a suitable place it maybe useful, I can look to move it to typescript, but sounds like there are already solutions.

[dboggs85]

Hey Dan, above you state

There is one other major feature, which is to union the paths. This is for script fonts that overlap each character, and where you may want one continuous path. Maker.js does this work.

Does the screenshot below illustrate what you're talking about? We are looking to convert all text to outline prior to approving artwork and sending it off for print production. Having the image print as shown below would be unacceptable, i.e. the orange inner section of the "a" needs to be black like the rest of the path.

Thanks! Dave

[danmarshall]

Hi @dboggs85 , the union works between one character and another. In your screenshot it seems that the character outline intersects with itself. So this would not be handled. My opinion is that this is a bug within the font itself, but that probably won’t get fixed. I don’t have any code for this “self union” . Perhaps you can try to call combineUnion passing this same object for each model parameter? Let me know if that works, I’d be surprised.

[dboggs85]

Thanks @danmarshall. Fixing this is a little ways down our queue right now but I'll post more when we get to it.

[dboggs85]

Changed fill-rule from :evenodd (top row) to :nonzero (bottom row) and it makes the large "a" outline display properly, but not the small "a". Haven't figured out why yet.

[danmarshall]

@dboggs85 can you contact the font author?

[dboggs85]

Thanks @danmarshall. Our solution needs to programmatically solve this issue across all fonts. I believe (haven't confirmed) this will be a widespread problem within the context of our application so contacting every author whose font exhibits this overlap is not scalable. I wonder if the issue has to do with ellipical arcs or perhaps quadratic Bézier curves vs cubic Bézier curves. I did note that the path makeup ("Q"s and "A"s) of the small "a" outline is different from the path makeup (all "C"s) of the large "a" outline. See below. I converted both text characters using Google font to svg path with the only input difference being font size and weight. Any reason why one would be converted to all cubic Bézier curves and the other converted to elliptical arcs and quadratic Bézier curves?

     d="M 393.92847,97.372441 C 393.92847,99.779111 393.1368,101.71077 391.55347,103.16744 389.97014,104.62411 388.03847,105.35244 385.75847,105.35244 383.3518,105.35244 381.38847,104.62411 379.86847,103.16744 378.34847,101.71077 377.58847,99.779111 377.58847,97.372441 V 66.022441 L 381.19847,49.302441 393.92847,53.482441 387.46847,56.522441 C 387.46847,65.895771 385.3468,74.350771 381.10347,81.887441 376.86013,89.424111 371.0968,95.377441 363.81347,99.747441 356.53013,104.11744 348.26513,106.30244 339.01847,106.30244 329.3918,106.30244 320.77847,103.99077 313.17847,99.367441 305.57847,94.744111 299.5618,88.442441 295.12847,80.462441 290.65827,72.263571 288.36847,63.054111 288.47847,53.716441 288.47833,53.638441 288.47833,53.560441 288.47847,53.482441 288.34711,44.71861 290.36203,36.055737 294.34747,28.249441 294.68847,27.595992 295.04389,26.950168 295.41347,26.312441 300.0368,18.332441 306.33847,12.030774 314.31847,7.407441 322.29847,2.784108 331.2918,0.47244096 341.29847,0.47244096 351.17847,0.47244096 360.0768,2.784108 367.99347,7.407441 375.91013,12.030774 382.18013,18.332441 386.80347,26.312441 391.3561,34.31006 393.80164,43.333456 393.91047,52.535441 393.91869,52.851062 393.92469,53.166736 393.92847,53.482441 Z M 322.48847,86.732441 C 316.91513,83.439111 312.4818,78.879111 309.18847,73.052441 305.89513,67.225771 304.24847,60.702441 304.24847,53.482441 304.24847,46.135774 305.89513,39.580774 309.18847,33.817441 312.4818,28.054108 316.91513,23.494108 322.48847,20.137441 328.0618,16.780774 334.3318,15.102441 341.29847,15.102441 348.26513,15.102441 354.53513,16.780774 360.10847,20.137441 365.6818,23.494108 370.0518,28.054108 373.21847,33.817441 376.38513,39.580774 377.96847,46.135774 377.96847,53.482441 377.96847,60.702441 376.38513,67.225771 373.21847,73.052441 370.0518,78.879111 365.6818,83.439111 360.10847,86.732441 354.53513,90.025771 348.26513,91.672441 341.29847,91.672441 334.3318,91.672441 328.0618,90.025771 322.48847,86.732441 Z"

     d="M 645.30238,83.40243 H 633.60238 A 95.839,95.839 0 0 1 630.42238,108.49843 81.757,81.757 0 0 1 623.55238,125.85243 Q 613.50238,144.60243 596.10238,155.55243 A 71.652,71.652 0 0 1 559.52238,166.45943 85.96,85.96 0 0 1 556.80238,166.50243 74.966,74.966 0 0 1 529.99638,161.78643 70.047,70.047 0 0 1 517.50238,155.55243 Q 500.10238,144.60243 490.05238,125.85243 A 85.101,85.101 0 0 1 480.48338,93.53443 104.695,104.695 0 0 1 480.00238,83.40243 87.993,87.993 0 0 1 484.17338,55.97643 79.041,79.041 0 0 1 490.95238,40.80243 Q 501.90238,21.90243 520.65238,10.95243 539.40238,0.00243027 562.80238,0.00243027 A 85.655,85.655 0 0 1 589.85838,4.1734303 77.071,77.071 0 0 1 604.80238,10.95243 Q 623.40238,21.90243 634.35238,40.80243 645.30238,59.70243 645.30238,83.40243 Z M 562.80238,139.50243 A 54.374,54.374 0 0 0 579.80738,136.91143 48.536,48.536 0 0 0 590.10238,132.15243 Q 602.10238,124.80243 609.00238,112.05243 A 57.709,57.709 0 0 0 615.71638,88.53443 69.92,69.92 0 0 0 615.90238,83.40243 65.061,65.061 0 0 0 613.74938,66.38043 55.209,55.209 0 0 0 609.00238,54.45243 Q 602.10238,41.70243 590.10238,34.35243 A 50.24,50.24 0 0 0 566.57538,27.11743 61.254,61.254 0 0 0 562.80238,27.00243 52.581,52.581 0 0 0 542.30838,30.96643 50.453,50.453 0 0 0 535.65238,34.35243 Q 523.50238,41.70243 516.45238,54.45243 A 56.632,56.632 0 0 0 509.73938,76.47943 69.651,69.651 0 0 0 509.40238,83.40243 61.671,61.671 0 0 0 512.02038,101.61043 54.759,54.759 0 0 0 516.45238,112.05243 Q 523.50238,124.80243 535.65238,132.15243 A 51.238,51.238 0 0 0 561.86738,139.49543 60.685,60.685 0 0 0 562.80238,139.50243 Z M 614.70238,150.30243 V 104.40243 L 620.40238,72.60243 645.30238,83.40243 V 150.30243 A 16.422,16.422 0 0 1 644.37838,155.90843 14.392,14.392 0 0 1 640.95238,161.25243 Q 636.60238,165.60243 630.00238,165.60243 A 16.422,16.422 0 0 1 624.39638,164.67843 14.392,14.392 0 0 1 619.05238,161.25243 Q 614.70238,156.90243 614.70238,150.30243 Z"

[danmarshall]

@dboggs85 - can you share the font and the parameters you used to create a test case?

[dboggs85]

@danmarshall, sure thing. I selected Comfortaa as the font along with the size and weight stated in the file name, typed in "coalesce" and converted, then "artstream™" and converted. Attached, resulting svg files.

coalesce_comfortaa_300fs_700wt_ToHalfPixel_TextFile.txt artstream_comfortaa_190fs_500wt_ToHalfPixel_TextFile.txt

[dboggs85]

@danmarshall, I must have done something in Inkscape that ultimately changed the large "a" outline from the "coalesce" file above, i.e., changed the path data to somehow make all the nodes cubic Bézier curves. I'm trying to recreate my steps but so far I have no clue what I did. Don't want to waste your time so please don't feel like you need to respond unless you think there may be something to my assumption that cubic Bézier curves seem to work while quadratic Bézier curves and/or elliptical arcs don't. Meanwhile, I'll post again if I discover how I inadvertently converted the nodes.

[dboggs85]

I've got it backwards above @danmarshall. Think it's the cubic Bézier curves that are causing the problem. The first path data below with the original exported node types from your website and the second path data for the "a" outline where I somehow changed node types to cubic Bézier curves.

M 645.30238,83.40243 H 633.60238 A 95.839,95.839 0 0 1 630.42238,108.49843 81.757,81.757 0 0 1 623.55238,125.85243 Q 613.50238,144.60243 596.10238,155.55243 A 71.652,71.652 0 0 1 559.52238,166.45943 85.96,85.96 0 0 1 556.80238,166.50243 74.966,74.966 0 0 1 529.99638,161.78643 70.047,70.047 0 0 1 517.50238,155.55243 Q 500.10238,144.60243 490.05238,125.85243 A 85.101,85.101 0 0 1 480.48338,93.53443 104.695,104.695 0 0 1 480.00238,83.40243 87.993,87.993 0 0 1 484.17338,55.97643 79.041,79.041 0 0 1 490.95238,40.80243 Q 501.90238,21.90243 520.65238,10.95243 539.40238,0.00243027 562.80238,0.00243027 A 85.655,85.655 0 0 1 589.85838,4.1734303 77.071,77.071 0 0 1 604.80238,10.95243 Q 623.40238,21.90243 634.35238,40.80243 645.30238,59.70243 645.30238,83.40243 Z M 562.80238,139.50243 A 54.374,54.374 0 0 0 579.80738,136.91143 48.536,48.536 0 0 0 590.10238,132.15243 Q 602.10238,124.80243 609.00238,112.05243 A 57.709,57.709 0 0 0 615.71638,88.53443 69.92,69.92 0 0 0 615.90238,83.40243 65.061,65.061 0 0 0 613.74938,66.38043 55.209,55.209 0 0 0 609.00238,54.45243 Q 602.10238,41.70243 590.10238,34.35243 A 50.24,50.24 0 0 0 566.57538,27.11743 61.254,61.254 0 0 0 562.80238,27.00243 52.581,52.581 0 0 0 542.30838,30.96643 50.453,50.453 0 0 0 535.65238,34.35243 Q 523.50238,41.70243 516.45238,54.45243 A 56.632,56.632 0 0 0 509.73938,76.47943 69.651,69.651 0 0 0 509.40238,83.40243 61.671,61.671 0 0 0 512.02038,101.61043 54.759,54.759 0 0 0 516.45238,112.05243 Q 523.50238,124.80243 535.65238,132.15243 A 51.238,51.238 0 0 0 561.86738,139.49543 60.685,60.685 0 0 0 562.80238,139.50243 Z M 614.70238,150.30243 V 104.40243 L 620.40238,72.60243 645.30238,83.40243 V 150.30243 A 16.422,16.422 0 0 1 644.37838,155.90843 14.392,14.392 0 0 1 640.95238,161.25243 Q 636.60238,165.60243 630.00238,165.60243 A 16.422,16.422 0 0 1 624.39638,164.67843 14.392,14.392 0 0 1 619.05238,161.25243 Q 614.70238,156.90243 614.70238,150.30243 Z

M 645.78313,150.78 C 645.78313,155.18 644.33313,158.83 641.43313,161.73 638.53313,164.63 634.88313,166.08 630.48313,166.08 626.08313,166.08 622.43313,164.63 619.53313,161.73 616.63313,158.83 615.18313,155.18 615.18313,150.78 V 104.88 L 620.88313,73.08 645.78313,83.88 H 634.08313 C 634.15007,93.02814 632.89305,102.13785 630.35113,110.926 628.77663,116.26293 626.65958,121.42453 624.03313,126.33 617.33313,138.83 608.18313,148.73 596.58313,156.03 585.00684,163.26155 571.61528,167.05773 557.96613,166.977 557.73847,166.97889 557.5108,166.97989 557.28313,166.98 546.05305,167.10788 534.94325,164.65842 524.80813,159.82 522.46517,158.68313 520.18671,157.41787 517.98313,156.03 506.38313,148.73 497.23313,138.83 490.53313,126.33 485.00274,115.87584 481.70086,104.38821 480.83613,92.593 480.59859,89.69476 480.48082,86.78795 480.48313,83.88 480.39726,73.77488 482.06986,63.73185 485.42613,54.2 487.03539,49.72126 489.04589,45.39703 491.43313,41.28 498.73313,28.68 508.63313,18.73 521.13313,11.43 533.63313,4.13 547.68313,0.47999999 563.28313,0.47999999 578.88313,0.47999999 592.88313,4.13 605.28313,11.43 617.68313,18.73 627.53313,28.68 634.83313,41.28 641.51492,52.93174 645.24114,66.04272 645.68613,79.467 645.751,80.9371 645.78334,82.40846 645.78313,83.88 Z M 536.13313,132.63 C 528.03313,127.73 521.63313,121.03 516.93313,112.53 516.71284,112.13202 516.49749,111.73132 516.28713,111.328 511.9474,102.83731 509.74893,93.41452 509.88313,83.88 509.88313,73.08 512.23313,63.43 516.93313,54.93 521.63313,46.43 528.03313,39.73 536.13313,34.83 544.23313,29.93 553.28313,27.48 563.28313,27.48 573.48313,27.48 582.58313,29.93 590.58313,34.83 598.58313,39.73 604.88313,46.43 609.48313,54.93 614.08313,63.43 616.38313,73.08 616.38313,83.88 616.38305,84.21001 616.38771,83.55002 616.38313,83.88 616.38489,93.52531 614.0109,104.01347 609.48313,112.53 604.88313,121.03 598.58313,127.73 590.58313,132.63 582.58313,137.53 573.48313,139.98 563.28313,139.98 553.28313,139.98 544.23313,137.53 536.13313,132.63 Z

[dboggs85]

I am able to delete nodes and connect them in the right spot to get rid of the overlay in the cubic Bézier curve path above which makes it display properly. Still have no idea how I changed the original path data to cubic Bézier curves to begin with however.

M 614.70313,139.19044 C 614.70313,139.19044 607.70313,148.25 596.10313,155.55 584.52684,162.78155 571.13528,166.57773 557.48613,166.497 557.25847,166.49889 557.0308,166.49989 556.80313,166.5 545.57305,166.62788 534.46325,164.17842 524.32813,159.34 521.98517,158.20313 519.70671,156.93787 517.50313,155.55 505.90313,148.25 496.75313,138.35 490.05313,125.85 484.52274,115.39584 481.22086,103.90821 480.35613,92.112998 480.11859,89.214758 480.00082,86.307948 480.00313,83.399998 479.91726,73.294878 481.58986,63.251848 484.94613,53.719998 486.55539,49.241258 488.56589,44.917028 490.95313,40.799998 498.25313,28.199998 508.15313,18.249998 520.65313,10.949998 533.15313,3.649998 547.20313,0 562.80313,0 578.40313,0 592.40313,3.649998 604.80313,10.949998 617.20313,18.249998 627.05313,28.199998 634.35313,40.799998 641.03492,52.451738 644.76114,65.562718 645.20613,78.986998 645.271,80.457098 645.30334,81.928458 645.30313,83.399998 V 150.3 C 645.30313,154.7 643.85313,158.35 640.95313,161.25 638.05313,164.15 634.40313,165.6 630.00313,165.6 625.60313,165.6 621.95313,164.15 619.05313,161.25 616.15313,158.35 614.70313,154.7 614.70313,150.3 V 139.19044 M 535.65313,132.15 C 527.55313,127.25 521.15313,120.55 516.45313,112.05 516.23284,111.65202 516.01749,111.25132 515.80713,110.848 511.4674,102.35731 509.26893,92.934518 509.40313,83.399998 509.40313,72.599998 511.75313,62.949998 516.45313,54.449998 521.15313,45.949998 527.55313,39.249998 535.65313,34.349998 543.75313,29.449998 552.80313,26.999998 562.80313,26.999998 573.00313,26.999998 582.10313,29.449998 590.10313,34.349998 598.10313,39.249998 604.40313,45.949998 609.00313,54.449998 613.60313,62.949998 615.90313,72.599998 615.90313,83.399998 615.90305,83.730008 615.90771,83.070018 615.90313,83.399998 615.90489,93.045308 613.5309,103.53347 609.00313,112.05 604.40313,120.55 598.10313,127.25 590.10313,132.15 582.10313,137.05 573.00313,139.5 562.80313,139.5 552.80313,139.5 543.75313,137.05 535.65313,132.15 Z

[dboggs85]

The inner path direction was the culprit. Selecting "Break Apart" from the Path menu, then highlighting the inner path and selecting "Reverse" from the Path menu, then highlighting the two paths and selecting "Combine" from the Path menu, did the trick.