With all the hard work already done it was actually quite simple to implement the same events in Flash. This way Flash content can resize with the same browser commands.
Demo and source can be found here: http://reefscape.net/?p=4
I’ve seen your comments and the work trail over at “Niqui’s”:http://niquimerret.com/?p=32 and must say well done.
@Hedger, you are right, to some degree. Personally I don’t like adding IFRAMES, as they may be confusing for assistive technology. Then again, most advertising in IFRAMEs is, too.
(comment long overdue, sorry about that, but days only last 24 hours in this part of the globe)
I found the scrollwheel issue troubling and experimented. I use indifferently mouse wheel or keyboard shortcuts, depending on my situation (alternatively laptop and desktop). And the resize did work for the first two bumps up, then it stopped and didn’t bump down.
I’m not criticizing the good work you guys did, the result is impressive; yet one would expect the script to work whatever the input device is, although for sure so far it’s only an experimental script.
If anybody could give us a hint as to why the script would break using the mouse, I’d be willing to hear it.
Copy & paste the code below to embed this comment.
Kenneth Sundqvist
Need to add a late comment here.
The most important issue about this technique is what does the user expect?
They certainly do not expect items on the page do disappear or appear, or the page to transform when they shift the font size.
I can say with quite certainty that everyone except for the feature designer will be surprised and confused at first. While us, the more savvy users might get it, most users won’t, and they are the bigger majority that we create for.
I hope that anyone considering implementing this will think long and hard, and then test the design with a humongous number of (genuine) users.
The largest IE6 text size is not hard to support. And if it is, your design probably isn’t that well designed and/or coded. With CSS and none-table layouts it is not that hard to make designs that accommodates larger text sizes.
It may take practice and time to work it in to your workflow, but it is well worth it when you otherwise may have to resort to JavaScript functions that throw off your users.
Hi all, as I believe this to be a valuable article I published a German translation at:
http://mediengestalter.gleichjetzt.de/de/node/47
Thank you for sharing your insights.
Copy & paste the code below to embed this comment.
Koni Weber
Another approach to make your website scaleable, without any javascript involved, is to consequently use a relative size for your content. Just ensure, your website design does not rely on pixels: they are bad when it comes to zooming. You can instead define a base font-size (say specify font-size:small for the body element) and further on use relative font-size (eg. “font-size:smaller”? or “font-size:120%”? for all other elements. This, of course, also works for images: Just specify the width and height of your images using em and ex (eg. <img src=”?foo.png” style=”?width:3em”
Copy & paste the code below to embed this comment.
Mag Leahy
Hi all,
Have been looking at http://www.alistapart.com/d/fontresizing/exampleSubmitButton.html and I am not sure it works in IE. On further research I have read that IE will not allow you to change the type of an input so this will not work: document.getElementById(‘send’).type=‘image’;
Can someone confirm that they have not got this to work on IE and anyone have a workaround?
I discovered this implementation via google. While the idea is sound, I found mixed results from PC to Mac.
For example, on my page – the body font size is set to 72% arial, which is about 11px.
I found this solution got it close on a mac – but the results were different on a PC. For instance, on mac – the font size was returning at 12px when I first loaded the page. But on PC IE it was returning 15px.
It was only after I set the line-height on the hidden span to 1em that I started to find more consistent results both cross platform and cross browser. 11px on mac firefox and pc firefox. 12px PC IE
30 Reader Comments
Back to the ArticleSheela Hendres
Hello.
Thanks for this great examples.
I think this is very useful. I have just downloaded exapmple code and will try it now. Hopefully it is going to work.
Thanks again.
Hedger Wang
Hi, Chris.
I had done similar stuff before.
and I think that IFRAME may be a better detector to detect the change of font-size by the onResize Event Handler.
My prototype is available on :
http://www.hedgerwow.com/360/dhtml/js-onfontresize.html
Thanks.
Bob Corporaal
With all the hard work already done it was actually quite simple to implement the same events in Flash. This way Flash content can resize with the same browser commands.
Demo and source can be found here: http://reefscape.net/?p=4
Christian Heilmann
I’ve seen your comments and the work trail over at “Niqui’s”:http://niquimerret.com/?p=32 and must say well done.
@Hedger, you are right, to some degree. Personally I don’t like adding IFRAMES, as they may be confusing for assistive technology. Then again, most advertising in IFRAMEs is, too.
Stephane Deschamps
(comment long overdue, sorry about that, but days only last 24 hours in this part of the globe)
I found the scrollwheel issue troubling and experimented. I use indifferently mouse wheel or keyboard shortcuts, depending on my situation (alternatively laptop and desktop). And the resize did work for the first two bumps up, then it stopped and didn’t bump down.
I’m not criticizing the good work you guys did, the result is impressive; yet one would expect the script to work whatever the input device is, although for sure so far it’s only an experimental script.
If anybody could give us a hint as to why the script would break using the mouse, I’d be willing to hear it.
Kenneth Sundqvist
Need to add a late comment here.
The most important issue about this technique is what does the user expect?
They certainly do not expect items on the page do disappear or appear, or the page to transform when they shift the font size.
I can say with quite certainty that everyone except for the feature designer will be surprised and confused at first. While us, the more savvy users might get it, most users won’t, and they are the bigger majority that we create for.
I hope that anyone considering implementing this will think long and hard, and then test the design with a humongous number of (genuine) users.
The largest IE6 text size is not hard to support. And if it is, your design probably isn’t that well designed and/or coded. With CSS and none-table layouts it is not that hard to make designs that accommodates larger text sizes.
It may take practice and time to work it in to your workflow, but it is well worth it when you otherwise may have to resort to JavaScript functions that throw off your users.
Axel Christ
Hi all, as I believe this to be a valuable article I published a German translation at:
http://mediengestalter.gleichjetzt.de/de/node/47
Thank you for sharing your insights.
Koni Weber
Another approach to make your website scaleable, without any javascript involved, is to consequently use a relative size for your content. Just ensure, your website design does not rely on pixels: they are bad when it comes to zooming. You can instead define a base font-size (say specify font-size:small for the body element) and further on use relative font-size (eg. “font-size:smaller”? or “font-size:120%”? for all other elements. This, of course, also works for images: Just specify the width and height of your images using em and ex (eg. <img src=”?foo.png” style=”?width:3em”
Mag Leahy
Hi all,
Have been looking at http://www.alistapart.com/d/fontresizing/exampleSubmitButton.html and I am not sure it works in IE. On further research I have read that IE will not allow you to change the type of an input so this will not work: document.getElementById(‘send’).type=‘image’;
Can someone confirm that they have not got this to work on IE and anyone have a workaround?
Cheers.
gregory tomlinson
I discovered this implementation via google. While the idea is sound, I found mixed results from PC to Mac.
For example, on my page – the body font size is set to 72% arial, which is about 11px.
I found this solution got it close on a mac – but the results were different on a PC. For instance, on mac – the font size was returning at 12px when I first loaded the page. But on PC IE it was returning 15px.
It was only after I set the line-height on the hidden span to 1em that I started to find more consistent results both cross platform and cross browser. 11px on mac firefox and pc firefox. 12px PC IE