How to control the font kerning for Canvas fillText() in Chrome?

Question

I'm trying to create a decent cross-browser rendering engine of canvas text. I have noticed that kerning pairs don't render properly in Chrome, but in Safari and Firefox they work fine.

Chrome:

Firefox:

Safari:

Try the fiddle here: http://jsfiddle.net/o1n5014u/

Code sample:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "40px Arial";
ctx.fillText("VAVA Te", 10, 50);

Does anyone have any workaround? I have looked for bug reports, but I can't find anything.

Answer 1

From W3 CSS3 Fonts:

To explicitly turn on the font-kerning you need to set the font-kerning property to normal,

canvas{
    font-kerning : normal;
}

Check this JSFiddle

Based on this article on Cross-browser kerning pairs & ligatures, Alternatively you can use the optimizeLegibility like this,

canvas{
     text-rendering: optimizeLegibility;
}

Check this JSFiddle

The declaration is currently supported by: Safari 5, The Webkit Nightlies & Chrome.

Firefox already uses optimizeLegibility by default for text sizes above 20px.

Answer 2

It's not much of a help, but we had this same issue with a text processor application that is running in a browser.

We tried the following canvas settings that don't work:

• canvas.style.fontKerning (settings this to none should disable kerning, but it does not work)
• canvas.style.textRendering (settings this to optimizeSpeed should disable kerning, but it does not work)
• canvas.style.letterSpacing (settings this to 0 should disable kerning, but it does not work)

Our solution is to prevent the kerning from happening, by drawing each "letter" one-by-one after each other onto the canvas. For this however you need to calculate the glyph widths using the font metrics from the font file.