Weird jump using `textAscent() and `textDescent()`

[vkbr]

From the example of textAscent() in reference I built a littel test. Actually i was going to ask a different question, but then I find a wierd behavior that I can not understand:

There is a jump in values of textAscent and textDescent when textSize changes from 193.13 to 193.15.

Could not understand why.

the code, heavily based on the example:

//move mouse to set font size
let base;
let scalar;
let asc;
let dsc;
function setup() {
  createCanvas(400, 400);

  base = 350;
  scalar = 0.8; // Different for each font
}

function draw() {
  background(220);
  //alter font size - i narrowed dowm the values, but you can change this
  textSize(map(mouseY, 0, height, 180, 200));

  // asc and desc calc
  asc = textAscent() * scalar;
  dsc = textDescent() * scalar;

  //baseline
  stroke(20, 240, 240);
  line(0, base, width, base);

  //draw asc desc
  stroke(240, 240, 10);
  line(0, base - asc, width, base - asc);
  line(0, base + dsc, width, base + dsc);

  //the text
  text("dp", 10, base); // Draw text on baseline
}

function mouseMoved() {
  console.log(
    `text size= ${nf(textSize(), 3, 2)} asc= ${nf(asc, 3, 2)} dsc = ${nf(
      dsc,
      3,
      2
    )}`
  );
}

the sketch in the editor

p5.js Web Editor

[vkbr]

An static example, am I missing some stupid thing here or maybe this is a bug?

let base;
let scalar;
let asc;
let dsc;
function setup() {
  createCanvas(500, 400);

  base = 350;
  scalar = 0.8; // Different for each font
}

function draw() {
  background(220);
  
  // above 194 weird results?
  textSize(194);
  // asc and desc calc
  asc = textAscent() * scalar;
  dsc = textDescent() * scalar;

  //baseline
  stroke(20, 240, 240);
  line(0, base, width, base);

  //draw asc desc
  stroke(240, 240, 10);
  line(0, base - asc, width/2, base - asc);
  line(0, base + dsc, width/2, base + dsc);

  //the text
  text("dp", 10, base); // Draw text on baseline
  
  
  ///// below, 194 (193) the expected result
  textSize(193);

  // asc and desc recalc
  asc = textAscent() * scalar;
  dsc = textDescent() * scalar;
  
  //baseline
  stroke(20, 240, 240);
  line(0, base, width, base);
  
  //draw asc desc
  stroke(240, 240, 10);
  line(width/2, base - asc, width, base - asc);
  line(width/2, base + dsc, width, base + dsc);

  //the text
  text("dp", 250, base); // Draw text on baseline
}

looks like this:

[vkbr]

Im done for the night will came back to investigate, weird enough if you change the size of the window, the behavior comes and go… So now there is to many variables to isolate, later I’ll try.

[quark]

I ran your code using scalar = 1 so I could check the actual values returned by textAscent and textDescent but I couldn’t reproduce your result. I got

Although the actual values for textAscent and textDescent varied with the web browser scale the difference between 193 and 194 was tiny or zero

[vkbr]

Thanks @quark, I haven’t been able to return to this yet. But I’ve noticed a diferent behaviour across browsers. In p5js online editor if you move de division in the page (between the code and the canvas) the lines jumps, even with scalar = 1. But I think the editor is not using the last version of p5js… so I’ll need to do some more tests.

Anyway, how the window’s size relate to textAscent() and textDescent() is a mistery to me.

thanks for your input.