Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TextToPoints() ignores text alignment #6893

Open
1 of 17 tasks
araid opened this issue Mar 18, 2024 · 4 comments · May be fixed by #6967
Open
1 of 17 tasks

TextToPoints() ignores text alignment #6893

araid opened this issue Mar 18, 2024 · 4 comments · May be fixed by #6967

Comments

@araid
Copy link

araid commented Mar 18, 2024

Most appropriate sub-area of p5.js?

  • Accessibility
  • Color
  • Core/Environment/Rendering
  • Data
  • DOM
  • Events
  • Image
  • IO
  • Math
  • Typography
  • Utilities
  • WebGL
  • Build process
  • Unit testing
  • Internationalization
  • Friendly errors
  • Other (specify if possible)

p5.js version

1.9.1

Web browser and version

Chrome 122.0.6261.129

Operating system

macOS

Steps to reproduce this

Steps:

  1. Load an external font
  2. Define a multiline text string (use the character \n)
  3. Call textAlign(CENTER, BASELINE) and then textToPoints on that string.
  4. Observe how the points are always left-aligned.

Snippet:

see https://editor.p5js.org/araid/sketches/S7DRlqtvP

let pts;
let font;
let str = 'Text\nto\npoints';

function preload(){
  font = loadFont('Inter-Black.otf');
}

function setup() {
  createCanvas(600, 600);
  
  textAlign(LEFT, BASELINE);
  textAlign(CENTER, BASELINE); // this doesn't work
  textSize(80);
  textFont(font);
  
  pts = font.textToPoints(str, 200, 0, 80, {
    sampleFactor: 0.25
  });
}

function draw() {
  background(200);
  translate(20, 140);
  
  // draw text
  fill(255);
  text(str, 200, 0);
  
  // draw points
  fill(28);
  noStroke();
  
  for(let i =0; i< pts.length; i++){
    ellipse(pts[i].x, pts[i].y, 2,2); 
  }
}
@RuimingShen
Copy link
Contributor

RuimingShen commented Mar 27, 2024

This is not a bug from p5 code, it is an issue from textAlign property. Please reach out to developers for textAlign for this problem! More info can be found here [https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textAlign]
The only piece of code realted to textAlign is here, and it doesn't edit anything about LEFT, RIGHT,CENTER for this.

  • @method textAlign
  • @return {Object}
    */
    p5.prototype.textAlign = function(horizAlign, vertAlign) {
    p5._validateParameters('textAlign', arguments);
    return this._renderer.textAlign(...arguments);
    };`

@araid
Copy link
Author

araid commented Mar 27, 2024

@RuimingShen I'm not sure I understand your answer. What's the issue with textAlign?

My report refers to textToPoints(). When I step through the function, I don't see alignment being considered at any moment. That means that for multiline strings, the text layout and points are misaligned.

textAlign(LEFT, BASELINE) textAlign(CENTER, BASELINE)
text_to_points_left text_to_points_ctr

I updated the sketch to make it clearer. Please let me know if that makes sense.

@dhowe
Copy link
Contributor

dhowe commented Mar 28, 2024

@RuimingShen may be confused about how textAlign works. But to provide some clarity on the issue, when textToPoints() was initially written, it did not include support for multiple text lines. If you needed multiple lines, you would call it multiple times. At some point, support for splitting a string on line breaks was added, but without corresponding support for the various alignments. Fixing this would require only (I think) using the existing _handleAlignment() function from textBounds() in textToPoints() as well

@mathewpan2
Copy link

I'd like to work on this.

@mathewpan2 mathewpan2 linked a pull request Apr 12, 2024 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants