[Question] How to add Kerning and Line Height to context.fillText()

[shreyasp]

I have a plugin for Sketch App which I use to extract the data from sketch file and convert to JPEG using node-canvas with certain modifiable fields.

Templates (Sketch File) use Kerning (Character Spacing) and Line Height because of which modifiable fields don't replicate the accurate style when compared with templates.

Is there a way to add Kerning and Line Height to context object so that the template can be accurately mirrored with its derivative JPEG?

[asturur]

Not that i know of.
Normal canvas does not even wrap text in lines.

[zbjornson]

Re: Kerning, see #1014 and feel free to add your thoughts.

Re: Line-height: since there is no text wrapping in HTML canvas, I'm not sure this is applicable, is it?

[chearon]

In #1014 it sounds like we aren't going to add letter-spacing. There's some hacky solutions on SO but technically you'd need something like fontkit instead of fillText() since you need grapheme awareness.

Implementing line height isn't difficult but first you have to do line breaking. First you mark which characters can be broken to the next line, then measure the rendered-size (like with ctx.measureText()) up until each breakable character (improvement: do it with a binary search) and greedily fill the available width with lines. For good language support you can use something like linebreak.

When you have your lines determined, use line-height to determine the leading. CSS uses the formula leading = line-height - (ascender + descender), ascender and descender come from the font file. Half the leading goes on the top, then translate down by the ascender and that's the baseline. Draw the text, then add the descender and the other leading/2 and repeat everything for the next line.

[asturur]

I think linebreak should be another library implementation or an application implementation.

Canvas does not have lineHeight or lineBreak, and shouldn't be implemented here.
There are already other higher level libraries that include this logic on top of canvas, (fabricJS is one) and work under node with node-canvas.

[chearon]

Yeah, I don't think OP was suggesting that since it was marked as [Question]. Feel free to continue discussion here but closing since it's been answered and #1014 covers letter spacing.