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.

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

SVG related y-Axis conversion differs in version 2.0.0 #724

Open
herrstrietzel opened this issue Jun 3, 2024 · 0 comments
Open

SVG related y-Axis conversion differs in version 2.0.0 #724

herrstrietzel opened this issue Jun 3, 2024 · 0 comments
Labels
Milestone

Comments

@herrstrietzel
Copy link

herrstrietzel commented Jun 3, 2024

The new API seems to flip/convert coordinates twice resulting in a "flipped" rendering when using SVG related methods such as font.getPath()

Expected Behavior

Obviously, the internal font coordinates using a traditional cartesian system (y-axis going from bottom to top - starting at the baseline) has to be converted for SVG conversion (top-to-bottom y-axis).

Current Behavior

The necessary conversion is applied twice

  • calling font.getPath()
  • and path.toPathData() – still using the flipY=true parameter as default

Possible Solution

Probably ditch the flipY parameter in path.toPathData() or invert a specified parameter so the (sensible) default parameter would be reversed

flipY  = flipY === true ? false : true

... I know kind of nuts

Otherwise the default font.getPath() coordinate calculation may accept the flipY parameter instead.

Steps to Reproduce (for bugs)

Codepen Example based on v 2.0.0

(async () => {
  let fonturl =
    "https://cdn.jsdelivr.net/gh/opentypejs/opentype.js@master/docs/fonts/FiraSansMedium.woff";
  let buffer = await (await fetch(fonturl)).arrayBuffer();

  // parse
  let font = opentype.parse(buffer);
  console.log(font);

  //render
  let text = "a";
  let fontSize = 72;
  let x = 0;
  let y = fontSize;

  // 1. get SVG compatible path data
  let path = font.getPath(text, x, y, fontSize);
  let d0 = path.commands
    .map((com) => {
      return Object.values(com).join(" ");
    })
    .join(" ");
  console.log(d0);
  path2.setAttribute("d", d0);

  // 2. stringify path data
  let d = path.toPathData();
  console.log(d);
  path3.setAttribute("d", d);

  // 3. create svg element
  let pathEl = path.toDOMElement();
  svg.append(pathEl);
})();

The same example using V1.3.4

Context

From my perspective a minor issue. But oviously the new version should produce the same result

Your Environment

  • Version used: opentype.js 2.0.0 vs 1.3.4
  • Font used: "FiraSansMedium" (static font) - frome the official opentype.js repositore
  • Browser Name and version: not specific to browsers
@ILOVEPIE ILOVEPIE added the bug label Jun 9, 2024
@ILOVEPIE ILOVEPIE added this to the Release 2.0.0 milestone Jun 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants