2.0.4 breaks measureWidth about react-truncate HOT 11 CLOSED

The test are working in master and v2.0.3
Here a gif with 2.0.4:

2.0.3:

The sample text has no styles applied.
Code:

<Truncate lines={1}>
  lkajsdöfasd aöskldjföalkjdsfölakjdöfiaüoeiasdfölajsdlfjalekjrbalsdjbflasjbdfabsdaö
</Truncate>

from react-truncate.

You are right, that commit 324d1bf is indeed faulty - which I'm going to revert on master.

The canvas context.font API does not expect a letter spacing / word spacing argument.

Looks like this might be a viable workaround.

from react-truncate.

Will take a look!

from react-truncate.

Could you provide me with information about

• which font-related CSS rules are applied to your truncated text
• does npm test succeed locally for both revisions
• screenshots

So I can help figuring out where the problem might be

from react-truncate.

Thx for your fast response.

from react-truncate.

@pablosichert did this workaround ever get added?
http://stackoverflow.com/a/40469992

from react-truncate.

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.

from react-truncate.

A better solution is to manually calculate letter/word spacing in measureWidth.

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.

from react-truncate.

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 parseSpacing method that falls back to 0?

I think I'd rather use a partially-supported implementation than doing it manually, unless that would mean supporting a wider selection of browsers.

from react-truncate.

But the behavior would diverge depending on the browser.

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 canvasContext.measureText, works in every browser.

from react-truncate.

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

from react-truncate.