opentype.js | Read and write OpenType fonts using JavaScript | User Interface library
kandi X-RAY | opentype.js Summary
kandi X-RAY | opentype.js Summary
opentype.js is a JavaScript parser and writer for TrueType and OpenType fonts. It gives you access to the letterforms of text from the browser or Node.js. See [for a live demo.
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of opentype.js
opentype.js Key Features
opentype.js Examples and Code Snippets
Lines of Code : 66License : Permissive (ISC)
Copyimport drawText from 'node-canvas-text'
import opentype from 'opentype.js'
import Canvas from 'canvas'
let canvas = new Canvas(imgWidth, imgHeight);
let ctx = canvas.getContext('2d');
// Load OpenType fonts from files
let titleFont = opentype.loadS this._http
.get(url, { responseType: 'blob' }) // or 'arraybuffer'
.subscribe(
res => {
// pass reaponse to opentype.js
}
);
Community Discussions
Trending Discussions on opentype.js
QUESTION
I need to be able to convert text and a specific font to svg path data, and happened to come across opentype.js and maker.js, independent of each other, seeing that maker.js uses opentype.js. When I use opentype.js by itself, it doesn't render the font path correctly... when I give it a fill it doesn't display it properly. When I use maker.js, it is significantly better, but still incorrect.
TO BE ABSOLUTELY CLEAR ON THE PROBLEM DESCRIPTION: I need a way to translate text with a given font to svg path data that is then "flattened" (any black overlaps are unioned and any elements that are inside of the unioned text that is white is kept - for instance look at the letter "P"... If I union it, it removes the white part inside of the "P", of which I need). At this point I don't care about the means... it just needs to be compatible with php (it can't use imagemagick or other 3rd party software ran from the terminal - like inkscape... I don't have access to run shell_exec() or exec()) or javascript
I have had many trashed attempts, so... Help very much appreciated!
---maker.js---
This is one attempt... running this snippet causes my browser to crash, but in its own file works fine.
Here is the result and the code:
...ANSWER
Answered 2020-Nov-30 at 14:33The culprit is a faulty font definition. In fontforge, the character a is shown as having intersecting paths. If you look at the path data output of opentype.js for this glyph, it looks like this (formatted for reading convenience):
QUESTION
I have list of .otf fonts, around 200 fonts.
I am loading those fonts using opentype.js as below:
...ANSWER
Answered 2019-Jul-23 at 12:32It is possible by using this code: first load fonts from server then inject those fonts in head tag of html as font-face:
QUESTION
I trying to create a font subset with opentype.js in node
my code
...ANSWER
Answered 2019-Jul-05 at 11:03I finnally find that the string pass to font.stringToGlyph has duplicated characters. I have to remove the dupcated ones by myself
QUESTION
How to load a font file( ttf and otf) in angular using httpclient as a binary file to process with opentype.js. I have to extract svg paths from the font files loaded using angular http module. what should be the type i should mention in the service for the file like array buffer etc.
...ANSWER
Answered 2019-Jun-30 at 16:49Set the appropriate responseType in GET request.
https://angular.io/api/common/http/HttpRequest#responseType
QUESTION
I have a path in paper.js witch describes a letterform. I got Path by loading a font whith opentype.js's function path.toSVG(); than I load it to paper.js by .importSVG();
Now I do some manipulations with paper.js and then want it back as a downloadable font file. So my question is, is there an easy way to get it back from paper.js to opentype.js?
Edit: Okay I am asuming there is no easy way. So i tried to convert the path manually with js:
...ANSWER
Answered 2019-May-16 at 20:31OK. Based on the images, you've got at least 2 problems. The first is that the Y co-ordinates have inverted.
importSVG probably handled that for you correctly going in, but you'll need to handle it coming back out.
That will mean iterating the glyphPath a second time and reversing the Y values. Looks like you are already tracking the max Y (or X?), and you'll need that. And you will probably also need an offset value.
The second problem (which is a guess) is that curves are being turned into lines.
I'm afraid I can't really advise on that, other than it probably means your curve detection is incorrect.
QUESTION
I am trying to transfer a font from opentype to a paper.js path object. I am using opentype.js to get the points out of the letter and than i try to make a new paper path out of this points.
Sounds simple, but somehow i can not work out this curves. I am trying to find how this is done with the examples and the reference of paper.js. but i can not find it.
from opentype.js i get paths like this:
...ANSWER
Answered 2019-May-07 at 08:05Segment.handleIn and Segment.handleOut are coordinates relative to the anchor point. Make sure you give relative coordinates for handles, not absolute.
An easy solution would be to use OpenType.js to convert your font to SVG width Path.toSVG(decimalPlaces), then import it in paper.js with importSVG(svg[, options]).
QUESTION
Wondering what this encode_number function means, all of the different numbers. Specifically, I know that 32768 is for 16 bits (Math.pow(2, 16) / 2), and that the last else block is (from source code comments) a 32 bit number. But I don't understand where these numbers are coming from: 107, 139, 108, 1131, 247, 251, 28, 29. Would like to know what the meaning of this function is. From here.
ANSWER
Answered 2019-Jan-16 at 08:43Well, that was simple:
- By using the
blameview of that linked source code, you come across the commit that introduced these lines. The commit message was: "Add CFF table encoding." - By searching for CFF and 107, you find an explanation of that CFF dictionary format
So, this function is used to encode something for that "Compact Font Format" which kind of belongs to OpenType. But what that actually means is out of my knowledge ;)
QUESTION
I just used opentype.js to compile a font file sort of haphazardly. Here is what my final file looks like:
...ANSWER
Answered 2019-Jan-14 at 23:50The hex dump shows a number of serious problems:
The Table Directory entries are not aligned properly. Each tag/checkSum/offset/length entry should occupy 16 bytes. From the dump, it looks like your entries have some extra bytes
The Table Directory entries are not sorted in increasing order by tag
The offsets in the Table Directory are suspicious (offset for
hmtxis 8, which is before the Table Directory itself). The offsets in the Table Directory are absolute (from byte 0 of the font), not relative (although even a relative offset of 8 would be wrong for that case).The correct tag for the CFF table is '
CFF' (i.e. 'C', 'F', 'F', ' ', and should be uppercase, not lowercase).The Table Directory does not appear to have a
nameorOS/2table. These are both required tables (see the OpenType specification). While you might be able to get away with noOS/2table on some platforms, thenametable really is needed for a minimal valid font.This is actually minor, but CFF-based fonts should use the extension
.otf, not.ttf. But you should really solve the items I mention above first, and ensure that the table directory offset & length entries correctly point to the right data within the rest of the file.
In general I would recommend spending some time, perhaps a significant amount of time, studying the OpenType specification.
QUESTION
I have a use case where I need to render a significant amount (~50,000 glyphs) of crisp, scalable text strings on a canvas element. The best solution I've tried so far involves triangulating text drawn on a canvas element (Text was drawn using fillText method), uploading matrix uniforms and the Float32Array of triangles representing that string to the GPU via WebGL. Using this method, I was able to render 100,000 glyphs at about 30fps. Glyphs become blocky at very high zoom levels, but that is fine for my use case.
However, this method has overhead of about ~250ms per string, since I first draw the string to a canvas element in memory, read pixel data, turn the bitmap image into a vector and then triangulate the vector data. Searching the web for solutions, I came across two interesting open-source projects:
- OpenType.js: https://opentype.js.org/
- Earcut: https://github.com/mapbox/earcut
So now I want to re-write my initial proof of concept to use OpenType and Earcut. OpenType for feeding curve data into Earcut, and Earcut for triangulating that data and returning an array representing the point for each triangle.
My problem is, I can't figure out how to get the data OpenType provides and convert it into the format that Earcut accepts. Can anyone provide assistance for this?
More Info:
This StackOverflow question had some great information, but lacks some of the implementation details: Better Quality Text in WebGL. I suppose what I am trying to accomplish is the "Font as Geometry" approach described in the first answer.
...ANSWER
Answered 2018-Jun-04 at 18:36You can create a path using Font.getPath. Path consists of move-to, line-to, curve-to, quad-to and close instructions, accessed via path.commands. You will need to convert bezier curve instructions into small segments first, of course.
Once you have a set of closed paths, you need to determine which ones are holes. Inner outlines will be oriented in an opposite direction to outer ones, and you can assign them to the smallest outer outline containing them. Once you have groups of you should be able to feed it to earcut library.
This is a simple implementation that assumes there are no intersections. For me it worked very well for most fonts, except for very few "fancy" fonts that have intersecting paths.
Here's a working example: https://jsbin.com/gecakub/edit?html,js,output
Instead of creating meshes for each string, you could also create them for individual characters, and then position them yourself using kerning data from the library.
Edit: this solution will only work for TTF fonts, though it can be easily adjusted for CCF (.otf) by ignoring path orientation and using a better "path A is inside path B" check, unless the font has intersecting paths.
QUESTION
I may be confused as to what babel-preset-env actually does. My assumption is that it would transpile my code for my targeted browsers including any necessary polyfills. This doesn't appear to be the case in my code though...
My code:
...ANSWER
Answered 2017-Sep-26 at 23:46babel-preset-env in its default state only handles converting syntax, not polyfilling standard library functionality.
Sounds like you'll want useBuiltins: true in your config. You'll also need to follow the other instructions there by installing core-js and adding an import for babel-polyfill.
Alternatively you can just load babel-polyfill itself and not rely on babel-preset-env at all.
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install opentype.js
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page
