Character corruption occurs when enabling subsets for some Japanese and Chinese fonts

[hand-dot]

Describe the bug

When using the NotoSans Japanese OTF font and enabling subsetting, character corruption occurs. (In this example, I'm entering "田中太郎", but it's not rendering correctly)

To Reproduce

import { Template, BLANK_PDF, generate } from '@pdfme/generator';

const font = {
  notosanscjk: {
    data: fs.readFileSync("fonts/NotoSansCJKjp-Regular.otf"),
  },
}
const template: Template = {
  basePdf: BLANK_PDF,
  schemas: [
    {
      a: {
        type: 'text',
        fontName: 'notosanscjk',
        position: { x: 10, y: 10 },
        width: 100, height: 100,
      },
    },
  ],
};
const inputs = [{ a: '田中太郎' }];

generate({ template, inputs, options: { font } }).then((pdf) => {
  console.log(pdf);

  // Browser
  // const blob = new Blob([pdf.buffer], { type: 'application/pdf' });
  // window.open(URL.createObjectURL(blob));

  // Node.js
  // fs.writeFileSync(path.join(__dirname, `test.pdf`), pdf);
});

Expected behavior

The same text as the input values in inputs should be rendered in the PDF

Your Environment

- pdfme package(@pdfme/generator or @pdfme/ui): @pdfme/generator
- pdfme version: 1.1.9
- Operating system: macOS Ventura v13.0.1
- Node.js version or Browser name & version: Node.js v18, Chrome Version 112.0.5615.49

Your Error Log

None

Additional context

This issue is more likely a problem with fontkit, which is used by pdf-lib, rather than a problem with pdfme itself.
Reference: Hopding/pdf-lib#207 (comment)

Development of pdf-lib and @pdf-lib/fontkit is currently stalled, but pdfme developers will work on resolving this issue by creating a fork of pdf-lib.

[hand-dot]

I have found that this problem probably occurs with CFF outlines in OTF fonts.

We will try if we can fix the problem by modifying the fontkit file below and using the latest fontkit with a forked pdfme/pdf-lib.

• fontkit/src/subset/CFFSubset.js #encode

@azure06
We will start by using the latest fontkit in pdf-lib and then modify CFFSubset.js.

• Use latest fontkit with pdfme/pdf-lib
• Fix fonkit CFFSubset.js #encode if needed.

---

About OTF and CFF

OTF (OpenType Font) is a digital font file format developed jointly by Microsoft and Adobe, which combines the advantages of both TrueType fonts (TTF) and PostScript fonts. OTF is capable of storing a large number of characters and glyphs (the shapes of characters) within a single file, and it also provides advanced layout and typography features. This enables consistent display and printing across various languages and styles.

CFF (Compact Font Format) is a type of outline format used within OTF fonts, specifically for PostScript-based fonts. CFF is designed to efficiently compress the outline data, which results in smaller font file sizes. This, in turn, improves performance on the web and digital devices.

Generally, there are two types of outline formats used in OTF fonts. OTF (CFF) refers to PostScript-based fonts that utilize CFF technology, offering high-quality output. On the other hand, OTF (TrueType) uses TrueType outlines and provides broader compatibility.

The main difference between the two lies in the outline format used. However, since both are OTF fonts, there isn't a significant difference in terms of functionality or convenience. Depending on specific use cases or situations, one may be more suitable than the other—either OTF (CFF) or OTF (TrueType).

[hand-dot]

Fixed!
pdfme/pdf-lib@ba3c351

[hand-dot]

Published @pdfme/pdf-lib

• Next, We have to test @pdfme/pdf-lib on Browser and Node.js.
  • Fix type error
  • Testing at Browser and Node.js,
• After that, We use @pdfme/pdf-lib on pdfme.
• Release new version @pdfme/pdf-lib.
• Close this issue.

[hand-dot]

Now, I'm trying to use @pdfme/pdf-lib in @pdfme/generator, but I got this error

Argument of type 'typeof import("/Users/kyohei/Develop/pdfme/node_modules/@types/fontkit/index")' is not assignable to parameter of type 'Fontkit'.
  The types returned by 'create(...)' are incompatible between these types.
    Type 'Font' is missing the following properties from type 'Font': cff, head, post, createSubsetts(2345)

So, I have to update src/types/fontkit.ts.
When we test in nodemon folder, we couldn't realize this error because we use import { PDFDocument, rgb } from '../../dist/pdf-lib';. this module hasn't type...

But I confirmed working correctly at node and browser in pdfme-playground.

[hand-dot]

Released in 1.1.10!!
https://github.com/pdfme/pdfme/releases/tag/1.1.10

[jameshalsall]

Are there any plans to contribute this fix upstream so we can avoid using a fork of pdf-lib?