adambisek / string-pixel-width

Blazingly fast measure string width in pixels on the server in Javascript (Node.Js)
https://medium.com/@adambisek/text-pixel-width-measuring-on-javascript-backend-node-js-2b82bea97fab#.8ypyiffyw
MIT License
103 stars 41 forks source link

Using pdfkit #1

Open techtonik opened 7 years ago

techtonik commented 7 years ago

Maybe this will help to get width in different fonts. https://github.com/badges/shields/blob/105e383d93a4a333c2a7ee8038a492c8071f14a5/lib/measure-text.js

UPDATE (20180901): Update link to measure-text.js with archived copy. The code was replaced in https://github.com/badges/shields/commit/cc9a6db853be

adambisek commented 7 years ago

@techtonik Thanks, this looks good, but I am not sure, how about rendering speed. Do you have any experience with speed? It looks like pdfkit is using its own rendering, that could be fast (faster than rendering into headless browser).

techtonik commented 7 years ago

No, I haven't measured performance. Was looking for alternative library without PDF in its name.

aquelehugo commented 6 years ago

You can use the library PDFKit uses internally: https://github.com/foliojs/fontkit

Code for measuring string width would be as follows:

var fontkit = require('fontkit');

var font = fontkit.openSync('/path/to/font.ttf');

function getStringWidth(str, useKerning) {
    if (useKerning) {
        return font.layout(text).positions.reduce((widthSum, glyphPosition) => widthSum + glyphPosition.xAdvance, 0);
    }
    return font.glyphsForString(str).reduce((widthSum, glyph) => widthSum + glyph.advanceWidth, 0));
}
adambisek commented 6 years ago

Thanks for your advice. Will look at this. But, one of the prerequisities when this package has been developed was speed. I am not sure that manipulating with PDF would be fast enough.

aquelehugo commented 6 years ago

It doesn't use PDF, it is the library for font loading only. I don't know how you would get the glyphs width in pixels exactly though, maybe you can get it from the pdfkit's implementation. fontkit only provides width for glyphs in their original scale. That's enough for me because I just need the proportions. Of course it will not be faster than your method which just access arrays, but there's a point you missed: kerning. Width for 'Vo' is not the same as the sum for 'V' and 'o' separately, for instance. The 'o' is rendered closer to the 'V' to improve readability.

adambisek commented 6 years ago

Wow, sounds very promising! Will dive into when I have a little bit time!

techtonik commented 6 years ago

Make sure to checkout https://github.com/badges/shields/issues/1379 for performance discussion.