search

opentypejs / opentype.js

Read and write OpenType fonts using JavaScript.
https://opentype.js.org/
MIT License
4.38k stars 468 forks source link

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

Closed panayotoff closed 1 year ago

panayotoff commented 5 years ago

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

ryami333 commented 4 years ago

Can confirm!

Jolg42 commented 4 years ago

1.2.1 is released with this change 😃

Jolg42 commented 4 years ago

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

alephzero commented 3 years ago

I think this issue is still outstanding.

cjhgit commented 2 years ago

Same error in newest version (1.3.4)

Connum commented 1 year ago

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.