glyphs in font are aligned below baseline

[eburghar]

Kind of issue

• Improvement
• Bug
• Other, namely:

Description

When using the font in LaTeX, the top of the glyphs are aligned below the baseline. (See ineshbose/simple-icons-latex#2)

This is also confirmed in the browser. Just use the following preview/html/testpage.pug

doctype html
html
  head
    meta(charset='utf-8')

    link(href='font/simple-icons.css', rel='stylesheet', type='text/css')
    link(href='preview/assets/style.css', rel='stylesheet', type='text/css')

    script(src='preview/assets/script.js')

body
  header
    h1 Icon font test page

  .buttons-list
    button.background-mode Dark background
    button.icons-color Colorless icons

  p
    each icon in icons
      | i
      i.si.si--color(class='si-' + icon.slug, title=icon.name)

[mondeja]

Related #113, #161

This is also confirmed in the browser. Just use the following preview/html/testpage.pug

Could you explain this? I'm not sure what should I expect nor how to reproduce the error.

[eburghar]

In the modified test page example, the top of the glyphs are vertically aligned with the bottom of the i.

This is due to the negative y scale you apply on each svg path in scripts/build.js

    const verticalTransformedPath = SVGPath(icon.path)
      .scale(50, -50)
      .round(6)
      .toString();

If you change to

    const verticalTransformedPath = SVGPath(icon.path)
      .translate(0, -24)
      .scale(50, -50)
      .round(6)
      .toString();

the bottom of the glyphs are aligned with the bottom of i.

[mondeja]

Great, thanks so much for investigate it 🙏

Would you mind to open a PR to fix it? If you can't or don't have time, I'll try to fix it as soon as I can.

[mondeja]

The new version has been released with the change. Could you confirm that this problem is fixed @eburghar?

[eburghar]

Yes it is working. Thanks for the merge !