textWidth() function doesn't appear to be working properly in Processing Java

Question

Attempt at making a UI Library

Hi there, I am making a UI Library as I had some free time
I've added a button which functions
Then I tried to add a Text Box, for which I needed to add a blinking cursor
The cursor animates properly but the problem is that the position of the cursor is not correct
I have not changed the Size, Font, Alignment or anything of the text but still the cursor renders far ahead of where it's supposed to
This is the code to render the cursor
line(x + textWidth(val), y + 2, x + textWidth(val), y + textAscent() + 2);
I've heard somewhere that padding is already included in the textWidth function... due to which i have not added +2 to the x and w value, val is a string that's updated everytime the user presses a key on the keyboard
The y values work ok for now... There are no error messages too
I've tried looking online but none of the solutions work for me

Before Typing Text
After Typing Text

Answer 1

Having a quick look, my opinion is Processing's text facilties need a bit of love, as you can see here and here (and the commented code as well). The F2XD renderer seems to handle this a bit better;

Looking at the images, there might be some special unicode characters not properly displayed and the font is variable with.

If you're willing to compromise with a basic proof of concept you could get something off the ground by sticking to a monospaced font such as Courier New: it produces more predictable results (and using FX2D helps):

float x = 5;
float y = 15;
String val = "Hello";

void setup(){
  size(300, 60, FX2D);
  fill(0, 192, 0);
  strokeWeight(3);
  textFont(createFont("Courier New", 16));
}

void draw(){
  background(0);
  text(val, x, y + textAscent());
  stroke(0, sin(frameCount * 0.15) * 128, 0);
  line(x + textWidth(val), y + 2, x + textWidth(val), y + textAscent() + 2);
}

void keyPressed(){
  if(keyCode == DELETE || keyCode == BACKSPACE){
    if(val.length() >= 1) val = val.substring(0, val.length() - 1);
  }
  if(key >= '0' && key <= 'z'){
    val += key;
  }
  if(key == ' '){
    val += ' ';
  }
}

Another option might be using JavaFX mostly to manually handle text then rendering those text components into Processing's FX2D Canvas. (This may be more verbose.)