Cannot use special characters/glyphs with PDFMAKE, even with imported Fonts which include those

Question

Cannot use special characters/glyphs with pdfmake js libary, even if the imported font contains those chars.

I have to use special characters so I've downloaded some fonts (.ttf) files which include the required glyphs, and for checking purposes, I've installed it to my computer and checked out in Inkscape if the font indeed contains those glyphs.

But I cannot use these special chars in my project, somehow.

This are the steps what i did:

1. Converted the font(.ttf) files to base64 and assigned the values as string to variables in my JS file(AdventProRegular, Andika, SpecialElite, Ultra). Example: var AdventProRegular = 'AAEAAAARAQAA...AAABAAAAAA=='

2. Create the .ttf files from the base64 strings to pdfmake virtual file system. Example: pdfMake.vfs['AdventProRegular.ttf'] = AdventProRegular;

3. Setting up the fonts. Example: pdfMake.fonts = { AdventPro: { normal: 'AdventProRegular.ttf',

   }, }

4. Create a simple setup for testing out the font. Example: var docDefinition = { content: 'startűáőúéöüóend', defaultStyle: { font: 'Ultra' } };

5. Checking the pdf. Example: pdfMake.createPdf(docDefinition).open();

The required result should be:

The PDF should contain "startűáőúéöüóend" in the style of the set font.

However the result is:

I've tried out all four (AdventPro, Andika, SpecialElite and lastly the Ultra) fonts, and all of them work (it shows all the basic characters in the current font style) except the special characters.

Relevant Code snippets

I am importing the pdfmake libary from cdn to my cshtml file

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.8/pdfmake.min.js" integrity="sha512-uVTNNXu6Z1rrgpMLuErTMferac7mGwfA7/oXfuGbpSmBqcopa8jCURWE1rBF3LMg7Zir+avOX807eGwHaL7akA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.8/vfs_fonts.min.js" integrity="sha512-EFlschXPq/G5zunGPRSYqazR1CMKj0cQc8v6eMrQwybxgIbhsfoO5NAMQX3xFDQIbFlViv53o7Hy+yCWw6iZxA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

I am using it at my JS file. Here is the relevant code:

pdfMake.vfs['AdventProRegular.ttf'] = AdventProRegular;
pdfMake.vfs['Andika.ttf'] = Andika;
pdfMake.vfs['SpecialElite.ttf'] = SpecialElite;
pdfMake.vfs['Ultra.ttf'] = Ultra;

pdfMake.fonts = {
    AdventPro: {
        normal: 'AdventProRegular.ttf',

    },
    Andika: {
        normal: 'Andika.ttf'
    },
    SpecialElite: {
        normal: 'SpecialElite.ttf'
    },
    Ultra: {
        normal: 'Ultra.ttf'
    },
};
var docDefinition = {
    content: 'startűáőúéöüóend',
    defaultStyle: {
        font: 'Ultra'
    }
};
// Create PDF and open in new window
pdfMake.createPdf(docDefinition).open();

Project info: .Net project, with cshtml with Javascript, and I am developing it in Microsoft Visual Studio Community 2022 (64-bit) and testing it out in Chrome browser in Windows OS.

Answer 1

The problem was the mismatch between the saved Javascript file(which has the pdfMAke) and how pdfMAKE itself reads the text and which kind of encoding the Font is using in cmap.

Saved JS file <--> pdfMAke <--> Font encoding triangular

You can be sure that your font glyphs will be rendered perfectly if the Js file which includes the pdfMAke and the Font and the pdfMAke itself using the same encoding. Of course most of the cases your JS file will be in a wrong encoding, as the Fonts using UTF-8 and pdfMake reads content as UTF-8, but it could happen for mismatch between pdfMAke and your chosen Font too so be sure.

Maybe it's unnecessary to check between the pdfMake text reading encoding and what the chosen Font file is using for translating the glyphs, because pdfMake only allows Fonts that are using the same(UTF-8), I don't know.., but good to know that fact that are 3 players in this game!

So to be sure that your chosen font will be printed to the PDF, check these:

1. Your chosen Font contains the glyhs you need
2. Your chosen font uses the same encoding as pdfMake
3. Your JS file is saved at the same encoding as pdfMake and your chosen font
4. Don't be misled by your code editor. Your code editor most probably will show the characters correctly, but it does not mean it will save it as it should be saved.

In my case, the Visual Studio showed me correctly the characters I wrote, but saved it in not the right encoding for pdfMake and my Font. For that you have to Save it in Advance saving where you can choose encoding.

Here is the detailed breakdown of the case:

Keyboard Layout and Character Input: The keyboard layout of your computer, such as a Hungarian keyboard in this case, allows you to input a wide range of characters specific to your language. This is primarily about how you enter characters into your system and is independent of how these characters are stored or processed in files.

Character Display in Visual Studio: Visual Studio, being a robust IDE, can display a variety of characters in its editor. This capability means that even if you can see characters like 'éáőúóüö' correctly in the editor, it doesn't automatically ensure they are stored correctly in the file. The display is separate from the file's encoding.

Saving Files with Correct Encoding: When saving files in Visual Studio, especially those containing special or non-ASCII characters, the encoding used is crucial. If the file's encoding doesn't support these characters, they might not be saved correctly. This is important when these files are used by other tools or software. For instance, with JavaScript files used in pdfMake, ensuring the correct encoding (like UTF-8) is vital for pdfMake to correctly interpret the characters.

Choosing the Right Font: Ensure that the font you've chosen for your PDF document in pdfMake includes the necessary glyphs for the characters you're using. This can be checked by reviewing the font's character set or using tools like Inkscape to inspect the font.

Matching Font cmap with Encoding: Ensure that the font's cmap (Character to Glyph Index Mapping) is compatible with the encoding of your text and with pdfMAke. For example, if your text is in UTF-8 encoding, the font's cmap should correctly map these UTF-8 characters to the appropriate glyph IDs. This ensures that pdfMake correctly renders the characters in the PDF document. Knowing which encoding the Font is using for mapping and which encoding pdfMAke uses when reading text is necessary, if your solution is not working properly.