Unicode chinese characters not rendering in image

1

Trying to use wkhtmltox to turn an HTML file to an image:

./server.js

const express = require('express');
const fs = require('fs');
const wkhtmltox = require('wkhtmltox');

const app = express();
const converter = new wkhtmltox();

app.get('/tagslegend.png', (request, response) => {
  response.status(200).type('png');
  converter.image(fs.createReadStream('tagslegend.html'), { format: "png" }).pipe(response);
});

var listener = app.listen(process.env.PORT, function () {
  console.log('App listening on port ' + listener.address().port);
});

And ./tagslegend.html:

<!doctype html>
<html>
  <body>
    <dl>
      <dt>中文</dt><dd>In mandarin language.</dd>
    </dl>
  </body>
</html>

I’m expecting back an image of the above HTML, e.g. (how my browser would render it):

enter image description here

Instead I get back this:

enter image description here

How can I render that HTML to a png dynamically with the correct chinese characters and serve it to clients?

2

The wkhtmltox npm library uses the binary in the server, so it will only render fonts that are available in the system (server) - these are different from your browser since it uses your local fonts.

To make this work, you’ll need to download TrueType font or something like WenQuanYi Micro Hei font and place them in the ~/.local/share/fonts or ~/.fonts folders and refresh the font cache with $ fc-cache -fv to make them available.

You can confirm if they are available by running fc-list | grep "Name of the font".

1 Like
3

Which font should I use? The download page for ‘WenQuanYi Micro Hei’ doesn’t work, what other fonts do you think would have chinese characters?

4

Found this website that works http://www.clearchinese.com/resources/fonts.htm

5

I did this:

$ cd
$ wget http://www.clearchinese.com/images/fonts/HDZB_35.TTF
$ mkdir .fonts
$ mv HDZB_35.TTF .fonts
$ fc-cache -fv

But still

$ fc-list | grep "HDZ"

shows nothing.

6

@NoobDoesMC Here’s the thing, your steps are good (you’re just missing $ mv HDZB_35.TTF .fonts) but the font is faulty, I was unable to install it in my local machine.

Try with another font from another website and try install it the same way. When you run $ fc-cache -fv it should print something similar to this:

/app/.fonts: caching, new cache contents: 1 fonts, 0 dirs

Where 1 fonts (or the amount you installed) are detected in the folder.

7

Maybe https://github.com/topikachu/createfont/blob/master/WenQuanYi%20Micro%20Hei.ttf

1 Like
8

I found one called GoJuOn, what I did is:

  1. Downloaded the font into my local
  2. Upload it to the assets folder of my Glitch project
  3. Copy the URL
  4. wget from the console to the .fonts folder
  5. Renamed it and ran $ fc-cache -fv 
/app/.fonts: caching, new cache contents: 1 fonts, 0 dirs
  1. Profit
$ fc-list | grep "GoJuOn"
/app/.fonts/GoJuOn.TTF: GoJuOn,醐銃怨:style=Regular

And thanks @Gareth to post another option! The steps above apply for that font too.

1 Like
10

Awesome, I got a font installed:

$ fc-list | grep 'Wen'
/app/.fonts/WenQuanYi Micro Hei.ttf: WenQuanYi Micro Hei,文泉驛微米黑,文泉驿微米黑:style=Regular

Do I need to do anything to have my image switch to this font for chinese characters?

Does the code from OP need to be modified to work with the chinese font?

11

You’ll need to specify the font through CSS in your HTML file. Specifically that <dt> tag.

12

I just tried like this

<html>
  <head>
    <style>
      .cmn {
        font-family: 'WenQuanYi Micro Hei';
      }
    </style>
  </head>
  <body>
    <dl>
      <dt class="cmn">中文</dt><dd>In mandarin language.</dd>
      <!-- ... -->

But it still renders like before

13

Just needed to add

<meta charset="utf-8">

in head, then i don’t even need to specify font or anything anymore.

14

That makes sense, I assumed you were adding the regular HTML meta tags. I’m glad you were able to figure it out, but hey, now we know how to add custom fonts :grimacing:

15

haha yeah :stuck_out_tongue: