Add support for letterspacing #1615
Conversation
- pango has a PANGO_VARIANT_SMALL_CAPS variant that can be added to the font description, but setting it doesn't cause text to be rendered in small-caps, even if the font supports it - adding the appropriate opentype features to the layout's attributes list will use the font's small-caps glyphs if it provides them
- the font-variant state will get out of sync with the fontDescription across context-saves & restores unless we keep a copy of the PangoAttrList around
- the pango NEWS file suggests 1.37.1 was where the `pango_attr_font_features_new` call was added...
- it can be enabled if/when the pango version is updated
- textTracking can be set to a positive or negative integer corresponding to the number of thousandths-of-an-em to add or remove between glyphs - the value defaults to 0 - it is part of the context state and is affected by save() and restore() - since it is expressed in em-units, spacing will remain proportional if the font size or family are changed
…node-canvas into font-tracking
| canvas.toDataURL('image/jpeg', quality, (err, jpeg) => { }) // spec-following; quality from 0 to 1 | ||
| ``` | ||
| ### CanvasRenderingContext2D#textTracking |
There was a problem hiding this comment.
Is this present in the spec for CanvasRenderingContext2D, or supported by any browsers?
There was a problem hiding this comment.
No, this would be an extension since HTML Canvas makes no provisions for setting letterspacing. See @zbjornson's summary of current browser behaviors here: #1014 (comment)
| Any updates on this? |
| Sorry for dropping the ball on this one. It seems like there now is a ref: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/letterSpacing Would you be able to tweak this PR to match that? I think that it would be okay to only support |
| still waiting for this feature |
zbjornson force-pushed the master branch 2 times, most recently from 64ed3d8 to ff0f2ab Compare 4 participants
Building on the changes in #1611 (in particular the addition of a
PangoAttrListto the context state), adding support for tracking/letterspacing required minimal additions.The main change is a new context attribute which I've been calling
textTracking, both as a way to avoid confusion with the cssletter-spacingproperty and as a way to signal the units that it uses. In page layout apps, ‘tracking’ is typically a positive or negative integer that expresses the additional space to add or remove in terms of 1/1000 of an em.Using em-based units has the nice effect of keeping the spacing proportions constant even if the font size changes. Expressing the size in thousandths is helpful since typical amounts of letterspacing to add are usually in the range of
50-250(which is more awkward to express in css units:0.05em–0.25em).As with the other
ctx.text*attributes, thetextTrackingvalue is part of the context state and behaves as expected acrosssave()andrestore()calls.