Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adds support for letter spacing #2066

Open
wants to merge 4 commits into
base: develop
Choose a base branch
from

Conversation

kennethormandy
Copy link

Description

This pull request adds support for letter spacing, via the growing support for the canvas letter spacing property, and the existing support in SVG.

All browser tests are passing, including some new ones for this feature.

Example

example

var text = new PointText({
  fontFamily: 'Charter',
  fillColor: 'black',
  content: 'Paper.js',
  // Etc.

  letterSpacing: 10,
});

API considerations

I’d be interested in getting your feedback on a couple of possible adjustments, @lehni:

  • Number only? Should letterSpacing only accept a number that’s intended to be relative to the font size, like 0.2, rather than a value with units, like '10px'? Ie. Treat all values like ems? This appears to be what OpenType.js does, and it feels like the better way to use it to me.
  • Tracking or Letter Spacing Depending on that, should it actually be called tracking, and use integers? I tend to prefer the CSS-like names, but it feels a bit like leading and justification in that tracking would be the more expected name within Paper.js.

Related issues

  • None that I could find

Checklist

  • New tests added or existing tests modified to cover all changes
  • Code conforms with the JSHint rules (yarn run jshint passes)

Thanks for considering this, and for all the great work on this library over the years!

@jtuffier
Copy link

Hi @kennethormandy , and thank you for working on this subject. I was waiting for this for the last 2 years.
I have integrated your changes in my Angular application where I use paperJS, and everything seems to work perfectly in development mode.
I have an issue when I package my application in Electron : the letter spacing does not work at all. I checked in my JS scripts and I clearly see that the letter-spacing is in these scripts as expected. Do you have any idea why it does not work in Electron ?
I use Angular 15 and Electron 28.

@kennethormandy
Copy link
Author

@jtuffier Glad it was useful for you! My guess would be that the underlying version of Chromium, depending on what version of Electron you’re using, might not support the letter spacing feature yet. So it’s like you’re viewing it in an older browser. The links in the PR description should still be relevant for that.

@jtuffier
Copy link

@kennethormandy You were right, I was using the latest version for development (v33.0.0), but once my application was packaged I was using Electron v8.2.4. After updating the Electron dependency to v33.0.0 for my packaged application ,it works like a charm. Many thanks for your great support.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants