Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Some glyph not scaled properly + kerning slightly off #4

Open
jvolker opened this issue Jan 21, 2021 · 3 comments
Open

Some glyph not scaled properly + kerning slightly off #4

jvolker opened this issue Jan 21, 2021 · 3 comments

Comments

@jvolker
Copy link

jvolker commented Jan 21, 2021

First of all, thanks for creating this plugin. :)

I'm using the following example.
The font can be found here: https://gitlab.com/oskay/svg-fonts/-/blob/master/fonts/Hershey/HersheySans1.svg

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>SVG.js</title>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/svg.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/svg.pathmorphing.min.js"></script>
  <script src="lib/svg.textmorph.min.js"></script>
</head>
<body>
  <div id="drawing"></div>
  <script type="text/javascript">
      document.addEventListener('DOMContentLoaded', function(event) {

        var draw = SVG('drawing').viewbox(0, 0, 300, 300);
        new SVG.SVGFont('svg_fonts/HersheySans1.svg', function(){

          var text = draw.morphText('fghijklmnop').font({
              family: this,
              size:50

          }); 
          text.fill('none').stroke({ width: 1 })
          
          // text.animate().text('GFEDCBA')

        })
      })  
      
  </script>
</body>
</html>

The glyph "l" doesn't seem to be scaled properly and appears much taller than it should:
grafik

On another note, unfortunately the kerning seems to be slightly off (noticable between "j" and "k"). This is the result of an Inkscape plugin which seems to be a bit better. Any idea what's causing this?:
grafik

Thanks.
@jvolker jvolker changed the title Some glyph not scaled properly + kerning slighly off Some glyph not scaled properly + kerning slightly off Jan 21, 2021
@Fuzzyma
Copy link
Member

Fuzzyma commented Jan 22, 2021

Oh I wasn't aware that someone actually uses this :D. It is not up to date and not maintained atm therefore I don't really know what's wrong.
The sizing issue looks like a rounding error (or NaN somewhere in the calculation) and the kerning is taken from the font file as far as I know.

@jvolker
Copy link
Author

jvolker commented Jan 22, 2021

Thanks for getting back to me. Yes, I was very happy to come across your plugin and see that it existed.

I'm looking into writing a web app that renders and exports text from SVG fonts. I've looked into other options and think it will be best to roll my own implementation. Since it won't be based on this plugin this is not really an issue for me anymore.

Oh I wasn't aware that someone actually uses this :D.

Maybe it would be good to add a full working example (like the one above) to help people with only a little experience using svg.js to get started more quickly.

@Fuzzyma
Copy link
Member

Fuzzyma commented Jan 22, 2021

This plug in actually uses code which is not ready for the newest version of svg.js v3 yet. It probably never will.
So yeah you are better off using your own implementation :D.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jvolker @Fuzzyma