Can't get the font example to work on Ubuntu

[joefreeman]

The font example (examples/font.js) isn't working for me as expected when I run it on an AWS Ubuntu EC2 instance: it's just rendering the same font four times (see below). When I run this locally on OS X, I get four different fonts (as expected).

I think my install steps might just be missing something, but I don't seem to be getting any errors back, and I've tried debugging (via console.log and fprintf) without being able to find anything that looks wrong.

Here are my reproduction steps:

• Launch EC2 instance with the "Ubuntu Server 14.04 LTS (HVM), SSD Volume Type" image (ami-29ebb519).

• Install the node-canvas dependencies:

  sudo apt-get update
  sudo apt-get install libcairo2-dev libjpeg8-dev libpango1.0-dev libgif-dev build-essential g++
  

• Get the latest node-canvas from GitHub, and install:

  sudo apt-get install git nodejs-legacy npm
  git clone https://github.com/Automattic/node-canvas.git
  cd node-canvas
  npm install
  

• Run the example:

  cd examples
  node font.js
  

Here's the output I'm getting on the Ubuntu instance:

[Tharit]

I just encountered the same problem when upgrading from a previous version. Seems like Custom Font support is currently broken.

[jakeg]

Custom font support is very much working but you need to remove a line if you're using node-canvas with pango support (which you should be). Remove or comment out this line from font.js:
ctx.addFont(pfennigFont);
... and it should work :)

[Tharit]

I was just about to post that I figured that out after spending some time debugging the code.
Wish I would have seen your reply sooner - works perfectly indeed, thank you :-)

[joefreeman]

I tried removing the addFont line, but now I get this:

I think this isn't using the Pfennig font, so I'm not sure if this is a step forwards of backwards? Do I need to put the font somewhere special for pango to pick it up?

[gtlbupt]

I find a solution to solve this problem: edit the binding.gyp file and turn off the with_pango flags. I test it on ubuntu 14.04.2 LTS and it work. I hope this may help.

[joefreeman]

@gtlbupt, thanks for the suggestion. I wonder if there's an easier way to disable Pango. Editing the file is going to be a bit awkward/brittle as part of the deployment.

@jakeg, you mention that I should be using Pango - can you explain why? I think this is the default on Ubuntu, although I'm not sure how to confirm that.

[jakeg]

You want pango for things like fallback fonts to work in case of missing glyphs.
I think with pango the font naming is important. This works for me:

Replace

var pfennigFont = new Font('fennigFont', fontFile('Pfennig.ttf'));

with

var pfennigFont = new Font('Pfennig', fontFile('Pfennig.ttf'));

Comment out:

ctx.addFont(pfennigFont);

Then change ctx.font lines to the correct name too

ctx.font = 'bold 50px Pfennig';

And all should work :)

Want fallback fonts for missing glyphs and non-Western characters etc?

sudo apt-get install fonts-arphic-uming fonts-ipafont-mincho ttf-wqy-zenhei ttf-unfonts-core fonts-takao fonts-dejavu ttf-mscorefonts-installer

[joefreeman]

Ah, thank you so much. So I can get it working if I work out the name of the font (which seems to be embedded in the font file, and is not necessarily the file name), and if I remove the addFont call.

But this means that I can't write code that works independently of whether Pango is installed (it's not on my local machine, for example). In the C++ code, there's a HAVE_PANGO constant, but I can't see anything similar that I can access from the JavaScript - am I missing something?

Would it make sense to just ignore calls to addFont when Pango is enabled? (I'm not sure if that would be more or less confusing to the way this works at the moment.)

[Tharit]

I second that suggestion. When working with multiple environments with and without pango support, or when creating a module based on this one, that would make things much easier!

Basically it would be just one small change in context2d.js, and exposing availability of pango from the c code; if pango is disabled, dont check the font registry and never call _setFontFace

[jakeg]

Sounds sensible to me, though I'd also highly recommend using Pango.

[joefreeman]

Here's a PR. I thought it would make sense, in the Pango case, to not ignore the call to addFont, and still allow the font to be referenced using the name provided to the Font constructor. So with this change, the existing example should still work 😃

[espadrine]

Note that since 9a3bde4, this issue causes output that was previously correct to suddenly be incorrect.
In other words, this is (partly) a regression.