-
Notifications
You must be signed in to change notification settings - Fork 129
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
2.0.4 breaks measureWidth #30
Comments
Could you provide me with information about
So I can help figuring out where the problem might be |
You are right, that commit 324d1bf is indeed faulty - which I'm going to revert on master. The canvas Looks like this might be a viable workaround. |
Thx for your fast response. |
@pablosichert did this workaround ever get added? |
I just tested some code: const canvas = document.createElement('canvas');
// document.body.append(canvas);
canvas.style.letterSpacing = '1px';
const context = canvas.getContext('2d');
context.measureText('foo'); It only affects the measuring in Chrome and only if you uncomment the second line, which means that it only works if the canvas is mounted to the DOM. I wouldn't like to add code that is so dependent on the browser. |
A better solution is to manually calculate letter/word spacing in const targetStyle = window.getComputedStyle(target);
const letterSpacing = parseSpacing(targetStyle['letter-spacing']);
const wordSpacing = parseSpacing(targetStyle['word-spacing']);
const context = this.getCanvasContext(targetStyle);
const widthWithoutSpacing = context.measureText(text).width;
const widthWithSpacing = widthWithoutSpacing + (
letterSpacing * (text.length - 1) +
wordSpacing * (text.trim().split(/\s+/).length)
); It works in all browsers, not just Chrome. |
The previously mentioned solution would also work – as in not break. But the behavior would diverge depending on the browser. I suppose you are suggesting to introduce a I think I'd rather use a partially-supported implementation than doing it manually, unless that would mean supporting a wider selection of browsers. |
In theory, every browser should calculate letter/word spacing the same way. Manually calculating letter/word spacing, rather than relying on the browser to calculate it via |
I see your point, could be worth a shot. Would you like to open a PR for that? I'd assist you in updating the test |
Will take a look! |
I started using this great lib today but had a problems with it by not truncating to specified lines. It always truncated to more lines. I figured it this does not happen in 2.0.3.
When i revert the change made here: 324d1bf it works again.
The text was updated successfully, but these errors were encountered: