P5.js: textWidth returns incorrect value for tab "\t"

[bertlea]

Nature of issue?

• [ x ] Found a bug
• [ ] Existing feature enhancement
• [ ] New feature request

Most appropriate sub-area of p5.js?

• [ ] Color
• [ ] Core/Environment/Rendering
• [ ] Data
• [ ] Events
• [ ] Image
• [ ] IO
• [ ] Math
• [ x ] Typography
• [ ] Utilities
• [ ] WebGL
• [ ] Other (specify if possible)

Which platform were you using when you encountered this?

• [ ] Mobile/Tablet (touch devices)
• [ x ] Desktop/Laptop
• [ ] Others (specify if possible)

Details about the bug:

• p5.js version: 0.8
• Web browser and version: Chrome 75.0
• Operating System: Windows 7
• Steps to reproduce this: textFont('Arial'); textWidth('a\tb') === textWidth('a b');
  The width of the string using tab is showing in canvas is wider than a space, which is expected but the textWidth returns the same width value when replacing tabs with spaces.
  

Feature enhancement details:

New feature details:

[welcome[bot]]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[limzykenneth]

That is the specified behaviour of HTML canvas (more details here). In essense, when measuring the size of a text, a tab character is converted into a space character before any measurement is made. Also the width of a tab character is not fixed as that is something that the renderer or client decides.

[outofambit]

@limzykenneth thanks for sharing that link! this sounds like it would be hard for p5 to work around...

@bertlea have you tried using an actual tab character? that works properly, correct?

aka

textFont('Arial');
textWidth('a    b') !== textWidth('a b');

[bertlea]

@limzykenneth , @outofambit Thank you for the quick responses! The link limzykenneth may explains what I observed and reported, but it will also mean there is no way to get the actual width in a string showing in canvas. Hence the textWidth is useless when there is any tab or other control characters such as EOL in the string.

@outofambit , using "actual tab" is getting the same width as "\t". I guess what you may tried is actually pressed the tab in the HTML page and you see the width is different. But pressing the tab inside HTML, the browser simply entered 2 spaces and that is not an "actual tab". What I tried is to type the string with actual tab in notepad and copy and paste that to the code and the result is the same as using "\t". This is expected as "\t" should be interpreted as an actual tab by javascript.

I found in some case, the font seems affecting the behaviour and I will describe in a separate comment.

[bertlea]

Using the p5js.org page https://p5js.org/examples/typography-words.html to test by changing the setup code to console.out the text width:

function setup() {
  createCanvas(710, 400);

  // Set text characteristics
  textFont(font);
  textSize(fontsize);
  textAlign(CENTER, CENTER);
  console.log('case 1: ' + textWidth('a b'));
  console.log('case 2: ' + textWidth('a\tb'));
  console.log('case 3: ' + textWidth('a b'));
}

If I use the original font (loaded .otf file) then case 1 (use space) will show a different values from case 2 and 3 (using tabs, 2: "\t" and 3: actual tab in string).

However, if I change the font to use "font = 'Arial';" then case 1, 2 and 3 are showing the same width. Unfortunately I cannot replicate that result in other pages.

Anyway, it will be nice to know if there is a way to get the actual width for a sting showing in the canvas. Another issue is the EOL ("\n") is also adding to the string width which it should not, but that is separate problem for now.

[lmccart]

thanks for looking into this! as @limzykenneth and @outofambit mention, this is the behavior of the underlying HTML canvas, so there's not much we can do on the p5 end. any workarounds you find are most welcome, but I will close this issue for now for organizational purposes.