The script breaks scroll wheel resizing in Firefox 2 on the “submit button demo”:http://www.alistapart.com/d/fontresizing/exampleSubmitButton.html . I have no idea why is that – all I know it’s serious and forces users to use keyboard for resizing, which is just as bad as forcing keyboard users to use a mouse for a certain task.
Running a 200ms interval to check the size? Oy! There must be a better solution. Wait.. there might be. Shaun Inman (with a small contribution of yours truly) figured at least part of this problem out with attaching an onresize event handler to a hidden iframe. I haven’t touched the code in years, but maybe there’s good stuff hidden in there.
I am not sure about this comment, you cannot expect everybody to have a mouse with a scrollwheel either and I venture to guess that resizing with keyboard is more common than using the wheel. I myself only have trackpointers at my disposal.
Very interesting article and implementation. I’d be very interested to see some stats on the font sizes used by visitors. It’s a common problem with the client coming back saying “when I have the font-size set to the maximum level, the layout breaks.”
If only there were some stats to revert to..
I suppose AJAX could be used to record the font size changes?
Copy & paste the code below to embed this comment.
Lawrence Carvalho
Dmitri, ideally we’d like to be able to use a non-interval solution. There are stopDetector and startDetector methods available if it becomes an issue though. I wouldn’t expect it to though as its not doing anything too heavy.
First off, excellent article. I can see this being really useful.
This is slightly off-topic, but what is the rational behind IE7 and Opera zooming, rather than increasing text size. Whilst zooming maintains the site layout, it can make the site really hard to read since there will be lots of horizontal scrolling. If this is what the site designer wanted, they could have used em’s for their sizes (ok images would still be an issue, but not that much on a well designed site).
Copy & paste the code below to embed this comment.
Lawrence Carvalho
I suspect its mostly related to screen resolution and so if you have these stats you could possibly make an educated guess. Definitely some stats on this might be useful, though I think AJAX would be overkill if reportage is only on font stats. A good old 1×1 transperent beacon gif could do the job just as well.
Copy & paste the code below to embed this comment.
Morris Johns
IE supports an onresize event which is fired when a div changes size due to changed fonts.
And for Firefox and Opera, you can use the resize event of a hidden iframe, and set the height/width of the iframe to ems.
If you are using Dojo, or can read Dojo widget code and widget templates, then functioning code using those techniques is available: http://trac.dojotoolkit.org/ticket/1437 (this also has true pixel measurements of font-sizes and scrollbars which can be very useful).
Copy & paste the code below to embed this comment.
Brian LePore
The article is slightly inarrucate. While it is true that IE7 does scroll the entire page when a user uses CTRL+scrollwheel/keyboard buttons, it also allows the user to just resize the text. Page—> Text Size—> the those five options we know and hate.
it’s still extremely difficult to create page layouts that don’t break even if the user increases the type size by more than a few settings
Propaganda of the shoddiest variety. Play around with the technologies at your disposal, by all means let innovation thrive, but it is not innovative to distort reality in such a gross fashion.
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 ArticleMislav Marohnić
The script breaks scroll wheel resizing in Firefox 2 on the “submit button demo”:http://www.alistapart.com/d/fontresizing/exampleSubmitButton.html . I have no idea why is that – all I know it’s serious and forces users to use keyboard for resizing, which is just as bad as forcing keyboard users to use a mouse for a certain task.
Dimitri Glazkov
Running a 200ms interval to check the size? Oy! There must be a better solution. Wait.. there might be. Shaun Inman (with a small contribution of yours truly) figured at least part of this problem out with attaching an onresize event handler to a hidden iframe. I haven’t touched the code in years, but maybe there’s good stuff hidden in there.
http://www.shauninman.com/plete/2004/07/absolutely-positive
Christian Heilmann
I am not sure about this comment, you cannot expect everybody to have a mouse with a scrollwheel either and I venture to guess that resizing with keyboard is more common than using the wheel. I myself only have trackpointers at my disposal.
Andy Crathorne
Very interesting article and implementation. I’d be very interested to see some stats on the font sizes used by visitors. It’s a common problem with the client coming back saying “when I have the font-size set to the maximum level, the layout breaks.”
If only there were some stats to revert to..
I suppose AJAX could be used to record the font size changes?
Lawrence Carvalho
Dmitri, ideally we’d like to be able to use a non-interval solution. There are stopDetector and startDetector methods available if it becomes an issue though. I wouldn’t expect it to though as its not doing anything too heavy.
Thanks for the link. I’ll check it out.
Robin Massart
First off, excellent article. I can see this being really useful.
This is slightly off-topic, but what is the rational behind IE7 and Opera zooming, rather than increasing text size. Whilst zooming maintains the site layout, it can make the site really hard to read since there will be lots of horizontal scrolling. If this is what the site designer wanted, they could have used em’s for their sizes (ok images would still be an issue, but not that much on a well designed site).
Lawrence Carvalho
I suspect its mostly related to screen resolution and so if you have these stats you could possibly make an educated guess. Definitely some stats on this might be useful, though I think AJAX would be overkill if reportage is only on font stats. A good old 1×1 transperent beacon gif could do the job just as well.
Morris Johns
IE supports an onresize event which is fired when a div changes size due to changed fonts.
And for Firefox and Opera, you can use the resize event of a hidden iframe, and set the height/width of the iframe to ems.
If you are using Dojo, or can read Dojo widget code and widget templates, then functioning code using those techniques is available: http://trac.dojotoolkit.org/ticket/1437 (this also has true pixel measurements of font-sizes and scrollbars which can be very useful).
Brian LePore
The article is slightly inarrucate. While it is true that IE7 does scroll the entire page when a user uses CTRL+scrollwheel/keyboard buttons, it also allows the user to just resize the text. Page—> Text Size—> the those five options we know and hate.
Seth Rasmussen
Propaganda of the shoddiest variety. Play around with the technologies at your disposal, by all means let innovation thrive, but it is not innovative to distort reality in such a gross fashion.
Sheela 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