opentypejs / opentype.js Goto Github PK

I'm looking how I could retrieve a list of unicode characters available within a font. This is useful in scenarios where you need to build an index of characters in a font to be used elsewhere. For example to store a unicode character and it's associated glyph details to be persisted in a database and used in another system.

I can see a set of glyph names and glyphs themselves, but no way to get a list of actual characters or unicode values in the font.

Is this possible today and I simply missed how to do it?

Thanks!

It would be great if OpenType could be installed using the Bower package manager.

It would be incredibly useful if the Glyph object also came with an lsb and rsb value, so that font-indicated glyph based alignment becomes possible.

Curious – is there anyway to access the font object with a CSS @fontface? Or would that require recompiling the font somehow?

I am drawing a glyph shape and getting its path using font.getPath(). This method gives me a path object containing an array of draw commands. Now, I want to be able to find any arbitrary point on the path curve for a given x and y value coordinates (similar to SVG function getPointAtLength().

How to do this?

In Safari 6.1.4, constructor.name is undefined. This results in Parser's isDataView property always returning false. I'm not sure if there is a good fix, but a hackish adjustment could be made.

It's ugly, but the following resolves the issue:

this.isDataView = (data.constructor.name === 'DataView') || (data.constructor.toString().match(/DataView/) !== null)

Hi,

I am just wondering if I can load system fonts which already exist in windows/fonts. Downloading each single font files gets whole process slow even though user's computer already has system fonts.

opentype.load('fonts/ariblk.ttf', function (err, font) {
});

Thanks,

I took a look at the demo in IE11 and the font playground is all garbled up. Here's a screenshot.

This is not a problem on Chrome.

hi,
i test arabic/persian font with opentype.js demo : http://ritaco.github.io/opentype.js/index.html
but the cuurent version of opentype.js can not support features isol, init, medi, fina in GSUB table.

Please guide me to add this feature.
thanks.

This todo came from the code:

For dt subdivision, make sure not updating any view code. Just update a model structure for numDivisions times, then update all views only once.

This will be a significant refactor and we should make sure it is worthwhile. It may also be difficult to estimate the benefit we may obtain from this (maybe not too much if scenery already postponing most events to updateScene).

The font.getPath() method is giving me a path consisting of inner and outer boundaries of glyphs. I want to be able to find a skeletal path that goes through the middle of the glyph path. See the red line in the below attached image.

Currently, I am following a circuitous approach:

• going through each glyph's path,
• finding out the indexes of relevant points on the outer border
• compute the middle points on them and connect them with a line.

For example, from the above fig., to draw a vertical line skeleton for the left leg of "M", I take the middle of points (1,11) and (12,13) and then draw a line through the computed middle points.

This approach is tedious and not scalable. This is also inaccurate, if I use a different font (because the point numbers are different).

Is there a generic way, in which I can draw a middle line skeleton, that can draw straight line based glyphs as well as curved ones?

I considered using ctx.scale() and ctx.translate() to scale down the outer border path to create what looks like a middle skeleton. But, this seems to be not so accurate in case of curved paths, and especially if the font size changes.

Any clues how to approach this?

Hi,

Just wanted to install from latest commit as there're some issues with the tagged 0.2.0 version, however getting a syntax error from bower:

bower opentype.js#3e9f760b421cf66426ee94b6177197e403698335 EMALFORMED Failed to read /var/folders/p5/58_0mhcx0sbd24yn_8297vf40000gn/T/aadam/bower/opentype.js-37523-NkFoX4/bower.json

Additional error details:
Unexpected token ]

Looking at the current bower.json I can see that there's an ending comma ',' before the closing square bracket and I guess that might cause the issue

Are there any plans to support Web-Fonts (WOFF) i.e. to read from Google-Fonts and the such? As far as I understood, on could actually use zlib.js to decompress the woff format?

As the project grows it is important that the quality of the code remains high: no regressions should be introduced and the overal coding style remains consistent.

For tests, set up a testing suite that runs automatically and catches regressions with built-in fonts.

For code consistency, set up JSHint. This should be integrated in a npm test task, and be checked in continuous integration (so it can automatically test pull requests).

In addition, also mention these guidelines in a CONTRIBUTING.md file.

I initially npm installed "opentype" and it took a bit to figure out it wasn't your module "opentype.js"

When loading Roboto-Black, glyph 109 '«' U+00AB has its first component in the wrong position:
dx: 245
dy: 221
but it should be:
dx :-11
dy:-35

Having ported all the code to C# I also had to go through it all, so free code audit! :D I found some small things which were pretty obviously wrong, and here they are.

In 'font.js', line 66:

if (this.glyphNames.glyphIndexToName) {
    return '';
}
return this.glyphNames.glyphIndexToName(gid);

Should probably be "if (!this.glyphNames.glyphIndexToName) {".

In 'gpos.js', line 167 and 171:

    // Get the kerning value for a specific glyph pair.
    return function(leftGlyph, rightGlyph) {
        if (!covered[leftGlyph]) return 0;
        var class1 = getClass1(leftGlyph),
            class2 = getClass2(rightGlyph),
            kerningRow = kerningMatrix[class1];
        return kerningRow ? kerningRow[class2] : 0;
    };

Instead of returning 0 here, it should probably return null instead to be compatible with the format 1 lookup function above it which does not return a value if no kerning value is found, which would return null. Returning 0 here might create incorrect kerning values, as there's no way to distinguish between "unknown" and "the kerning should be zero".

In 'maxp.js', line 15:

