Scale Text to Screen width

baltensperger

Hi,

I just work on sketch to display simple Text on a single screen. The Text is loaded from a String and displayed word by word. Now comes my problem: It would be great if each Word would scale to the screen size. Means either the word length or height fits the screen width / height.

Does anybody know how to do that?

Thanks

Chrisir

You could use textSize and increase it until textWidth gives you the right size then display it - see example below [EDITED]

Iirc

baltensperger

The final product is a animation of about 25 minutes. So I hoped the program to do that for me.

kfrajer

Check this post: https://forum.processing.org/two/discussion/comment/83538/#Comment_83538

In the reference, Have a look at this:
https://processing.org/reference/textAscent_.html
https://processing.org/reference/textDescent_.html
https://processing.org/reference/textWidth_.html
https://processing.org/reference/textSize_.html

Kf

Chrisir

So I hoped the program to do that for me.

That's exactly what I meant.

Let the sketch run a simulation for you, finding the textSize (matching the windows width)

PFont f1; 
float textSizeForTest=0;
String strTest="Hallo"; 

void setup() {
  size(640, 360);

  f1= createFont("ARIAL", 1);

  textFont(f1); 
  textAlign(CENTER, CENTER);
}

void draw() {
  background(0);

  while (textWidth(strTest)<width-6) { // simulation 
    textSizeForTest++;
    textSize(textSizeForTest);
  }

  text(strTest, width/2, height/2); // display 
}

void keyPressed() {      // change 
  textSizeForTest=1;
  textSize(textSizeForTest);
  strTest="Another Text";
}

baltensperger

Wow, I just did not get it. Sorry! I thought you ask me to try it manually for each word :) but your solution is so easy.

Thank you a lot!

Chrisir

cool!

Chrisir

textWidth takes into account the current textSize, that's why it works

San

You can use this fittedText function to do that without iterating through so many possible text sizes:

public void fittedText(String text, PFont font, float posX, float posY, float fitX, float fitY)
{
  textFont(font);
  textSize(min(font.getSize()*fitX/textWidth(text), fitY));
  text(text, posX, posY);
}

void setup()
{
  size(1280, 720);
  PFont f = createFont("Arial", 7);
  background(0);
  fill(255);
  textAlign(LEFT, TOP);
  fittedText("Good to see you today!", f, 0, 0, width, height);
}

It will fit to the input fitX and fitY size, but you can just send in "width" and "height" to make it fit to screen, if you need to fit it to other sizes though you can do that as well.

baltensperger

I adjusted Chrisir s answer like that

...
  textSize(SizeAdjust(word));
  float textheight = textDescent()-textAscent();
  text(word, width/2, height/2 - textheight/2);
...



float SizeAdjust(String WORD) {
  float size = fontsize;

  textSize(size);
  while (textWidth(WORD)<width-20) { // Adjust Width to Screen width
    size++;
    textSize(size);
  }

  float textheight = textDescent()-textAscent();

  if (-textheight > height*maxhight) {   // it fext higher then screen height ...
    size = fontsize;                    // reset font size
    textSize(size);
    textheight = textDescent()-textAscent();
    while (-textheight < height*maxhight) { // Adjust Height to Screen height
      size++;
      textSize(size);
      textheight = textDescent()-textAscent();
    }
  }
  return size;
}

Chrisir

that's the full sketch from baltensperger with my approach by the way (but I think San's approach above is much better)

PFont f1; 
float fontsize=0;
String word="Hallo"; 
float maxheight; 

void setup() {
  size(640, 360);

  f1= createFont("ARIAL", 1);

  textFont(f1); 
  textAlign(CENTER, CENTER);
  maxheight = width-6;
}

void draw() {
  background(0);

  textSize(SizeAdjust(word));
  float textheight = textDescent()-textAscent();
  text(word, width/2, height/2 - textheight/2);   // display
}//draw

//----------------------------------------

void keyPressed() {      
  // change text -  hit any key 
  fontsize=1;
  word="Another Text Text Text";
}

float SizeAdjust(String WORD) {

  float size = fontsize;

  textSize(size);
  while (textWidth(WORD)<width-20) { // Adjust Width to Screen width
    size++;
    textSize(size);
  }

  float textheight = textDescent()-textAscent();

  if (-textheight > height*maxheight) {   // if text is higher than screen height ...
    size = fontsize;                    // reset font size
    textSize(size);
    textheight = textDescent()-textAscent();
    while (-textheight < height*maxheight) { // Adjust Height to Screen height
      size++;
      textSize(size);
      textheight = textDescent()-textAscent();
    }
  }
  return size;
}
//