search

13rac1 / scfbuild

Create OpenType-SVG color fonts from a set of SVG source files.
GNU General Public License v3.0
81 stars 12 forks source link

Move transform attribute to something in the document #4

Closed RoelN closed 8 years ago

RoelN commented 8 years ago

To compensate for SVG's upside-down Y axis, a transform is done on the <svg> tag. This is not valid and is likely to cause problems in non-Firefox implementations: https://lists.w3.org/Archives/Public/public-svgopentype/2016Mar/0002.html Firefox will turn a blind eye for now, but if this gets fixed fonts generated with scfbuild will be flipped upside down there too.

If fixed this for ChromaCheck and Bixa Color by wrapping the SVG's contents in a <g> and doing the transform on that.

13rac1 commented 8 years ago

Ah ha! Interesting. Thanks for the heads up! I have an open issue on the emojione font about this, but it's no longer a minor issue: https://github.com/eosrei/emojione-color-font/issues/20 A <g> is a good workaround.

13rac1 commented 8 years ago

Fixed! I had to adjust my translation math from the glyph "world" coordinates to the SVG "local" coordinates, but it wasn't a problem. Thanks again!

RoelN commented 8 years ago

Nice, thanks for picking this up! By the way, you could simplify the scaling by simply doing scale(1, -1) (see at the bottom of this TTX dump I use in ChromaCheck for instance).

13rac1 commented 8 years ago

I've seen a lot of talk of this upside-down scaling, but it's never worked for me. I just tried transform="scale(1,-1)" on Multicoloure and got this: Multicoloure scale(1,-1)

I'm not sure what the difference is? Here's the SCFBuild output for the letter A which works correctly:

DEBUG:scfbuild.builder:Found regular Glyph: A
DEBUG:scfbuild.util:Found SVG width/height (152.61/200.00)
DEBUG:scfbuild.builder:Set SVG transform: translate(-23.695 -327.68) scale(2.048)
DEBUG:scfbuild.builder:Glyph ID: 36 Adding SVG: color/41.svg

This is the math: https://github.com/eosrei/scfbuild/blob/2224cd2b35b09f6458dcdc7897192a867c8b586c/scfbuild/builder.py#L181-L197

RoelN commented 8 years ago

Hmm... are you saying calculated values flip them correctly, but scale(1, -1) not? Can I take a look at the upside-down Multicoloure?

13rac1 commented 8 years ago

Yes, and yes, I made it again. (Github isn't letting me upload a ttf or even zip 😞, I'll email you)

It's actually not even flipping the vectors. I'm primarily adjusting for the difference in Y-coordinates. Glyphs use bottom-left Y zero, SVGs use top-left Y zero. This math moves the SVG up 8/10(ascent) the height of the scaled vector, then left half the difference between the scaled font EM and the glyph width (only required for proportional fonts.)