if (maxp.majorVersion === 1) {

maxp was just declared and no member variable called majorVersion is set, so this code would never run. Should this perhaps be something more like this? if (Math.floor(maxp.version) === 1)

In 'post.js', line 45:

    post.offset = new Array(post.numberOfGlyphs);
    for (i = 0; i < post.numberOfGlyphs; i++) {
        post.offset = p.parseChar();
    }
    break;

This seems like you'd really want to add the array subscript, so: post.offset[i] = p.parseChar();

I see you are creating about 20 properties on File object (ascender, copyright, descender, description, designer ...). All these properties are already stored in Font.tables.

I think it is convenient for user to get these data right from tables, he can learn something about font file structure at the same time. I don't see any reason for such redundancy, it also makes file object "messy".

Hi, I think you output a 'Z' command for every glyph, including blanks, which is a bit strange since you have issued no 'M' or any drawing command before.

I found it with SVG where it's illegal, it's really visible when you start the chunk of text with a space, the first command is a Z.

one will only extract raw data that can also be used for the second library for drawing.
it has the benefit that it will make this lib more lighter and more flexible for building libraries that use this lib. (for example the discussion about using angular with the font data).
and i think it would be more useful in future for making opentype.js a lib that also write fonts

I'm getting this errror with the artbrush.ttf font ( http://www.dafont.com/fr/artbrush.font )
Don't have the time to investigate this right now, but the font seems all right and can be used with other software. So this could be a bug in opentype.js

Currently opentype.js is over 2,000 lines of JS. To make hacking on the code more manageable it might be a good idea to split it up into modules.

Some rough suggestions:

• Paths
• Primitive parsing functions (getByte, ...)
• Font and Glyph object
• CFF encoding tables
• OpenType table parsers
• CFF table parsers
• Main entry points

There is an abundance of choice around build tools and I'd love to keep things simple. My current suggestion is to use Browserify and a simple package.json file (See this article for more info).

I am evaluating switching from a proprietary system I wrote to render glyphs to using opentype.js. I was comparing output for Helvetica and notice that when using opentype.js there are flat spots on the tops of some of the glyphs, such as "e" and "c". Shown here:

If you compare this to my code, which is drawing the same glyphs to a canvas, however I get the path data from converting the ttf to svg (using font forge) then using the svg path data to execute canvas drawing commands:

You can see the difference. Now, I double checked this again with iWork Pages, using the Helvetica font that ships with OSX and the source font for my custom rendering:

...and there are no flat spots; the output matches my output.

Can you please lend some insight on what you believe is happening here? It seems that incorrect params are being passed to bezierCurveTo or quadraticCurveTo; or they aren't completing the path properly.

Thanks!

When trying to generate a font, the glyphs need to be sorted, using a simple font.glyphs.sort() before converting it to a buffer. Otherwise the font gets corrupted.

(Sorry for this incomplete bug report, I've got to file it real quick before leaving the office, will try to produce reduced test-case tomorrow)

Currently, canvas tags show up blurry.

OpenType font files can contain both TrueType or PostScript outlines. Currently we only support TrueType outlines. We should support both.

I created a simple test using the readme example code and I am unable to load the module.

this code:

var opentype = require('opentype');
var fs = require('fs');
var path = require('path');
opentype.load('SourceSansPro-Italic.ttf', function (err, font) {
    if (err) {
        alert('Could not load font: ' + err);
    } else {
        // Use your font here.
        console.log("loaded the font",font);
    }
});

produces the error:

▶ node test2.js

module.js:340
throw err;
^
Error: Cannot find module 'opentype'
at Function.Module._resolveFilename (module.js:338:15)
at Function.Module._load (module.js:280:25)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object. (/Users/josh/projects/play/fonttest/test2.js:1:78)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Function.Module.runMain (module.js:497:10)

The package.json does not have a 'main' property in it. If I add one to src/opentype.js I get errors about goog being missing.

Does opentype.js really work with node?

Sometimes the skater flips upside down when tracks joined

Opentype puts a whole new spin on working with a new music notation OTF called Bravura. The Bravura font is an open standard and large as it covers most music symbols known to mankind. It is defined in the unicode user space as multiple sections grouping the many types/classes of music symbols into unicode ranges. Browse the ranges and diverse music glyphs here : http://www.smufl.org/version/latest

Not all music publishing will require all the sections defined by Bravura. What would be helpful in Opentype is to be able to be able to parse only given unicode ranges or a specific list into a Opentype Font. Maybe this list format can be defined as JSON to act as a parse filter?

It would also be good to see what unicode code point a parsed glyph has and then to be able to lookup a given parsed glyph or range of glyphs by their unicode values.

In EnergySkateParkBasicsModel.interactWithTracksWhileFalling when the skater attaches to the track, it computes uD from the bead-on-a-wire equations. We could take the additional step of correcting this value through search based on energy conservation, if necessary. I guess we will know if this work is necessary if energy is not conserved when the skater is attaching to the track.

Since Browserify provides module.exports capability to modules loaded in a browser, it winds up tricking opentype.js into trying to do an fs.readFile in the browser.

Would it be sensible to expose loadFromUrl and loadFromFile so that they can be called explicitly in a case like this?

It's currently quite hard to get access to glyph paths and boundaries.

Work out the API for glyphs to support getting the path, and supporting drawing.

Most fonts from Google repo (http://www.google.com/fonts) use the GPOS table for kerning data, and many don't include the old "kern" section, which currently causes missing kerning data from opentype.js.

IMO this is an important feature to support. Safari and Firefox both turn on kerning by default for all text. Not being able to take kerning into account leads to:

• Inconsistent drawing results between native text and custom ones on the canvas elements.
• Inability to accurately measure the size of a piece of text with kerning = true, which prevents usage of opentype.js for layout calculation that relies on text measurement.

Current master has been updated from v0.3.0 and many problems are fixed.

Would you mind publishing a new version to npm and bower?

In the original Java Energy Skate Park: Basics, if the skater hits the ground, he will travel along the ground as if it has no friction. I thought it would make more sense for the skater to stop and remain motionless (as if it is grass), so that he doesn't escape from the screen. I don't think it would be too much work to add support for moving along the ground but thought I'd ask whether not we should add it before doing so.

It would be very useful if there was a Glyph copy constructor, or factory method, so that modifications to a glyph can be made to copies, rather than the original (thus allowing things like modifying the same letter in a string with multiple instances in different ways).

The new Glyph constructor looks pretty good, but it might be useful to add an if(options.points) { /* this is a copy constructor call */ } so that copies are easily constructed

When Arial.ttf from ttf-mscorefonts-installer debian package is used opentype draws incorrectly some of Cyrillic letters. For example Cyrillic 'Э' is drawn as Euro symbol. As well as 'Я' is drawn as 'R'. It seems that those glyphs are using some kind of 'mirror' transform which is not supported by opentype.

I've been following this project for a while now and I'm very interested in using it in a project of mine to dynamically generate textures to be used in WebGL, which would then be used for text animations. Naturally, I would want this parser to be as well-developed and robust as possible.

Sadly, I don't have the coding skills to contribute to this project. Is there any other way I can help contribute to this project (donations etc...)?

Also, is there a good resource or book where I can learn about font parsing so I can actually develop the skills to be useful to this project?

Thanks.

Using the free "Open Sans Regular Italic" TrueType font and requesting a glyph for the character "I" yields in a returned glyph code of zero which is surely wrong and returns the typical "no-char" rectangle. Using the glyph inspector of opentype.js however shows a number of "44" for the letter "I".
Having debugged seems that CmapEncoding.prototype.charToGlyphIndex returns zero but I couldn't figure why not having really understood what the code does.

The font file mentioned can be gathered from here: http://www.fontsquirrel.com/fonts/open-sans (Choose "Italic" in the style box, then download TTF)

Hi,

Thanks for the previous reply. Now I have a question about loading font without callback function. I need it because I call the function below from flex. Flex can't send callback function.

// This function is something I need
function getPath(text) {
// no callback function. just wait
opentype.load('fonts/ariblk.ttf');
var path = font.getPath(text, 0, 150, 72);
var json = JSON.stringify(path);
return json;
}

Can I load font file without callback to make the process wait?

Hi, thanks for opentype.js, it's very useful. Though, I found a bug in charToGlyph:

I have the umlauts äöüß in my text. This works flawless in FreeType with both fonts I use but it only works with one font of the two fonts in opentype.js. The problematic font is Cousine.ttf.

The ASCII code of ö is 246. According to FreeType it's glyph 181 in Cousine but opentype.js returns glyph 168. So instead of getting my ö I get an é. The same happens with the other umlauts (and only with them).

Could you please check on that?

Thanks!

https://github.com/samfishman/fonttools/commits/feature-simplify-operators has Python code to optimally pack CFF Type2 CharStrings, which could be ported to opentype.js

In the library's version uploaded to the project's website (gh-pages branch) at:
http://nodebox.github.io/opentype.js/index.html

Using the font DroidSansFallbackFull.ttf (https://github.com/android/platform_frameworks_base/blob/master/data/fonts/DroidSansFallbackFull.ttf)

Chinese characters, I use "零" for testing, display properly:

Using the latest opentype (master branch) an exception is thrown:
TypeError: Cannot read property '0' of undefined

As an extra note: During my testing, the version in the gh-pages branch seems to perform a lot faster than the version in the master branch.

In 'cff.js', line 153, this should be "index < 391", because the length of the cffStandardStrings collection is only 391.

function getCFFString(strings, index) {
    if (index <= 391) {
        index = encoding.cffStandardStrings[index];
    } else {
        index = strings[index - 391];
    }
    return index;
}

Without the change, I believe this just returns null for index 391.

I'm implementing a Canvas compatible API and I would like to get the ascent and descent of a font. I can calculate the min and max y values for a particular run of text, but then it will be dependent on that particular text. For example, 'GG' would return different results than 'Gg'. Is there a way to get the heights for the entire font instead of just particular glyphs?

Following #5, I'd like to suggest enumerating and implementing support for all the tables that https://github.com/behdad/fonttools/ does.

I speculate that development momentum could accelerate if opentype.js was as attractive as Behdad's fontTools :)

Currently, opentype.js loads the entire font at startup. However, on large fonts like Arial Unicode MS, this takes a significant amount of time. Instead, opentype.js should lazily parse the requested glyph (outlines) whenever they're requested first, instead of on startup.

Support all the (metadata) sfnt tables, similar to https://github.com/bramstein/opentype

At the moment the code is hard coupled to render on the canvas object. So for example in Path.prototype.drawPoints, the Path geometry knows how to render itself on a canvas. Instead there should be a renderer, that knows how to draw a path on it self. This way its easier to support other renderer for example for SVG or OPENGL.

Also the renderer should be part of another module so the code can also be used without the renderer.