Post Archive
› May 19, 2002
Resize px font here in win ie
I am experimenting with a simple little script (key.js) which allows Win IE users to resize px specified fonts. Just press the plus and minus keys to toggle between two font size settings. Someone who really knows js could make this much better (dave?).
The script currently loops through whatever tag you wish to alter (body tag in this case) and toggles the font size. It seems to work in IE 6 for win and IE 5.1 for mac os 9, however it's really only intended for win IE, since that's the culprit which can't resize px sized fonts. Mozilla and Opera seem to completely ignore the script. Reports of any browser version related problems would be appreciated.
Ideally this script would be re-written to up/down the font size in increments rather than just toggeling between two sizes.
The next question would be - how do we alert users to this functionality so that it's useful? Unfortunately this script doesnt fix the browser, it just hacks the ideal functionality for the page in which it exists, so some sort of notice to let folks know it's available would be helpful.
The idea to create this script was inspired by zeldman's discussion of the issue in a recent post.
Feel free to grab the script, alter and let us know how you've improved it. You should be able to copy/paste altered code into the comments if you like.
Comments
1. May 19, 2002 03:12 PM
2. May 19, 2002 03:21 PM
Quote this comment
Boris Posted…
Shouldn’t you be revising Paul? :P3. May 19, 2002 03:22 PM
Quote this comment
function keyDown(e) {
var key = (window.event) ?window.event.keyCode : e.which;
if(key == 187) {
var elements = document.getElementsByTagName(“body”); for(var i = 0; i elements.item(i).style.fontSize = “16px”;
elements.item(i).style.lineHeight = “18px”
}
}
if(key == 189) {
var elements = document.getElementsByTagName(“body”);
for(var i = 0; i elements.item(i).style.fontSize = “12px”;
elements.item(i).style.lineHeight = “14px” }
}
}
document.onkeydown = keyDown;
Nate Posted…
Hmmm.. odd, I haven’t changed it in several hours. I’ll try posting the script to this comment and let’s see what happens:function keyDown(e) {
var key = (window.event) ?window.event.keyCode : e.which;
if(key == 187) {
var elements = document.getElementsByTagName(“body”); for(var i = 0; i elements.item(i).style.fontSize = “16px”;
elements.item(i).style.lineHeight = “18px”
}
}
if(key == 189) {
var elements = document.getElementsByTagName(“body”);
for(var i = 0; i elements.item(i).style.fontSize = “12px”;
elements.item(i).style.lineHeight = “14px” }
}
}
document.onkeydown = keyDown;
4. May 19, 2002 03:32 PM
Quote this comment
I should point out that the idea of capturing keystrokes is something I’ve been toying around with thanks to you paul! (I typed “links” on one of your older pages).
Nate Posted…
Boris–actually Paul should be studying for his exams! What are you doing here paul? ;-)I should point out that the idea of capturing keystrokes is something I’ve been toying around with thanks to you paul! (I typed “links” on one of your older pages).
5. May 20, 2002 06:51 AM
Quote this comment
Paul Sowden Posted…
Umm.. most probably. I had my first exam today, it’s the start of the end. Nate, I’m curious, why are you iterating through all body elements in the document? Surely there should only be one in a validating document.6. May 20, 2002 07:20 AM
Quote this comment
Nate Posted…
Paul, Good point–I didn’t mention that... the looping through body tag is only in place for quick testing purposes, I guess that’s kind of a confusing default to have in place.7. May 20, 2002 08:56 AM
Quote this comment
Joshua Kaufman Posted…
Sounds neat but unless they’re really intuitive I’ve always found nonstandard interface widgets a pain to remember and use. Why not just use relative sizes? Then you don’t need to worry about px and special scripts.8. May 20, 2002 09:29 AM
Quote this comment
Nate Posted…
Joshua, I agree that non-standard widgets like this are not intuitive. Just trying to even things out a bit since win ie “should” support font sizing of px sized fonts.9. May 20, 2002 09:52 AM
Quote this comment
Dougal Posted…
Ah! That’s just what I was looking for! I had been thinking about writing something similar, but hadn’t actually gotten around to it yet.
This is just what I needed to make up my mind about whether to use px or ems in my redesign for my employer’s web site :)
10. May 20, 2002 10:33 AM
Quote this comment
Nate Posted…
Glad you like it Dougal, let us know if you get a chance to improve it. I guess I should try to fix it up myself rather than leaving it up to others... hmmm.11. May 20, 2002 12:37 PM
Quote this comment
James Posted…
I don’t think that pixels should resize we have several other elements that already duplicate this functionality. Read this article for an opinion I agree with. http://www.glish.com/archive.asp?file=2002_04_21_archive.xml#75697015 I’d go so far as to say that the only browser that addresses the issue of size/zoom is operas zoom feature. Its silly to have a system the only resizes 1 element of a page, ignoring images and such. I’ll be writing more on the subject with some suporting info in a lil bit at ordinary-life.net if anyone cares.12. May 20, 2002 01:22 PM
Quote this comment
Paul Posted…
Ah, but James, Mozilla (and IE mac I think) are only following Priority 1 WAI guidlines, which must be satisfied by user agents. It would be rediculous not to have this option.13. May 20, 2002 03:28 PM
Quote this comment
Dougal Posted…
James, I don’t think it’s silly to resize text separately from images. It solves exactly the design issue that I need to deal with. I’m not saying that we shouldn’t have additional options, though. A zoom feature that zooms all elements is great. And when it’s a standard feature with a 90% browser market share, I’ll take advantage of it. But my current problem was how to “effectively” (a subjective term, to be sure) deal with font sizes on a commercial site where 90% of the visitors have IE5+, NS6 is barely a blip on the radar, and Opera hasn’t even shown up on long-range sensors. I don’t want to just leave the font size completely to the whims of a default browser setting. But I also don’t want to lock out the possibility for a customer whose eyes aren’t as good as mine to blow the text up. So setting the initial font size in px and making sure that users have a way to resize them is just what I want to do.14. May 20, 2002 03:42 PM
Quote this comment
If it was a standard feature, you wouldn’t have to take advantage of it, it would already be there, thereby making this whole thread a moot point!
All kidding aside, but I hope that everyone bears in mind the fact that this and all other scripts should degrade gracefully–I’ve seen all too many sites admonishing me for using Mozilla RC1 saying “Please Upgrade”, which is rediculous. So if this (or any other) script is to correct erronious action in IE, specify as such.
To Paul and Nate on the “different script” issue: Mozilla (what Paul uses) has been known to “agressively cache” style sheets and JavaScript–so I’ve heard.
evan Posted…
Dougal said: And when it’s a standard feature with a 90% browser market share, I’ll take advantage of it.If it was a standard feature, you wouldn’t have to take advantage of it, it would already be there, thereby making this whole thread a moot point!
All kidding aside, but I hope that everyone bears in mind the fact that this and all other scripts should degrade gracefully–I’ve seen all too many sites admonishing me for using Mozilla RC1 saying “Please Upgrade”, which is rediculous. So if this (or any other) script is to correct erronious action in IE, specify as such.
To Paul and Nate on the “different script” issue: Mozilla (what Paul uses) has been known to “agressively cache” style sheets and JavaScript–so I’ve heard.
15. May 20, 2002 05:06 PM
Quote this comment
Nate Posted…
James–if you’re looking for image and text sizing, you might be more interested in this offering from John Weir’s smokinggun site. I like John’s demo and am very impressed by it, but don’t see much of a point of scaling bitmaps by default (user agent override is good). I see the image plus text scaling being a good option for vector based images — perhaps if svg get’s more popular, or if someone wants to use the flash plugin for static vector images.16. May 20, 2002 11:42 PM
Quote this comment
Slater Posted…
I can’t get this to run on my Win IE6 (6.0.2600.0000). Is it perhaps because I have a swiss-german keyboard layout? Or a german win98?17. May 21, 2002 07:12 AM
Quote this comment
Slater–would you mind testing out the homepage again, does this help with your keyboard situation?
Nate Posted…
update: David Lindquist has supplied us with an improved script, the improvements include better compatibility for key recognition than the keycodes I used in the original. The new script can be downloaded here and is called key2.js.Slater–would you mind testing out the homepage again, does this help with your keyboard situation?
18. May 21, 2002 07:13 AM
Quote this comment
Nate Posted…
Also–the plus and minus keys can be pressed from the number pad as well! Thanks dave.19. May 21, 2002 04:51 PM
Quote this comment
James B Posted…
Works for me now. Interesting idea but not intuative.20. May 22, 2002 02:46 AM
Quote this comment
Slater Posted…
Works now :)21. June 5, 2003 06:29 AM
Quote this comment
Paul Sowden Posted…
Hmm... I looked at the source just two seconds ago, my browser crashed, I returned, and there appears to be a different script there.