Skip to content

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

Open
@herrstrietzel

Description

@herrstrietzel

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions