cannot read property 'Unicode' of undefined

[bayucandra]

Hi, I have success loading font with this plugin, however, it gives me a problem when trying to do splitTextToSize(). I got an error message: can not read property 'Unicode' of undefined. While I am using built-in fonts, it just running fine.

In order to load custom fonts, I am using node makeFonts.js approach.

Here is the font which I used: https://fonts.google.com/specimen/Nunito+Sans . Is there any clue what kind of fonts that I can use with this plugin?

Any help will be highly appreciated. Thank you in advance.

[bayucandra]

After a while tracking trough jsPDF source code, I have seen that this issue initially caused by getFont() function, inside API.splitTextToSize() function. Somehow when it reach getCharWidthsArray() function it is finally bring the error which need to get option.widths or as alternate is activeFont.metadata.Unicode.widths.

A workaround for this is by giving option parameter to splitTextToSize() function with fontName string value which recognized by jsPDF library. So it could be something like :

var long_text = "Something realy long text or paragrahps is here"
var width_of_area = 300;
doc.splitTextToSize(long_text, width_of_area, { fontName: 'Sans' });

Notice that i put option value with : { fontName: 'Sans' }.

Wonder if there any proper solution compared to this hacky ways. Maybe something that can produce properly an array of font character widths from the actual custom font defined, rather than giving another font character widths.

[gpbmike]

I'm using openfont.js to read a font and look up every character width and character pair kerning. Might be overkill. 😬

Below is how I'm getting widths and kerning after already using openfont.js to read the font.

export function getTextWidthsAndKerning(text, font) {
  const chars = uniq(text);
  const widths = {};
  const kerning = {};

  for (let i = 0; i < chars.length; i += 1) {
    const char = chars[i];
    widths[char] = get(font.charToGlyph(char), 'advanceWidth');

    kerning[char] = {};
    for (let j = 0; j < chars.length; j += 1) {
      const kerningChar = chars[j];
      kerning[char][kerningChar] = font.getKerningValue(
        font.charToGlyph(char),
        font.charToGlyph(kerningChar),
      );
    }
  }

  return { widths, kerning };
}

[2linziyi2]

i found a way to solve the problem.
when the version of jspdf is 1.4.1 is ok!
specially，you have to pay attention to the version of jspdf in jspdf-customfonts，must be 1.4.1

[bayucandra]

@gpbmike , thanks for the suggestion. Looks not so overkill :). I feel excited to try that soon.

@2linziyi2 : I am pretty sure that I am using JSPDF version 1.4.1, and the jspdf-customfonts version is: 0.0.4-rc.4. That is weird if yours is work without any trick as I and @gpbmike did.

[2linziyi2]

this is all my operation, you can try it.

package.json
"jspdf": "1.4.1",
"jspdf-autotable": "^3.0.0-alpha.3",
"jspdf-customfonts": "0.0.4-rc.3",

steps:

1. cd ./node_modules/jspdf-customfonts
2. Run npm install
3. Run npm install [email protected]
4. Copy your fonts into the fonts subdirectory.
5. Run node makeFonts.js to create a new dist/default_vfs.js.
6. Include your new dist/default_vfs.js file in your code.

React

import jsPDF from 'jspdf'
window.jsPDF = jsPDF;
require("jspdf-autotable")
require("jspdf-customfonts")
require("jspdf-customfonts/dist/default_vfs")

doc.addFont('simsun.ttf', 'Song', 'normal');
doc.setFont('Song');

I am using the Chinese language pack, it works fine.

[bayucandra]

@2linziyi2 thank you very much for sharing your scripts and environment setup. Looks like we have a slight difference about jspdf-customfonts version. And I am not sure whether I did npm install [email protected] or not inside /node_modules/jspdf-customfonts. Thanks.