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

textAscent() rendering issue post-changes in Processing 4.3 #21

Open
SableRaf opened this issue Aug 3, 2023 · 2 comments
Open

textAscent() rendering issue post-changes in Processing 4.3 #21

SableRaf opened this issue Aug 3, 2023 · 2 comments

Comments

@SableRaf
Copy link
Collaborator

SableRaf commented Aug 3, 2023

Description

After the benfry/processing4@c57069f update to use calculated text height instead of OS ascent for vertical centering, the textAscent() example seems to be broken in Processing 4.3. The function no longer aligns correctly with the top of the letter 'd' as described in the official documentation.

Expected Behavior

The horizontal line generated from the textAscent() example should align with the top of the letter 'd' as shown in the documentation: https://processing.org/reference/textAscent_.html.

Current Behavior

In Processing 4.3, the horizontal line is rendered below the top of the letter 'd'.
In Processing 4.2, the line was above the top of the letter 'd'.
Neither version aligns with the official documentation.

Steps to Reproduce

  1. Run the provided textAscent() example code in both Processing 4.2 and 4.3.
  2. Observe the misalignment of the horizontal line with the letter 'd'.
  3. Compare the output with the expected outcome from the documentation.

Your Environment

  • Processing version: 4.3
  • Operating System and OS version: MacOS 13.4 (22F66)
  • Other information: Apple Silicon (M1)

Screenshots

Expected outcome (from textAscent() documentation)

Expected Outcome

textAscent() example on Processing 4.2

Processing 4.2 Result

textAscent() example on Processing 4.3

Processing 4.3 Result

@SableRaf
Copy link
Collaborator Author

SableRaf commented Aug 3, 2023

Upon further investigation, it appears that the issue lies with the example provided rather than the textAscent() function itself. The use of the scalar in the example code seems to be causing the observed misalignment.

The example can be simplified like so:

size(400, 400);
float base = height * 0.75;

textSize(128);  // Set initial text size
float a = textAscent();  // Calc ascent
line(0, base-a, width, base-a);
text("dp", 0, base);  // Draw text on baseline

textSize(256);  // Increase text size
a = textAscent();  // Recalc ascent
line(160, base-a, width, base-a);
text("dp", 160, base);  // Draw text on baseline

Below is a more advanced example showing that textAscent() works correctly for all fonts, without scalar adjustment:

PFont currentFont;
String[] fontList;
int fontIndex = 0;

void setup() {
  size(400, 400);

  frameRate(2);

  fontList = PFont.list();
  printArray(fontList);
}

void draw() {
  background(150);  // Clear the screen every frame

  // Get the next font from the list
  String fontName = fontList[fontIndex];
  currentFont = createFont(fontName, 256);
  textFont(currentFont);

  float base = height * 0.75;
  
  translate(0,base);

  textSize(128);  // Set initial text size
  float a = textAscent();  // Calculate ascent
  line(0, -a, width, -a);
  text("dp", 0, 0);  // Draw text on baseline

  textSize(256);  // Increase text size
  a = textAscent();  // Recalculate ascent
  line(160, -a, width, -a);
  text("dp", 160, 0);  // Draw text on baseline

  // Move to the next font for the next frame
  fontIndex = (fontIndex + 1) % fontList.length;
}

@SableRaf SableRaf transferred this issue from benfry/processing4 Aug 3, 2023
@SableRaf
Copy link
Collaborator Author

SableRaf commented Aug 3, 2023

The following example shows that both textAscent() and textDescent() work without the need for scaling, on different fonts, and at various font sizes:

PFont currentFont;
String[] fontList;
int fontIndex = 0;
String[] words = {"apple", "banana", "cherry", "date", "elderberry", "fig", "grape"};  // Sample words, feel free to add more

int baseFontSize = 128;

int paddingLeft = 20;

void setup() {
  size(800, 400);

  frameRate(1);

  fontList = PFont.list();
}

void draw() {
  background(230);  // Clear the screen every frame

  // Get the next font from the list
  String fontName = fontList[fontIndex];
  currentFont = createFont(fontName, 256);
  textFont(currentFont);

  float base = height * 0.5;

  float fontSize = baseFontSize - random(baseFontSize/2);

  fill(10);
  textSize(fontSize);
  
  float a = textAscent();  // Calculate ascent
  float d = textDescent();  // Calculate descent
  float h = a+d; // Calculate text height
  
  translate(0,base);
  
  stroke(#C93737);
  line(0,0,width,0); // Base line
  line(0, -a, width, -a);  // Ascent line
  line(0, d, width, d);  // Descent line
  
  String randomWord = words[int(random(words.length))];  // Randomly select a word
  text(randomWord, paddingLeft, 0);  // Draw text on baseline

  // Move to the next font for the next frame
  fontIndex = (fontIndex + 1) % fontList.length;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant