Total Pageviews

Saturday 23 May 2015

Auto Resize font size of text inside textfield

Below function will be called as :

txtFieldFontResize (txtField, txtField.width, txtField.height);

private function txtFieldFontResize(txt:TextField, txtWidth : Number, txtHeight : Number):void
{
      //You set this according to your TextField's dimensions
      var maxTextWidth:int = txtWidth - 5; //(txtWidth == TextField.width)
      var maxTextHeight:int = txtWidth;

      var f:TextFormat = txt.getTextFormat();

     //decrease font size until the text fits
     while (txt.textWidth > maxTextWidth || txt.textHeight > maxTextHeight)
     {
                      f.size = int(f.size) - 1;
                      txt.setTextFormat(f);
      }
}


This code resize font size of textfield according to the text.

But there will be two things to keep in mind that :

1) Sometimes, after resizing font textfield will move up according to the ratio of font size decrement, So we need to set y position for this below while loop code block displayed above.

2) We need to set a limit of font size decrement, because suppose if font size will decrease till size 5 then user will not able to see that.

That's why we need to write few lines of code like,

if(f.size == 5)
{
     return;
}

I hope, my try is useful for few readers...
Happy Coding...:)


1 comment:

Microsoft Logo using flexbox and Reactjs

 <!DOCTYPE html> <html> <head>     <script src="https://unpkg.com/react@18/umd/react.development.js" crossori...