Comments (9)
ruswerner
commented on July 26, 2024
Here are the actual calls I make to draw a "c" glyph. The coordinates are based on the 2048 units per em scale. I would do a ctx.scale(fontSize/2048,fontSize/2048) and a translate prior to executing this code to draw it at a specific size and location:
ctx.beginPath();
ctx.moveTo(839.5,1014);
ctx.quadraticCurveTo(953,926,976,711);
ctx.lineTo(801,711);
ctx.quadraticCurveTo(785,810,728,875.5);
ctx.quadraticCurveTo(671,941,545,941);
ctx.quadraticCurveTo(373,941,299,773);
ctx.quadraticCurveTo(251,664,251,504);
ctx.quadraticCurveTo(251,343,319,233);
ctx.quadraticCurveTo(387,123,533,123);
ctx.quadraticCurveTo(645,123,710.5,191.5);
ctx.quadraticCurveTo(776,260,801,379);
ctx.lineTo(976,379);
ctx.quadraticCurveTo(946,166,826,67.5);
ctx.quadraticCurveTo(706,-31,519,-31);
ctx.quadraticCurveTo(309,-31,184,122.5);
ctx.quadraticCurveTo(59,276,59,506);
ctx.quadraticCurveTo(59,788,196,945);
ctx.quadraticCurveTo(333,1102,545,1102);
ctx.quadraticCurveTo(726,1102,839.5,1014);
ctx.lineTo(839.5,1014);
ctx.moveTo(517,1097);
ctx.lineTo(517,1097);
ctx.fill();
from opentype.js.
ruswerner
commented on July 26, 2024
Just adding some more research to this thread... I extracted the path commands being executed by opentype.js for "c", using a 2048 font size, which results in no scaling of the path coordinates. Here is a side-by-side comparison of two. Quite a few of the path calls are exactly the same, but they differ in other areas. I'm left wondering why this is the case and a little bit concerned. I wouldn't use opentype.js to render Helvetica due to the "flattening" of some of those curves.
I'm trying to understand what assumptions are made by fontforge when converting ttf to svg. I use the svg font path data directly without modification; that is what is on the left-side below. And I assume that opentype.js parses the ttf data and uses it directly with little or no modification (shown on the right-side below).
MY CODE OPENTYPE.JS
----------------------------------------- --------------------------------------------
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(839.5,-1014); ctx.moveTo(635.5,-1102);
ctx.quadraticCurveTo(726,-1102,839.5,-1014);
ctx.quadraticCurveTo(953,-926,976,-711); ctx.quadraticCurveTo(953,-926,976,-711);
ctx.lineTo(801,-711); ctx.lineTo(801,-711);
ctx.quadraticCurveTo(785,-810,728,-875.5); ctx.quadraticCurveTo(785,-810,728,-875.5);
ctx.quadraticCurveTo(671,-941,545,-941); ctx.quadraticCurveTo(671,-941,545,-941);
ctx.quadraticCurveTo(373,-941,299,-773); ctx.quadraticCurveTo(373,-941,299,-773);
ctx.quadraticCurveTo(251,-664,251,-504); ctx.quadraticCurveTo(251,-664,251,-504);
ctx.quadraticCurveTo(251,-343,319,-233); ctx.quadraticCurveTo(251,-343,319,-233);
ctx.quadraticCurveTo(387,-123,533,-123); ctx.quadraticCurveTo(387,-123,533,-123);
ctx.quadraticCurveTo(645,-123,710.5,-191.5); ctx.quadraticCurveTo(645,-123,710.5,-191.5);
ctx.quadraticCurveTo(776,-260,801,-379); ctx.quadraticCurveTo(776,-260,801,-379);
ctx.lineTo(976,-379); ctx.lineTo(976,-379);
ctx.quadraticCurveTo(946,-166,826,-67.5); ctx.quadraticCurveTo(946,-166,826,-67.5);
ctx.quadraticCurveTo(706,31,519,31); ctx.quadraticCurveTo(706,31,519,31);
ctx.quadraticCurveTo(309,31,184,-122.5); ctx.quadraticCurveTo(309,31,184,-122.5);
ctx.quadraticCurveTo(59,-276,59,-506); ctx.quadraticCurveTo(59,-276,59,-506);
ctx.quadraticCurveTo(59,-788,196,-945); ctx.quadraticCurveTo(59,-788,196,-945);
ctx.quadraticCurveTo(333,-1102,545,-1102); ctx.quadraticCurveTo(333,-1102,545,-1102);
ctx.quadraticCurveTo(726,-1102,839.5,-1014);
ctx.lineTo(839.5,-1014); ctx.lineTo(726,-1102);
ctx.moveTo(517,-1097); ctx.moveTo(517,-1097);
ctx.lineTo(517,-1097); ctx.lineTo(517,-1097);
ctx.fill(); ctx.fill();
I'll try to do some further research and break down what is going on here... Any suggestions or ideas in the meantime are welcome. Thanks.
from opentype.js.
ruswerner
commented on July 26, 2024
I forced opentype.js to render the stroke on the glyph, instead of filling it, and this exposed an unexpected path deviation where the "flat" spot is:
Hopefully, this is helpful in determining what is going on with this glyph...
from opentype.js.
ruswerner
commented on July 26, 2024
Here is another example of some strange paths:
from opentype.js.
fdb
commented on July 26, 2024
Hey – thanks for reporting this! This has obviously something to do with the conversion from opentype's n-order curves to quadratic curves. I'll look into it next week.
from opentype.js.
fdb
commented on July 26, 2024
Could you provide me with the TTF/OTF source file for testing? You can email me at frederik at debleser dot be.
from opentype.js.
fdb
commented on July 26, 2024
Thanks for your help! Your research was very useful in tracking down this bug.
I noticed when printing out the path commands that the beginning and the end of the path are not the same. However, the path that comes has the same points in the same locations, just shifted (because of the implicit starting point).
from opentype.js.
fdb
commented on July 26, 2024
I found one more bug with the letter O. This is now fixed as well.
The new approach starts at the last point if the first point is off-curve and the last point is on-curve. This has the added benefit of avoiding drawing zero-width/height lines, such as at the end of your "c" example.
from opentype.js.
ruswerner
commented on July 26, 2024
I found that bug also and was about to write it up when I saw your last commit. I just re-tested my local setup and everything is rendering fine. Thanks!
from opentype.js.
Related Issues (20)
- An unexpected situation occurred when using path. toSVG(), where NaN caused text rendering errors HOT 3
- how can I get font metadata by font file (.ttf,.otf,.woff2,.woff) by simple method? HOT 2
- Why did we depricate the load function? HOT 5
- Bold/Italic Emulation implementation needed. HOT 5
- Invalid font result with opentype.js HOT 1
- font lose glyph name HOT 1
- Writing slow (30+ seconds) for certain fonts (CJK, Noto Chinese) HOT 2
- TypeError: Cannot read properties of undefined (reading 'featureIndexes')
- fvar.instances returns empty name entry if nameID is 17 (preferredSubfamily) HOT 13
- 'liga' should not support only latin words
- missing emoji substitutions HOT 9
- Character rendering issues occur when stroking text. HOT 10
- Detect and remove inner contours from path? HOT 5
- Naming Table Parsing seems buggy HOT 1
- Why isn't the fromSVG API included in the release version? HOT 1
- The variable font code uses Proxy, a non-polyfillable ES6 type. HOT 7
- Local build rules were deleted this should not have happened. HOT 13
- variable fonts: VariationManager set axes values for rendering HOT 12
- Proposal: API change freeze HOT 7
- SVG related y-Axis conversion differs in version 2.0.0
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from opentype.js.