fontToPoints does not use textAlignment

[R4chel]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• p5.strands
• WebGL
• DevOps, Build process, Unit testing
• Internationalization (i18n)
• Friendly Errors
• Other (specify if possible)

p5.js version

v.1.9.0 but also tried v1.11.11 and saw different issues

Web browser and version

safar v26.1

Operating system

Mac OS 15.7.3

Steps to reproduce this

Steps:

1. load a font
2. set textAlignment
3. use the textToPoint() and draw those points
4. change textAlignment and draw those points
5. the text does not move

Snippet:

This snippet is a modified version of the textAlign example.

let fontSize = 100;

function preload() {
  font = loadFont("/assets/inconsolata.otf");
}


function setup() {
  createCanvas(1000, 1000);
  textFont(font);
  background(200);

  strokeWeight(0.5);

  // First line.
  line(0, 120, width, 120);
  textAlign(CENTER, TOP);
  drawPoints(font.textToPoints('TOP', 50, 120, fontSize));

  // Second line.
  line(0, 370, width, 370);
  textAlign(CENTER, CENTER);
  drawPoints(font.textToPoints('CENTER', 50, 370, fontSize));

  // Third line.
  line(0, 620, width, 620);
  textAlign(CENTER, BASELINE);
  drawPoints(font.textToPoints('BASELINE', 50, 620, fontSize));

  // Fourth line.
  line(0, 970, width, 970);
  textAlign(CENTER, BOTTOM);
  drawPoints(font.textToPoints('BOTTOM', 50, 970, fontSize));

  describe('The words "TOP", "CENTER", "BASELINE", and "BOTTOM" each drawn relative to a horizontal line. Their positions demonstrate different vertical alignments.');
}



function drawPoints(pts) {
  for (pt of pts) {
    circle(pt.x, pt.y, 2)
  }
}

Some Extra Details

While trying to make a simple example for this issue I discovered a few related surprises:

1. I was initially on p5 v.1.9.0 and the text alignment wasn't respected but when I switched to v.1.11.11 all of the points that were being drawn shifted slightly down.

2. fontSize being set at the sketch level was also not respected but changed the alignment of all words

3. My belief that the textAlignment should be used was based on the description on the p5 reference for textToPoints which mentions default textAlignment behavior.

[dhowe]

The correct behavior can be seen in v2.x:

https://editor.p5js.org/rednoyz/sketches/sFuLHKROB

In v1.11, for the same code I see the images below, depending on whether the font's size is explicitly set (image 1) or only passed to textToPoints() (image 2).

Apparently when fontSize is passed only as an argument to font.textToPoints and not set via textSize or textFont, the alignment is no longer correct.

https://editor.p5js.org/rednoyz/sketches/7ofPzThcj

https://editor.p5js.org/rednoyz/sketches/1FWZXxht1