Japanese Characters in PDF

General Q&A
1

Printing HTML containing Japanese characters via the @journeyapps/pdf-reports npm package shows either no text or unicode square place holder characters.

A code example would be

   
    const html = 
` 
<!doctype html>
<html>
    <head>
    <meta charset="utf-8">       
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+JP">
    <style>
        .serif_font {
            font-family: "Helvetica Neue",Arial,sans-serif,"Segoe UI Symbol"
        }

        .noto_font {
            font-family: 'Noto Sans JP', serif;
        }
    </style>
   ​</head>

  ​<body>
    <p>No class: 連載</p>
    <p class="serif_font">Serif Font class: 連載</p>
    <p class="noto_font">Noto Font class: 連載</p>
    <div>Some random div text</div>
   ​</body>
</html>
`

    const pdf_result = await pdf.generatePdf({ html: html });

The output looks like:

image
image1818×728 23.3 KB

2

This was solved by adding a Google font which supports the Japanese characters.

In the HTML the following was added to the head

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&family=Noto+Sans+TC:wght@400;700&family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=block" rel="stylesheet">
<style type="text/css"> * {font-family: 'Noto Sans','Noto Sans TC','Noto Sans SC'; font-display: block;}</style>

Be sure to add the font-display: block; CSS property when using webfonts.

2 Likes