21 Untitled

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.

posted at 01:01 pm on September 20, 2006 by Sheela Hendres

22 Iframe may be better.

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.

posted at 02:25 am on September 22, 2006 by Hedger Wang

23 Flash implementation

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

posted at 12:10 am on September 27, 2006 by Bob Corporaal

24 Good Job, Bob

I’ve seen your comments and the work trail over at Niqui’s 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.

posted at 01:47 pm on September 27, 2006 by Christian Heilmann

25 Scrollwheel

(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.

posted at 01:35 pm on October 17, 2006 by Stephane Deschamps

26 User friendly?

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.

posted at 10:16 pm on October 24, 2006 by Kenneth Sundqvist

27 German translation available

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.

posted at 03:58 pm on November 2, 2006 by Axel Christ

28 relative size does the job too

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

posted at 07:29 pm on November 5, 2006 by Koni Weber

29 Replacing a graphical button with a normal submit

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.

posted at 05:03 pm on December 1, 2006 by Mag Leahy

30 Nice, but a little off

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

posted at 08:21 pm on February 13, 2007 by gregory tomlinson

Discussion Closed

New comments are not being accepted, but you are welcome to explore what people said before we closed the door.

Got something to say?

Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.

Create a new account or sign in below if you’d like to leave a comment.

Forgot your password?

Subscribe to this article's comments: RSS (what’s this?)