opentype.js
opentype.js copied to clipboard
Path.toPathData and Path.toSVG - X Axis is flipped
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
- Load font
- Get glyph path data with glyph.path.toSVG()
- Use the path data to render proper glyph
Current Behavior
- Load font
- Get glyph path data with glyph.path.toSVG()
- 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
Can confirm!
1.2.1 is released with this change 😃
I will undo in next version as it's breaking the current output, it needs to be a fix for the toSVG command only.
I think this issue is still outstanding.
Same error in newest version (1.3.4)
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.