One of the things that has always bugged me is that I can't increase the font size of a SWF. It is by reflex that I try to increase the size of the type in a SWF by increasing the browser's text-size and I have been caught out many times. I was inspired by a demo that Chris Heilmann showed that changed the formatting of a list according to the size of the font and thought about how great it would be to resize a SWF. With all my travels it got put on the side. Today I read a post on alistapart written by Lawrence Carvalho and Christian Heilmann. I was once again inspired.

I wrote a little JavaScript function that used the TextResizeDetector created by Lawrence Carvalho and resized the div that the SWF was placed in. I used UFO to insert the SWF into the page but could have used swfObject just as easily.

To use:

1) Download UFO and review the samples.

2) Download the Text-Resize Detection sample from the post on alistapart

3) Set the size of the div to the size of the swf.

4) Set the width and height in the UFO options to 100%. This will scale the swf to the size of the div.

5) Add the following as your onFontResize().

JavaScript:
  1. var lastSize = null;
  2.  
  3. function onFontResize(e,args) {
  4.     lastSize = (lastSize == null)?args[0].iBase:lastSize;
  5.     var newSize = (args[0].iSize == 0)?1:args[0].iSize;
  6.     var sizeDiff = newSize/lastSize;
  7.    
  8.     var resizableswf = document.getElementById('resizableswf');
  9.     if(resizableswf){
  10.         var newWidth = (parseFloat(resizableswf.style.width)*parseFloat(sizeDiff))+"px";
  11.         var newHeight = (parseFloat(resizableswf.style.height)*parseFloat(sizeDiff))+"px";
  12.    
  13.         resizableswf.style.width = newWidth;
  14.         resizableswf.style.height = newHeight;
  15.     }
  16.    
  17.     lastSize = newSize;
  18. }

A sample can be found here.

[UPDATE]
Source