Skip to content

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

Description

@SableRaf

Description

After the processing/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

Activity

  1. SableRaf commented on Aug 3, 2023

    @SableRaf
    CollaboratorAuthor

    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;
    }
  2. transferred this issue frombenfry/processing4on Aug 3, 2023
  3. SableRaf commented on Aug 3, 2023

    @SableRaf
    CollaboratorAuthor

    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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions