Some font letters are missing while render image of the PDF using the Pdfium

[Tamilselvan-Durairaj]

We have faced one issue while rendering pdf image using the pdfium. In that some of the font letter have been missing

Actual Screenshot	Image

We have used the config the custom fonts by using the below code lines :

The sample are committed in the below repository :
https://github.com/Tamilselvan-Durairaj/Pdfium

Publish Sample link for that:
https://tamilselvan-durairaj.github.io/Pdfium/

Document: document

We have been try to implement the user fonts through the FPDF.InitLibraryWithConfig . We have been added the fonts files in the mentioned font location. But the font style isn't apply.

Kindly provide the guidelines to achieve to apply the user fonts to extract image of pdf using pdfium.

[paulocoutinhox]

Hi,

The config "user font paths" is to set a list of string with local paths terminated by null.

You can see here:
https://github.com/chromium/pdfium/blob/d5d89239323fe09856cdef78cdae0ab42d5e5779/docs/getting-started.md#initializing-pdfium

What you can try is embed the fonts in the Emscripten and pass the Emscripten path to "user font paths".

You can try to me modify the "run_task_generate" function inside "modules/wasm.py" to be:

import os

def run_task_generate():
    l.colored("Generating...", l.YELLOW)

    current_dir = f.current_dir()

    for config in c.configurations_wasm:
        for target in c.targets_wasm:
            # paths
            utils_dir = os.path.join(current_dir, "extras", "wasm", "utils")
            template_dir = os.path.join(current_dir, "extras", "wasm", "template")

            relative_dir = os.path.join(
                "build",
                target["target_os"],
                target["target_cpu"],
            )

            root_dir = os.path.join(current_dir, relative_dir)
            main_dir = os.path.join(root_dir, config)
            lib_dir = os.path.join(main_dir, "lib")
            include_dir = os.path.join(main_dir, "include")
            gen_dir = os.path.join(root_dir, "gen")
            node_dir = os.path.join(main_dir, "node")
            http_dir = os.path.join(relative_dir, config, "node")
            lib_file_out = os.path.join(lib_dir, "libpdfium.a")
            fonts_dir = os.path.join(root_dir, 'fonts')

            f.recreate_dir(gen_dir)

            # doxygen
            l.colored("Doxygen...", l.YELLOW)

            doxygen_file = os.path.join(
                current_dir,
                "extras",
                "wasm",
                "doxygen",
                "Doxyfile",
            )

            command = [
                "doxygen",
                doxygen_file,
            ]
            r.run(" ".join(command), cwd=include_dir, shell=True)

            # copy xml files
            l.colored("Copying xml files...", l.YELLOW)

            xml_dir = os.path.join(include_dir, "xml")
            f.copy_dir(xml_dir, os.path.join(gen_dir, "xml"))
            f.remove_dir(xml_dir)

            # copy utils files
            l.colored("Copying utils files...", l.YELLOW)
            f.copy_dir(utils_dir, os.path.join(gen_dir, "utils"))

            # node modules
            l.colored("Installing node modules...", l.YELLOW)

            gen_utils_dir = os.path.join(
                gen_dir,
                "utils",
            )

            command = [
                "npm",
                "install",
            ]
            r.run(" ".join(command), cwd=gen_utils_dir, shell=True)

            # generate
            l.colored("Compiling with emscripten...", l.YELLOW)

            gen_out_dir = os.path.join(
                gen_dir,
                "out",
            )

            f.recreate_dir(gen_out_dir)

            output_file = os.path.join(
                gen_out_dir,
                "pdfium.js",
            )

            command = [
                "em++",
                "{0}".format("-g" if config == "debug" else "-O2"),
                "-o",
                output_file,
                "-s",
                'EXPORTED_FUNCTIONS="$(node function-names ../xml/index.xml)"',
                "-s",
                'EXPORTED_RUNTIME_METHODS=\'["ccall", "cwrap", "wasmExports"]\'',
                "custom.cpp",
                lib_file_out,
                "-I{0}".format(include_dir),
                "-s",
                "DEMANGLE_SUPPORT=1",
                "-s",
                "USE_ZLIB=1",
                "-s",
                "USE_LIBJPEG=1",
                "-s",
                "WASM=1",
                "-s",
                "ASSERTIONS=1",
                "-s",
                "ALLOW_MEMORY_GROWTH=1",
                "-sMODULARIZE",
                "-sEXPORT_NAME=PDFiumModule",
                "-std=c++11",
                "-Wall",
                "--no-entry",
                "--embed-file",
                "fonts@{}".format(fonts_dir)
            ]
            r.run(" ".join(command), cwd=gen_utils_dir, shell=True)

            # copy files
            l.colored("Copying compiled files...", l.YELLOW)

            f.remove_dir(node_dir)
            f.copy_dir(gen_out_dir, node_dir)

            # copy template files
            l.colored("Copying template files...", l.YELLOW)

            f.copy_file(
                os.path.join(template_dir, "index.html"),
                os.path.join(node_dir, "index.html"),
            )

            # change template tags
            l.colored("Replacing template tags...", l.YELLOW)

            f.replace_in_file(
                os.path.join(node_dir, "index.html"),
                "{pdfium-branch}",
                c.pdfium_git_branch,
            )

            # test
            l.colored(
                "Test on browser with: python3 -m http.server --directory {0}".format(
                    http_dir
                ),
                l.YELLOW,
            )

    l.ok()

This function was modified to embed fonts folder from root dir inside the final wasm binary.

You can try load the fonts after using:

FPDF_LIBRARY_CONFIG.m_pUserFontPaths.push('/fonts');

If it works for you, notify me here and i can modify the project to it be default and possible if people want add their own fonts.

[Tamilselvan-Durairaj]

Hi @paulocoutinhox ,

We have check the modification in command like the given below,

"--embed-file",

fonts_dir

But It increases the wasm file size. By the following function , we can load the font data file from the script file

fetch(scriptdirectory+ "/" + "Fonts/arial.ttf").then(function (response) {
   if (response.ok) {
      return response.arrayBuffer();
   }
}).then(function (value) {
    if(value){
        var name = "/usr/share/fonts/" + "arial.ttf";
        PDFiumModule.FS.createPath("/", "/usr/share/fonts/", true, true);
        PDFiumModule.FS.createDataFile(name, null, new Int8Array(value), true, true, true);
    }
});

Thank you for your guidelines.

[paulocoutinhox]

Hi,

This works for you? The fonts was loaded and solve your problem?

Thanks.

[paulocoutinhox]

Hi,

Can you make a pull-request adding some fonts from array in the sample file to make a more robust sample in the project?

It will help a lot.

In this folder:
https://github.com/paulocoutinhox/pdfium-lib/tree/master/extras/wasm/template

Thanks.