Text-Resize Detection

by Lawrence Carvalho, Christian Heilmann

30 Reader Comments

Back to the Article
  1. Use this space to discuss the different options of this solution or to brag about great implementations. You can also use this spot to ask for solutions and liase with other developers willing to implement them. I will be busy over the next three days training some people in sunny Munich, but Lawrence will keep an eye on what is happening.
    Copy & paste the code below to embed this comment.
  2. I created a plugin, “jQEm”:http://davecardwell.co.uk/geekery/javascript/jquery/jqem/ a few weeks back that adds similar functionality to the jQuery library. I found that with Internet Explorer you can use setExpression to avoid having to inefficiently poll for changes periodically.
    Copy & paste the code below to embed this comment.
  3. It shouldn’t be used as an excuse for developers to not design sites properly. Not everyone uses JavaScript. That said, it’s a good solution to a common problem. Obviously you need a bit of JavaScript knowledge already. Out of interest, why didn’t you move all the JavaScript to external files?
    Copy & paste the code below to embed this comment.
  4. Adam, actually I think it works the other way around. A lot of designers I met so far argued that they just cannot use resizable fonts (not realising that there is no way around it) as they will kill the layout sooner or later. This is a solution to counteract that. If you also only apply a stylesheet that uses a layout that doesn’t work with large fonts via JavaScript it is pretty safe. Users without JS get a fully resizable layout, others get one that works and switches.
    Copy & paste the code below to embed this comment.
  5. bq. It shouldn’t be used as an excuse for developers to not design sites properly. Not everyone uses JavaScript I don’t agree that this does equate to “not designing sites properly”. It is perfectly possible, maybe even very easy, to design a site that functions at all text sizes, but may not look all that good at the extremes of the scale. Using Javascript to improve the performance of the page is perfectly acceptable - as long as the page still functions OK when JS is not enabled.
    Copy & paste the code below to embed this comment.
  6. Adam, I left the initialisation javascript within the html file as I thought it would make the examples clearer. On production, it would probably be best to have it within an external file
    Copy & paste the code below to embed this comment.
  7. Incidentally, my original need for such a script came about not from a site design issue but from a component/widget I was working on where I needed to update the widget if the textsize was larger than normal.
    Copy & paste the code below to embed this comment.
  8. Thanks again for another great ALA article. As ‘designers’ are, to a greater and greater extent, actually _designing_ web sites the need to fix broken layouts due to large font sizes shouldn’t be much of an issue. Personally, I feel comfortable with designing a layout such that nothing breaks/overlaps for any of IE’s range of font sizes (a range which covers enough but doesn’t generally extend to silly large sizes). If a FireFox user wants to supersize the text then so be it. However, buttons containing a fair amount of text are often annoying as I’ve never seen a browser that will maintain a fixed button size and wrap the text accordingly. Merely having the option, through text-resize detection and a bit of JS, to get a button to grow only vertically but not horizonally would be quite nice and is something I’ll have to play with some time soon.
    Copy & paste the code below to embed this comment.
  9. It doesn’t work properly in Opera. A pop-up message occurs every time you zoom in an extra 20%! So at 110%, nothing. But press + again to reach 120% zoom and the pop-up tells me the font size has _decreased_ by 1px. This happens every 20%. Therefore, the script cannot be used as it stands - unless you hide it from Opera users.
    Copy & paste the code below to embed this comment.
  10. Chris, Opera and IE 7 do not perform actually resizing of the text. These browsers zoom everything on the page so the actual size of the text stays the same. So for these browers detecting text size changes is not very useful. However it is useful to know the size of the text at the point of load (to detect users who need larger fonts for whatever reason - health or hi-res screens) which it does report correctly though. The article does allude to this behaviour for Opera and IE7 but perhaps we should have made it clearer. Thanks for posting the error in reporting the -1px decrepancy. Obviously this shouldn’t happen and I’ll take a look (didn’t notice this in testing). The event shouldn’t really fire for Opera and IE 7 but because of the bug, it thinks there is a font size change and fires.
    Copy & paste the code below to embed this comment.
  11. 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.
    Copy & paste the code below to embed this comment.
  12. 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
    Copy & paste the code below to embed this comment.
  13. 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.
    Copy & paste the code below to embed this comment.
  14. 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.
  15. 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.
    Copy & paste the code below to embed this comment.
  16. 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.
  17. 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 1x1 transperent beacon gif could do the job just as well.
    Copy & paste the code below to embed this comment.
  18. 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.
  19. 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.
    Copy & paste the code below to embed this comment.
  20. bq. 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.
    Copy & paste the code below to embed this comment.
  21. 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.
    Copy & paste the code below to embed this comment.
  22. 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.
    Copy & paste the code below to embed this comment.
  23. 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
    Copy & paste the code below to embed this comment.
  24. 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.
    Copy & paste the code below to embed this comment.
  25. (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.
  26. 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.
    Copy & paste the code below to embed this comment.
  27. 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.
  28. 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.
  29. 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.
    Copy & paste the code below to embed this comment.
  30. 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
    Copy & paste the code below to embed this comment.