We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
Index › Programming Questions & Help › Syntax Questions › get the text height
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1
get the text height (Read 1685 times)
steven
get the text height
Nov 24th, 2007, 9:59pm  
Hi,

Let's say I have a String that comes from an XML file and I want to draw a rect behind it.

To use rect, I need to specify a height and width.

How can I get the height of a String when I specify a specific width?

Thanks
Back to top
 
http://www.computerarts.ca
WWW  
extrapixel
Re: get the text height
Reply #1 - Nov 25th, 2007, 2:45am  
Hi,

textWidth() gets the width of the text.
http://processing.org/reference/textWidth_.html

text height is the size of the text (the one you set in textFont() or createFont()), they're measured in units of pixels.
Back to top
 
http://www.extrapixel.ch
WWW  
extrapixel
Re: get the text height
Reply #2 - Nov 25th, 2007, 3:36am  
just tried it... what i wrote above about the text-height is wrong. you need to use textAscent() to get a more accurate height of your text.
http://processing.org/reference/textAscent_.html
Back to top
 
http://www.extrapixel.ch
WWW  
steven
Re: get the text height
Reply #3 - Nov 25th, 2007, 4:57am  
Hi,

Thanks for the reply but that's not what I meant.

Let's say I have a String of a textWidth() equal to 500 and I display in a text box with a width of 100.
Code:
text(myString, posX, posY, 100, height)


The text will wrap to the specified with.

I want to get the exact height of the text so I can draw a perfect rect behind it (so that the text appears to be in a box)

I created a function that calculates the height of a string but I was just wondering if there was an easier way. I will post my code tomorrow when I get home.
Back to top
 
http://www.computerarts.ca
WWW  
steven
Re: get the text height
Reply #4 - Nov 25th, 2007, 5:27pm  
Here's what I came up with.
With works okay...Problem is, it's not pixel perfect accurate. You need to change the lineSpacing variable depending on your font size... It's basically a trial and error exercise! But once you get the right lineSpacing, it will work perfectly no matter the textWidth as long as the fontSize stays the same.

Code:
PFont font;
String string = "Processing is an open source programming language and environment for people who want to program images, animation, and interactions.";
int fontSize = 10;
int specificWidth = 150;
int lineSpacing = 2;
 
int textHeight;
 
void setup() {
  size(600,600);
  background(0);
 
  font = createFont("Times New Roman", fontSize);
  textFont(font,fontSize);
  noLoop();
}
 
void draw() {
  fill(60);
  stroke(60);
  rect(100,100,specificWidth, calculateTextHeight(string, specificWidth, fontSize, lineSpacing));
  fill(255);
  text(string, 100,100,specificWidth,1000);
}
 
int calculateTextHeight(String string, int specificWidth, int fontSize, int lineSpacing) {
  String[] wordsArray;
  String tempString = "";
  int numLines = 0;
  float textHeight;
 
  wordsArray = split(string, " ");
 
  for (int i=0; i < wordsArray.length; i++) {
    if (textWidth(tempString + wordsArray[i]) < specificWidth) {
 tempString += wordsArray[i] + " ";
    }
    else {
 tempString = wordsArray[i] + " ";
 numLines++;
    }
  }
   
  numLines++; //adds the last line
   
  textHeight = numLines * (textDescent() + textAscent() + lineSpacing);
  return(round(textHeight));
}
Back to top
« Last Edit: Nov 25th, 2007, 8:21pm by steven »  
http://www.computerarts.ca
WWW  
extrapixel
Re: get the text height
Reply #5 - Nov 25th, 2007, 7:37pm  
ok, i see. After a little test it seems like the text functions are not very accurate. The values depend on the font, the renderer and the operating system.

so, if we want pixel accurate text height, we probably need to render it to an image and analyze it pixel by pixel.
Quote:


import processing.opengl.*;

PFont[] testFonts = new PFont[4];
PFont descFont, currentTestFont;
String string = "Ä{Processing|§°yp,.!W";
int fontSize = 35;
float stringWidth;
float textPosX = 10;
float textPosY;

int textHeight;

void setup() {
 //size(800,300, OPENGL);
 //size(800,300, P3D);
 size(800,300);
 background(0);

 testFonts[0] = createFont("Times New Roman", fontSize);
 testFonts[1] = createFont("Arial", fontSize);
 testFonts[2] = createFont("Courier", fontSize);
 testFonts[3] = createFont("Verdana", fontSize);
 descFont = createFont("Courier", 12);

 textPosY = height/3*2;
}

void draw() {
 background(0);

 currentTestFont = testFonts[int(4.0/width*mouseX)];
 fontSize = mouseY;
 textFont(currentTestFont, fontSize);
 stringWidth = textWidth(string);

 float baseline = textPosY;
 float descent = textPosY + textDescent();
 float ascent = textPosY - textAscent();
 float textHeight = textPosY-fontSize;

 // TEST STRING
 fill(255);
 text(string, textPosX,textPosY);

 // DESCRIPTIONS

 textFont(descFont);

 fill(200);
 text(currentTestFont.name + ", " + fontSize + "px", 10, height-20);
 // Vertical lines
 stroke(200);
 line(textPosX, textHeight-20, textPosX, descent+20);
 line(stringWidth+textPosX, textHeight-20, stringWidth+textPosX, descent+20);

 // Baseline
 fill(255,255,0);
 stroke(255,255,0);
 text("baseline", textPosX+stringWidth+30, baseline);
 line(textPosX,baseline, textPosX+stringWidth, baseline);
 line(textPosX+stringWidth, baseline,textPosX+stringWidth+30, baseline);

 // Descent
 fill(0,255,0);
 stroke(0,255,0);
 text("descent", textPosX+stringWidth+30, descent+20);
 line(textPosX,descent, textPosX+stringWidth,descent);
 line(textPosX+stringWidth,descent,textPosX+stringWidth+30, descent+20);

 // Fontsize (from baseline)
 fill(255,0,0);
 stroke(255,0,0);
 text("fontSize from baseline", textPosX+stringWidth+30, textHeight);
 line(textPosX,textHeight,textPosX+stringWidth, textHeight);
 line(textPosX+stringWidth, textHeight,textPosX+stringWidth+30, textHeight);

 // Ascent
 fill(0,0,255);
 stroke(0,0,255);
 text("ascent", textPosX+stringWidth+30, textHeight-30);
 line(textPosX,ascent,textPosX+stringWidth,ascent);
 line(textPosX+stringWidth,ascent,textPosX+stringWidth+30, textHeight-30);
}
Back to top
 
http://www.extrapixel.ch
WWW  
steven
Re: get the text height
Reply #6 - Nov 25th, 2007, 8:19pm  
Hmmm... interesting!
Your test clearly demonstrates your conclusions!

In P3D or OPENGL, calculating the text height is more accurate since it converts the text to bitmap.

I will adapt the code I posted earlier to calculate a more precise height of a string when it's wrapped at a specific width.

Thank you for your time. Very appreciated! Smiley
Back to top
 
http://www.computerarts.ca
WWW  
Page Index Toggle Pages: 1
‹ Previous Topic | Next Topic ›