Support context.letterSpacing

[bhouston]

Issue or Feature

I would like to be able to adjust the kerning/letter-spacing of fonts when drawing text on node-canvas. In a browser this is possible by setting canvas.style.letterSpacing to something like "-3px". But canvas.style I believe does not exist on node-canvas.

(BTW we love node-canvas, it is an amazing piece of software.)

Steps to Reproduce

Interactive example of it working with browser-based Canvas:

https://jsfiddle.net/hg4pbsne/1/

Example code:

  canvas.style.letterSpacing = '-5px';
  ctx = canvas.getContext('2d');
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.font = '4em sans-serif';
  ctx.fillText('World', can.width/2, can.height*3/4);

This is not possible to reproduce with node-canvas as there is no canvas.style property exposed.

Your Environment

All versions of node-canvas.

My Suggestion

We add a non-standard ctx._letterSpacing parameter to node-canvas that exposes this functionality?

[Hjlxc]

I found this possible solution that uses measure text to compute it manually:

https://gist.github.com/talltyler/5345894

[chearon]

It could be done inside canvas with pango_attr_letter_spacing_new and pango_layout_set_attributes but I'm not sure if adding more non-standard features is a good path to go down.

[JamesCarlyleClarke]

Perhaps look at https://stackoverflow.com/questions/33955754/adding-letter-spacing-in-html-canvas (my post on Stack Overflow) that proposes a different method to the link above that resolves some of the issues mentioned in the link above. I'm sure it could be adapted.

[asturur]

I do not think the canvas style should influence drawing on the bitmap data.
That would throw off jsdom + node-canvas combinations i believe.

[whatyoubendoing]

Chrome now supports letter-spacing in v56 CreateJS/EaselJS#872. Could be time to revisit this.

[asturur]

if it is part of canvas api why not. we would need a jsdom patch too then.

At this point the title 'kerning' is misleading. Letter spacing is not kerning.

[zbjornson]

Tracking/letter-spacing is not part of the HTML Canvas spec. Chrome (and only Chrome) applies the canvas element's current letter-spacing CSS value to the context when the context is retrieved (see https://stackoverflow.com/questions/8952909/letter-spacing-in-canvas-element for background and several workarounds). @asturur I'm not sure what your older comment meant (#1014 (comment)) but it sounds like a "nay" for that approach.

In any case, I'm not opposed to adding it as either canvas.style.letterSpacing or ctx._letterSpacing. (@LinusU is usually the maintainer most interested in staying strictly faithful to the spec.)

[asturur]

my old comment was a please no

I'm developer/mantainer of fabricJS and for me this node-canvas is the way to support the library in node. The less offspec things it does, the better i feel.

Imagine if i want to throw a letterSpacing in the middle of the things, as a personal preference, no.

If that would be a canvas api standard part, why not.

Adding a .style object to the node-canvas object that is not meant to be in the DOM is confusing in my opinion.

[samizdatco]

I totally agree with @asturur that adding a .style.letterspacing value to the canvas object feels like an unnatural way to access this feature. My preference would be for it to be attached to the context rather than the canvas and ideally in a way that is independent of the current ctx.font setting. In addition it would be better for it to exist as an addition to the API rather than a non-standard interpretation of an existing attribute.

I took a stab at adding the feature in the form of a new ctx.textTracking attribute here: #1615

Here's a quick demo:

ctx.fillStyle = 'black'
ctx.font = '48px "Zilla Slab"'

ctx.fillText("Anyone who would letterspace lowercase", 30,75)

ctx.textTracking = 500
ctx.fillText("would steal sheep", 30,150)

ctx.textTracking = -60
ctx.fillText("—FREDERIC GOUDY", 30,225)

[asturur]

Im fifty fifty on this.
As a fabricjs mantainer my dream of course is a node tool that behaves as a canvas.
Adding extra functionality related to drawing does not hurt but does not help.
This seems a specific pango feature, and hard to mantain if developers decide to move away from pango/cairo and use skia or something else.