Wrong space width for Baskerville.ttf

[cqx931]

When textFont is switched to Baskerville.ttf, the result from textWidth(" ")is 9. However, the layout with a space width of 9 doesn't match with the line width returned from the whole text string. When space width is equal to 10, the line width matches correctly with the layout.

[dhowe]

is this an issue with p5.js or rita or ... ?

[cqx931]

It is actually an problem with line width instead of space width. I used to calculate the lineW with textWidth(theEntireString). However, it seems to handle space in a different way than I thought.

*Letters in black are generated from textLine(), using text() for each single word and an offset of spaceW, Letters in grey are generated from text() with the full string)

It works fine in default font - Helvetica in this case:

This is how the spacing looks like when I change the font to Arial, the textWidth for each word is correct, but not the space.

It is only an issue with space, because the layouts are exactly the same when there is no space in the string.

So I have fixed the layout issue if I calculate the line width by adding up the text width for each single word and the corresponding space: https://github.com/dhowe/PerceptualReader/pull/4/commits/d1fc3c1370b18a71c9fe5c01577df42160a8a7f8

[dhowe]

Ok, so that is a fix for this particular project, but we need to figure out the larger problem...

Which fonts does this happen with (.ttf or .otf or only some browser fonts or ...)? Is this an issue with p5.js or rita or ... ?

(I assume the problem is with p5.js... if so, please create the simplest case you can using only p5.js and one html file that shows the problem)

[cqx931]

This is related only to p5.js

How space is handled seem to be different for default font compared to a loaded font( even for same font).

http://chenqianxun.com/testcases/p5textTest.html In default font: Line 1: The whole string is written with text() Line 2: Each word is written separately with an offset of the space width

In loaded Helvetica_light.ttf (which is the same as the default font) Line 3: The whole string is written with text(), the spacing is different compared with default font Line 4: Each word is written separately with an offset of the space width

[dhowe]

@cqx931 please create ticket on p5.js repo

[cqx931]

p5 issue: https://github.com/processing/p5.js/issues/1958