CODEWITHSUNDEEP
javascriptgoogle-chromecanvasfontskerning
David Hellsing
David Hellsing

Reputation: 108472

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

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:

enter image description here

Firefox:

enter image description here

Safari:

enter image description here

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.

Upvotes: 7

Views: 2162

Answers (2)

Krisztián Balla
Krisztián Balla

Reputation: 20331

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:

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.

Upvotes: 1

Lucky
Lucky

Reputation: 17345

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.

Upvotes: 6

Related Questions