opentype.js icon indicating copy to clipboard operation
opentype.js copied to clipboard

Path.toPathData and Path.toSVG - X Axis is flipped

Open panayotoff opened this issue 6 years ago • 5 comments

I'm using OpentypeJS to create SVGs for single glyph characters. However, when I draw the SVGs, the glyph is flipped on it's X axis ( upside down ). Even the ./bin/test-render in the repo generates flipped SVG path data.

Expected Behavior

  1. Load font
  2. Get glyph path data with glyph.path.toSVG()
  3. Use the path data to render proper glyph

Current Behavior

  1. Load font
  2. Get glyph path data with glyph.path.toSVG()
  3. Use the path data to render glyph, the glyph is rendered upside down.

Possible Solution

Fix path commands.

Steps to Reproduce (for bugs)

Just run the /bin/test-render from the repo

Context

Your Environment

  • Version used: 0.11.0
  • Font used: Every font

panayotoff avatar Feb 11 '19 13:02 panayotoff

Can confirm!

ryami333 avatar Sep 03 '19 03:09 ryami333

1.2.1 is released with this change 😃

Jolg42 avatar Apr 13 '20 14:04 Jolg42

I will undo in next version as it's breaking the current output, it needs to be a fix for the toSVG command only.

Jolg42 avatar Apr 13 '20 15:04 Jolg42

I think this issue is still outstanding.

alephzero avatar Jun 09 '21 01:06 alephzero

Same error in newest version (1.3.4)

cjhgit avatar Jul 20 '22 05:07 cjhgit

At first I thought that maybe the toSVG() functionality was only implemented for the unicode text rendering test tool, but it actually existed several years earlier. It baffles me that it seems to always have resulted in upside down glyphs and never been fixed. Font paths and SVG use an inverted y axis, so while one goes down (0,0 is in the top-left corner), the other one goes up (0,0 is in the bottom-left corner).

With #568, I'll change the code to output adjusted SVG paths by default, and make the test tool force the unadjusted paths.

edit: the Path SVG functions will continue to output flipped versions, but it will be possible to output non-flipped SVG data from wrapper functions on Glyph or by manually configuring the options for the Path functions. On further thinking, this didn't really make sense. Flipping will be done by default and in order to prevent it, an option can be set.

Connum avatar Feb 20 '23 12:02 Connum