Description
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 theflipY=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