Comments (4)
Fontkit does support OpenType and AAT layout. It may be that you just need to enable the right feature, or it could be a bug. Can you send over a link to the font you're using and the code you're using to render? Thanks!
from fontkit.
I'm using Pacifico Regular as my test font. It can be downloaded from Google Fonts. Some example code is below:
const font = scene.renderer.fonts.fonts['Pacifico-Regular'];
const size = 40;
const gridToPx = size / font.unitsPerEm;
const ascent = font.ascent * gridToPx;
const glyphRun = font.layout('This is a test.');
const { glyphs, positions } = glyphRun;
context.save();
context.scale(1, -1);
let xOffset = 0;
for (let i = 0; i < glyphs.length; i++) {
const glyph = glyphs[i];
const position = positions[i];
context.save();
context.fillStyle = 'black';
context.translate(xOffset, -ascent);
context.beginPath();
glyph.render(context, size);
context.restore();
xOffset += position.xAdvance * gridToPx;
}
context.restore();
I've tried to enable all of the available features for the font but none of them seem to do the trick. The available features according to the font file are:
'aalt',
'calt',
'case',
'dlig',
'fina',
'frac',
'liga',
'ordn',
'salt',
'ss01',
'ss02',
'sups',
'kern',
'mark',
'mkmk'
from fontkit.
Based on previous work with a different library that had the same issue: if the features toggling is not doing the trick, this might be a left-side bearing issue, with the glyphs placed at (0,0) rather than at (-glyph.lsb,0)
from fontkit.
I just reproduced this exact problem in my own shaper. My shaper is independent from FontKit but as far as I can tell the cause of the problem is the same.
The problem in my shaper was the GSUB 'calt' feature in the Pacifico font. The 'calt' feature contains two type 6 (chaining contextual substitution) lookups:
- The first lookup matches a glyph followed by a glyph. There is no substitution for this lookup (i.e. do nothing).
- The second lookup matches a glyph followed by nothing. The substitution is the .fina form of the glyph.
The problem is that the shaper considers a lookup match with no substitution records (case 1 above) a non-match and because of this case 2 above is executed for all glyphs.
The problem can be emulated in the Crowbar OpenType debugger by disabling the 'calt' feature and enabling the 'fina' feature.
Edit: I've now looked at the relevant FontKit code and I can not see that it has the problem my code had.
fontkit/src/opentype/OTProcessor.js
Line 218 in a5fe0a1
from fontkit.
Related Issues (20)
- Bad glyphs code points produce by layout function with Arabic font HOT 1
- TypeError when encoding subset of font with set variation
- Modify and save/write a font HOT 1
- font.layout crashing on esoteric unicode character
- Implementation question: availableFeatures HOT 1
- Support glyph path fill rule (non-zero winding / even-odd crossing / etc)
- Handle avar table version 2
- Exntend font.layout accept Array of Glyphs and return a GlyphRun? HOT 1
- .getImageForSize(100) returns "null" using "Apple Color Emoji.ttc" HOT 2
- when i use fontkit to genetate the subset of ttf file,but can not open the subset file,shows โnot a valid font fileโ HOT 3
- [Performance] WOFF font format for CJK languages is 5x slower in Chrome and Unresponsive in Firefox HOT 1
- seac-like endchar compatibility syntax not handled HOT 1
- Cannot use Fontkit on CodeSandbox.io HOT 3
- How to extract individual TTF from a font collection (TTC) file?
- Missing initialisation for pts variable for glyphs HOT 1
- Trouble with Kerning / Letter Spacing HOT 1
- fontkit library installing on react js project while importing we have issue
- fonkit 2.0.0 create from ArrayBuffer returns empty `variationAxes` and null parameters HOT 1
- Newest version of restructure doesn't support all string encodings HOT 5
- Empty _table object
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 fontkit.