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.

Ozellaozen

BTW, it’s the same for SVG but then we have font-kerning: normal; that solves it. I wish we had the same for Canvas... – Ozellaozen

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.

Pumpernickel

I had no idea you could add typographic CSS styles to a canvas element. Thanks! – Ozellaozen

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.

Cyclohexane

Note that these features seem to work now in Chrome 83, and that drawing chars letter by letter has a host of gotchas to be aware of, especially in foreign languages. – Carbonation