Scale Text to Screen width

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

Answers

  • edited January 2017

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

    Iirc

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

  • 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";
    }
    
  • 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!

  • Answer ✓

    cool!

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

  • SanSan
    edited January 2017

    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.

  • edited January 2017

    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;
    }
    
  • 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;
    }
    //
    
Sign In or Register to comment.