Last updated: 1 August 2006
Tests and a tool (bookmarklet) for detecting and outlining elements of a page with font sizes based on fixed units, useful for checking behaviour in Internet Explorer.
Letting users control font-size has been a general rule for some time now (ref. Jakob Nielsen's Alertbox, August 19, 2002: Let Users Control Font Size). To this end, using absolute, or fixed, font sizes should be avoided. Typically, text set in these units will not be resized. Some users will be able to override such settings, but we should not rely on that.
It is probably safe to say that the majority of developers using CSS are using pixels to set font sizes. In an ideal world, that would be fine and dandy, but for one problem. By default, Microsoft Internet Explorer 6 for Windows (IE6) will not change text size of elements with font-size set in fixed units, including pixels. Strictly speaking, px is actually a relative unit, not a fixed one. Still, IE6 will not resize text set with its font-size in the following units:
There is a workaround for this behaviour in IE6; check the "Ignore font-sizes specified on Web pages" box in the Accessibility settings of Internet Options. However, we cannot expect users to know about or do this, so it is best to avoid px-based font sizes altogether.
If you are interested in reading more, Joe Clark explains the problem with pixel-based font sizes in his notes from @media 2005.
So, pixels are not a viable solution at the moment. It is possible to set font sizes using other relative units, such as:
Check out Richard Rutter's "How to size text using ems" for more on using relative units for font sizes.
The script/bookmarklet on this page is intended as a tool to help developers test for this text resizing problem when IE6 itself is not available to run the test (on a Mac, for example). Hence, this script currently does not work in Internet Explorer. The bookmarklet is still under test. It may run slowly on large web pages, and may even crash your browser. Use with caution and at your own risk.
Most recent updates first:
Most recent issues first:
font elements.font elements - IE6 strangely allows text in these elements to resize. It
is not fully tested, so font elements may occasionally get highlighted as well.You save a bookmarklet to your Bookmarks in the same way you would a normal link. For example, you can drag and drop one of the links into your Bookmarks. Or you could hit the "Bookmark This Link" option from the context menu of the link you want to save.
Warning: This bookmarklet is still under test. It may run slowly on large web pages, and may even crash your browser. Use with caution and at your own risk.
Note on the highlight colour: The colour used for highlighting elements may not always be appropriate, so a few options are
provided. A different colour (or keyword, such as "invert") can be set using the hc variable at the beginning of the script.
Bookmarklet links:
Bookmarklet code:
javascript:var hc='#F00';function hctn(el){var cn=el.childNodes;for(var i=0;i<cn.length;i++){if(cn[i].childNodes.length>0)hctn(cn[i]);if((cn[i].nodeType==3)&&ff(cn[i].parentNode))cn[i].parentNode.style.outline='1px solid '+hc;}}function ff(el){if(el.style&&el.style.fontSize.match('px|pt|pc|cm|mm|in'))return true;return false;}(function(){if(!document.styleSheets||!document.getElementsByTagName)return false;var ss=document.styleSheets;for(var i=0;i<ss.length;i++){var cr=new Array();if(ss[i].cssRules)cr=ss[i].cssRules;else continue;for(var j=0;j<cr.length;j++){if(ff(cr[j]))cr[j].style.outline='1px solid '+hc;}}hctn(document.getElementsByTagName('body')[0]);})()Please contact me if you experience problems with using this bookmarklet.
JavaScript test links:
font elementsThe deprecated font element has a strange effect on IE6. Text seems to resize even if the parent element has a
pixel-based font size set in CSS.
font element (oddly enough, resizes in IE6, so should pass).font element (oddly enough, resizes in IE6, so should pass).font element (oddly enough, resizes in IE6, so should pass).font element (oddly enough, resizes in IE6, so should pass).font element (oddly enough, resizes in IE6, so should pass).font element (oddly enough, resizes in IE6, so should pass).font element (oddly enough, resizes in IE6, so should pass).font element (oddly enough, resizes in IE6, so should pass).Back to the JavaScript Experiments index.
Back to the Lab index.