In Accessibility , Browsers , Flash , Flex / Tags: /
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().
-
var lastSize = null;
-
-
function onFontResize(e,args) {
-
lastSize = (lastSize == null)?args[0].iBase:lastSize;
-
var newSize = (args[0].iSize == 0)?1:args[0].iSize;
-
var sizeDiff = newSize/lastSize;
-
-
var resizableswf = document.getElementById('resizableswf');
-
if(resizableswf){
-
var newWidth = (parseFloat(resizableswf.style.width)*parseFloat(sizeDiff))+"px";
-
var newHeight = (parseFloat(resizableswf.style.height)*parseFloat(sizeDiff))+"px";
-
-
resizableswf.style.width = newWidth;
-
resizableswf.style.height = newHeight;
-
}
-
-
lastSize = newSize;
-
}
A sample can be found here.
[UPDATE]
Source
25 ResponsesLeave a comment ?
Funny, I worked on almost the exact same thing this weekend. Only in my version the sizechanges are communicated to Flash via the ExternalInterface. This way Flash can handle the events.
A demo can be seen here: http://reefscape.net/projects/browserintegration/
I’ll release the source soon.
This is very very cool. Add a comment to the ALA article to link to this.
Bob
That is very cool. Your version will allow more control of the layout for Flash developers. How far are you gonna be taking it? Have you thought about extracting the default style sheet in browser and passing that into flash? I’d be very interested in your progress, please keep me updated. I would love to see this kind of resizing becoming the norm.
Chris
I could not find your business card… Can you please pop me a mail at niqui at mydomain.
Extracting the style sheet is an interesting idea! Should not even be that difficult. However in the current version of Flash css is very limited so the benefit could be limited.
But for something like sIFR it could be very useful. Adding a specific flash style sheet to the html which is then used by sIFR.
Extracting the style sheet is an interesting idea! Should not even be that difficult. However in the current version of Flash css is very limited so the benefit could be limited.
But for something like sIFR it could be very useful. Adding a specific flash style sheet to the html which is then used by sIFR. Also the scaling could be a nice addition.
We should propose it to them
oh sorry for the double post…
Just checked: The sIFR 3 alpha already does the scaling thing. Check this: http://dev.novemberborn.net/sifr3/alpha/demo/
sIFR 3 does not yet scale, but it will. It’s been planned for a long time but I haven’t gotten around to implementing it.
One thing I haven’t experimented with, is how well the width and height scale along with the font size – is it 1:1?
I am so glad to see such interest in this. The idea was to create a little something that was easy to use and did not make too much work for designers and developers to use with the hope that people may start using it. I think that taking it forward and creating more advanced examples is fantastic. Instead of us to all working on different projects – why don’t we look at ideas on how we could possible share more of the source. If you are up for this pop me a mail on niqui at mydomain and lets see what we can produce
. I’ll start up a project and list on OSFlash called flashaccess.
I think a technique like this has a place in UFO or SWFObject, as a general solution. For techniques like sIFR more specialization is needed and a tutorial will do.
That’s pretty sweet, Niqui!
[...] John Dowdell discusses the Top Anti-Flash Cliches, a topic I revisit regularly under the guise of “Flash Myths”. Of course, accessibility makes the list (specifically, the perception that Flash lacks any sort of support for it.) How timely, then, to see Niqui Merret post a very simple example that demonstrates how to scale a Flash Movie in response to text size changes in the browser. [...]
thanks Frances
Awesome! One of the best usability features to add… Most of us use this all the time in browsers
[...] http://niquimerret.com/?p=32 [...]
I have just release the source for an updated version of the example. It can be found here: http://reefscape.net/?p=4
In this case the font size is not only adjusted with the height but the Flash div height changes as well so the browser scrollbar can be used.
[...] Things kicked off on Sunday, when Niqui Merret posted a simple and generic solution for making Flash movies scale when users change their browser text size preferences. This is a great solution because it is very simple to implement and works with existing Flash movies. [...]
I ran across your site while just surfing around, wanted to say hi and I like the blog.
[...] http://niquimerret.com/?p=32 [...]
Nice script I think it’s usefull.
It reminds me of the way opera resizes, they resize everything images/flash/text etc. even background images attached with CSS. Also I think IE7 has similar resizing.
[...] Text-Resize in the browser sets the scale of SWF [...]
wow, that’s a lot of code just to duplicate something that already exists in HTML.
[...] Original post by Brian Benzinger and software by Elliott Back [...]
[...] Original post by John Musser and software by Elliott Back [...]
Doesn’t seem to work if the user refreshes their browser after changing the font size or arrives at a page w/ this script after having already changed their font size.
To make it work for these scenarios, I added el.style.lineHeight = “1em”; after el.innerHTML=’ ’; within textsizedetector.js and then used the following script on my page w/ the swf:
var lastSize = null;
function init() {
var iBase = TextResizeDetector.addEventListener(onFontResize,null);
resizeSwf(iBase,16);
lastSize = iBase;
}
function onFontResize(e,args) {
lastSize = (lastSize == null)?args[0].iBase:lastSize;
var newSize = (args[0].iSize == 0)?1:args[0].iSize;
resizeSwf(newSize,lastSize);
lastSize = newSize;
}
function resizeSwf(newSize,lastSize) {
var sizeDiff = newSize/lastSize;
var resizeableSwf = document.getElementById(’resizeableSwf’);
if (resizeableSwf) {
var newWidth = (parseFloat(resizeableSwf.style.width)*parseFloat(sizeDiff))+”px”;
var newHeight = (parseFloat(resizeableSwf.style.height)*parseFloat(sizeDiff))+”px”;
resizeableSwf.style.width = newWidth;
resizeableSwf.style.height = newHeight;
}
}
TextResizeDetector.TARGET_ELEMENT_ID = ‘body’;
TextResizeDetector.USER_INIT_FUNC = init;