|
How to: Get pixel fonts to resize in IE
|
DrDoc
#:1224411
| 8:30 pm on Feb. 4, 2006 (utc 0) |
How to: Get pixel fonts to resize in IE
Background A pet peeve for many, whether new to CSS or old CSS farts, is Internet Explorer's inability to dynamically size pixel based fonts based on user preferences. While I realize that many (read: those less concerned about accessibility than a pixel perfect design) see this as a blessing ("Hah! You can't resize the font and mess up my beautiful [though apparently unstabile] layout!"), there are thankfully a greater number of those who truly see this as a problem. After all, pixels are considered relative units. Besides, browsers like Firefox and Opera resize pixels just fine. Problem, from a different perspective Now, I don't want anyone to think that there are not perfectly viable solutions out there. You can use percentages and ems just fine. They resize beautifully in IE and FF/Op alike (well, aside from the em resizing bug in Internet Explorer; but that's for another time and place). It is, however, not a secret that many find percentages and ems awkward to use at first; and, seriously, who can blame them? "Yeah, I would like my font to be displayed at 123% of ... of ..." Unless you come from some other print/publishing background, you're not going to have a clue what the heck ems and ens are (like, how many people do you know who can explain the difference between an em-dash, en-dash, and a plain ol' regular dash?) After dealing with the percent and em soup for a while (oh c'mon, it is not that difficult to get used to) many throw their hands in the air and give up on all those fancy "dynamic" and "resizable" font sizes. Of course, you also have those who never get deep enough into CSS to realize that there even is such a thing as percentages and ems (not to mention ens; but, let's not go there ... ever). Before going any further, I would like to throw in a shameless finger pointing to anyone who would ever think to use points in their style sheet. It has been said many times, but probably deserves to be said again: points are for printing, not for web use! Do not ever ever e v e r use "pt" as a font size in your stylesheet. It does not belong there. So, that leaves us with ... Pixels, a natural choice So it comes down to pixels. Pixels aren't bad. They're easy to understand and grasp. Heck, you can even see them on your monitor! (I promise. Move closer, closer, closer ... There they are!) Quite frankly, if you are one of those right-brained people, pixels are going to come more naturally. You size your boxes and various other elements using pixels, so it is only logical to be able to size your fonts using the same unit. (Imagine getting driving directions: "Follow the street for half a mile, then turn right and travel another 1/100th light-seconds ...") But then there was the thing about Internet Explorer not resizing your pixel based fonts ... How to be both logical, simplistic, yet care about accessibility? The solution The beauty of the solution is not only that it works, but that it allows you some flexibility. You can choose whether you prefer to implement the sizing method employed by Firefox (text resizes, images don't) or the one used in Opera (everything sizes proportionally). It is also a solution which is guaranteed to do no harm to non-IE browsers. It targets Internet Explorer alone. Now you have the power of using the solution which comes most naturally to you, but without any of the drawbacks. (Of course, I still think you should opt for learning percentages or ems ... But that's just me [and a bunch of other people].) First, let's look at a page without the solution in place: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Resizing px in IE</title>
<style type="text/css">
body {
font-size: 20px;
}
</style>
</head>
<body>
<h1>PX Resize Test</h1>
<p><img src="http://www.google.com/intl/en/images/logo.gif" /><br />
Lorem ipsum dolor sit amet ... blah blah blah ... more fake latin here.</p>
</body>
</html> |
|
Simple enough. There's some text, font size is set to 20px; open up in IE, change text size; typical scenario. Let's apply the fix: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Resizing px in IE</title>
<style type="text/css">
#wrapper {
font-size: 20px;
}
#pxtest {
position: absolute;
visibility: hidden;
}
#px {
font-size: 16px;
height: 1px;
}
#percent {
font-size: 100%;
height: 1px;
}
</style>
<!--[if lt IE 7]>
<style type="text/css">
img {
zoom: expression(1 / (document.getElementById('percent').scrollHeight / document.getElementById('px').scrollHeight));
}
#wrapper {
zoom: expression(document.getElementById('percent').scrollHeight / document.getElementById('px').scrollHeight);
}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<h1>PX Resize Test</h1>
<p><img src="http://www.google.com/intl/en/images/logo.gif" /><br />
Lorem ipsum dolor sit amet ... blah blah blah ... more fake latin here.</p>
</div>
<div id="pxtest">
<span id="px">test</span>
<span id="percent">test</span>
</div>
</body>
</html> |
|
That's it! Open up in IE, change text size ... Whoa! What happened? It changed! (Well, I guess this whole post would have been pointless if it didn't.) Let's look at why this works. We will focus on the document body first, and then get back to the stylesheet. First of all, an absolute must for this solution to work is that there is some form of content wrapper which holds the entire contents of your page. ...
<div id="wrapper">
Your page goes here
</div>
... |
|
That is not really a big deal, since the vast majority of all (CSS based) layouts have some form of content wrapper. If yours doesn't, add one. Next, we need to add some "fluff" in order to get the solution to work. <div id="pxtest">
<span id="px">test</span>
<span id="percent">test</span>
</div> |
|
Yes, I'm sorry. I really wish no extra elements were needed. But that's what you get for not using percentages or ems. Now, let's look at the stylesheet. First of all, we need to assign any font sizes to our wrapper element. Do not assign a font size to the body in your stylesheet. #wrapper {
font-size: 20px;
} |
|
We also want to hide those extra elements we had to add. #pxtest {
position: absolute;
visibility: hidden;
}
#px {
font-size: 16px;
height: 1px;
}
#percent {
font-size: 100%;
height: 1px;
} |
|
Finally, the magic itself, wrapped in a conditional comment (which is how we can target only IE, along with only targetting IE6 and below for now, until we know for sure how IE7 is going to handle resizing of pixel based font sizes). <!--[if lt IE 7]>
<style type="text/css">
img {
zoom: expression(1 / (document.getElementById('percent').scrollHeight / document.getElementById('px').scrollHeight));
}
#wrapper {
zoom: expression(document.getElementById('percent').scrollHeight / document.getElementById('px').scrollHeight);
}
</style>
<![endif]--> |
|
So, how exactly does this work? Look at the CSS rules for our #px and #percent elements. Under normal circumstances (i.e. when the text size is set to "medium" in IE) the text in these two elements is going to be exactly the same size. If the text size is adjusted, the #percent text will resize accordingly. In order to get our pixel based font to adjust accordingly, we apply a zoom on our wrapper (all calculated using an IE expression). In our example above, images will not be resized. In order to ensure this, a counter-zoom is applied to all images. Should you prefer images to resize with the text, simply remove the img rule from the IE-only portion. Caveats - The code, as supplied above, uses getElementById which does not work in certain older versions of IE. You can probably safely replace all instances of getElementById('...') with all['...'] - The above fix assumes that you are using ONLY pixel based font sizes in your stylesheet. Do NOT apply the fix if percentages or ems are used, as this will cause incorrect (and duplicate) resizing. - There may be certain scenarios which would trigger undesired behavior in scaling of non-textual elements. While I have not made an effort to account for all of these, nor tried to iron out all possible scenarios under which text sizing using the method above would produce unwanted results, I'm sure there are workarounds. First, I would recommend adding additional elements to the img rule in the IE-only stylesheet. If that doesn't work, there's always percentages and ems. ;)
|
RonPK
#:1224412
| 10:21 pm on Feb. 4, 2006 (utc 0) |
Nice one, DrDoc! Just in case someone stumbles upon this thread looking for a solution from a user perspective: yes you can have IE resize pixel fonts. Tools > Internet Options > Accessibility > check "Ignore font sizes specified on web pages".
|
DrDoc
#:1224413
| 10:33 pm on Feb. 4, 2006 (utc 0) |
Yes, you are absolutely right, RonPK. But that doesn't really "resize pixel fonts" per se. It simply ignores font size definitions altogether (whether pixels, percentages, or anything else) as if they were not defined in the first place. :) Plus, from a more public user perspective -- anyone using an internet cafe or other type of public computer (library, school, etc) will typically not have access to change those settings. It also does nothing for non-textual content. While you are right that there are options for the user, I think more designers/developers/site-builders should take responsibility for building accessibile sites. The solution above provides everyone with the option and flexibility of using pixel sizes, while at the same time being more accessibility friendly. By way of (ultimately) zooming the entire page proportionally, not just the text, it even provides an answer for all those "don't-you-dare-change-the-text-size-since-it-will-mess-up-my-beautiful-layout" users. ;)
Clarification: RonPK and I are talking about a solution from two different perspectives. While I am discussing the problem from the site owner/designer's point of view, RonPK is discussing the problem from the end user's perspective.
|
ricfink
#:1224414
| 3:05 pm on Feb. 5, 2006 (utc 0) |
Clever approach to the problem Doc. A few things:
1) Conditional comments started with IE5 so there is no need to concern yourself with versions older than that if you're using conditional comments. This hack will be hidden to IE 4.
2) If anyone's concerned about making this technique work for IE5 just beware that support for CSS expressions in IE5 is less than rock solid and more importantly IE's CSS Zoom didn't appear until IE 5.5 so the hack won't work.
Just change the comment to if IE 5.5 and it will work with versions IE 5.5 AND LATER.
3) Applying IE's CSS zoom can be tricky. In your example, the H1 element is resizing by a much larger percentage than the body text because it's actually resizing twice. The first time is in response to IE's Text Size menu selection which resizes all heading elements unless a value is explicitly specified in the style sheet and the second time when the zoom kicks in.
All happens in a blink so it goes by unnoticed.
4) IE's CSS zoom breaks a lot of layouts and can cause unwanted side effects like horizontal scrollbars.
Use with caution.
5) The extra "fluff" elements that must be included in the page in order for IE to do the measuring and comparing will add an invisible footer - some extra white space - to the bottom of the page.
(Display:none breaks it, I suppose?)
|
DrDoc
#:1224415
| 6:18 pm on Feb. 5, 2006 (utc 0) |
Just a quick response: 1) I don't think anyone really cares about IE 4, do they? :) 2) Personally, I am less concerned with whether this works in IE 5.0 or not. At least it won't break, and that's most important. So, technically there is no need to change the conditional, since IE 5.0 already ignores the zoom, and IE 4 simply is not targetted. The way it stands right now, at least we are sure it does not harm layouts in IE 7, while targetting old versions of IE. 3) In my example I simply failed to give the heading a size. The px sizing fix assumes that you have given your headings an explicit (pixel) size, which I also assume everyone does. As stated in the caveat section, applying this fix when percentages and ems are in place (as is the case with the default size for headings) will resize them twice, as you correctly pointed out is happening. Thus, that is a result of failing to declare a px size for the heading, not a result of the fix not working. :) 4) The zoom does little to no harm to fluid layouts. It does, however, resize pixel based layouts. But, is this really bad? The reason for using a pixel based layout with pixel based fonts is usually because the person developing the site didn't want users to be able to mess up the layout in the first place. Applying the zoom maintains the layout as intended, while scaling it up proportionally. See it as moving your head closer to the screen, but without the straining of one's eyes. It's the whole purpose! :) Also, one can aptly ask which is more important: an accessible site, or whether there is an occasional scroll bar. 5) The extra "fluff" does NOT create a footer effect. As you will notice in the example there is a wrapper element for the two "test" spans as well (#pxtest). This element has absolute positioning applied which removes the element from the flow entirely. The visibility is then set to hidden to fully remove it from view. Setting display to none should also work, practically speaking. But, technically it also generates no content, thus no content to test. While this is not currently a prohibitive scenario, I opted to toggle the visibility which merely hides the "fluff".
As stated previously -- there are caveats, that's for sure. This is not an ideal solution. The ideal solution is to use fluid layouts, percentages and ems. Don't worry so much about being pixel perfect. You can create and maintain just as beautiful layouts in a fluid state. Pixel perfect is about control, not about the result. On the other hand, the fix supplied above does work, and it does make your site more (visually) accessible. When applied correctly, it does no harm to your site, your layout, your users, or your marriage. ;)
|
Robin_reala
#:1224416
| 7:20 am on Feb. 6, 2006 (utc 0) |
This certainly is an interesting technique. A couple of caveats that I can see though: 1) 'zoom' triggers the 'hasLayout' flag. This isn't going to be an issue for most developers but it's worth bearing in mind. 2) | Do not ever ever e v e r use "pt" as a font size in your stylesheet. It does not belong there. |
|
It does if it's a print stylesheet :)
|
DrDoc
#:1224417
| 7:27 am on Feb. 6, 2006 (utc 0) |
Hopefully the wrapper will be immune to any hasLayout problems. In fact, by just making it a "dead" wrapper, whether it has layout or not will be irrelevant. And, yes, certainly use pt in a print stylesheet. But the overwhelming majority of users who use print stylesheets would also opt for the use of truly fluid units. Is that too harsh of an assumption? :) Good feedback from everyone, btw. I'd like to hear from the hardcore pixel people though.
|
pageoneresults
#:1224418
| 1:02 pm on Feb. 6, 2006 (utc 0) |
| Good feedback from everyone, btw. I'd like to hear from the hardcore pixel people though. |
|
Thanks DrDoc! Unfortunately this is a few days too late for me as I've found an interim solution to my fixed environments and have implemented it over this past weekend. I've been designing in a pixel perfect environment for quite a few years. I typically will not use font sizes below 12px. For primary content 13px. And then sometimes for navigation elements I might drop to 11px but I typically have bold applied and the 11px is easily readable. What was my interim solution? I'm using a style sheet switcher script. I've now got two style sheets for the user to choose from; 1X which targets 800x600 (760 max) users and 2X which targets 1024x768 users (955 max). I've been viewing a test site on multiple monitors over the past year. Since I have over 20 monitors at the corporate office to use, I've been able to get a good feel for what people are seeing at different resolutions. My two style sheets are basd on that testing. Yes, I know, what about those who do not have their window maximized? Well, I figure this, most are going to maximize if they find what they are looking for on the site. I find that I'll surf minimized. If I find something of interest, I'll maximize to get a full screen view. I want to make the transition to fluid environments. My problem has been fixed widths on navigation elements that have background images designed for those widths. If the font sizes were relative, the menus become a mess when they start to wrap. And there is another issue, wrapping. I've got most of my navigation elements set to not wrap (white-space:nowrap). In a fluid environment, when the user goes above medium (or default), the menus start to push into the main content (which is absolutely positioned). See the problems I'm faced with? I'm currently working on a few new designs for clients. One of those is going to use a 3 column fluid layout. I think it is time for me to venture outside of my pixel perfect environment and experiment with relativity. ;) About two years ago I tried to make the switch to a fluid environment. I figured, if I was going to do it, I was going all the way. So, I took my design in PNG format and sized everything via ems. Wow, what an experience that was. Talk about planning in advance. You want to make sure that all of your images are properly sized. It was a bear to get everything lined up just right for the images upon resizing. How about another topic for working with images sized in ems? P.S. It is very difficult to work in a fluid environment when you are working with pixel perfect designs. You definitely need to think outside the <div> when designing for a fluid site, it's a totally different concept. P.S.S. And, for all of you who like to use 10px/11px for primary content, I've not been able to read your sites for years. I had to go somewhere else. It appears that once you hit your mid 40s in this industry (behind a computer), the eyesight begins to deteriorate. I cannot read 10px type on web pages (not without moving close to the monitor).
|
Hester
#:1224419
| 4:03 pm on Feb. 6, 2006 (utc 0) |
| ...until we know for sure how IE7 is going to handle resizing of pixel based font sizes. |
|
Well, IE7 has a zoom menu! It works like Opera, in zooming everything on the page. If anyone can confirm that it works with pixels, please do. (I assume it does, as I think it works using the zoom filter. Amazingly, zoom does resize pixels, as this thread demonstrates.) I don't quite get the extra code in this thread though. Why not just use the simple zoom CSS filter and apply it to whatever element you wish? Eg:
p {zoom:2;}
| I cannot read 10px type on web pages. |
|
Thankfully Firefox and Opera have a "Minimum font size" setting. Use that to increase all fonts to something better, like 12px! Or just keep the fonts enlarged at 120% or more. IE can also apply a custom stylesheet, which can enlarge fonts.
|
pageoneresults
#:1224420
| 4:21 pm on Feb. 6, 2006 (utc 0) |
| Why not just use the simple zoom CSS filter and apply it to whatever element you wish? |
|
Hester, do you have a link to the W3 and the specification on the zoom mechanism? I've been searching for the past few minutes and can't seem to find anything definitive. I want to experiment with it. <added> Never mind, I'm reading some stuff now on the CSS Zoom.
|
DrDoc
#:1224421
| 4:36 pm on Feb. 6, 2006 (utc 0) |
| I don't quite get the extra code in this thread though. Why not just use the simple zoom CSS filter and apply it to whatever element you wish? |
|
Because the code allows the font to be resized using the browser settings.
|
pageoneresults
#:1224422
| 4:54 pm on Feb. 6, 2006 (utc 0) |
Still on topic... I do believe there are still users out there who are not aware of the text sizing capabilities of their browser. I visit with local clients throughout the year and have a chance to view their personnel use the Internet and I'm surprised at how little they know about their browser. I'm a fan of the Opera Zoom Feature as it zooms the whole page (graphics and text). When text is enlarged in other browsers, fixed graphic elements become an issue. I think a viable way to address that is with an alternate style sheet summoned through a style sheet switcher. I think a user is more apt to adjust their font size if they see a couple of buttons (showing font sizing) on the website as opposed to using the text sizing function of their browser. Again, this is for the novice Internet user which is probably going to be the one that needs an increased font size. And, if that is the case, hopefully whoever configured their computer has made concessions for the eyesight issues. IE does offer Accessibility options which if the user has eyesight problems, I'm hoping they are familiar with their browser settings. IE still comes default without the Text Sizing button in the main toolbar, you have to add it. Right Click Toolbar in IE > Customize > Select From Left > Add to Right P.S. I guess these issues can be addressed by doing this... *{font-size:100%;}
|
SuzyUK
#:1224423
| 5:53 pm on Feb. 6, 2006 (utc 0) |
| If anyone can confirm that it works with pixels, please do. |
|
I can confirm IE7B2 Zoom browser setting works just like Opera, enlarges everything, pixels graphics etc.. btw, it also still has the usual text size adjustment as well too which still does not resize pixels Great thread Doc!
|
pageoneresults
#:1224424
| 5:56 pm on Feb. 6, 2006 (utc 0) |
Can you CSS Gurus give us some working examples of how you use the CSS Zoom features? Please? I saw this... p {zoom:2;}
And, in the reading I've done so far, it appears there are different numerical values you can use?
|
DrDoc
#:1224425
| 6:03 pm on Feb. 6, 2006 (utc 0) |
1 = 100% = no zoom
.5 = 50% = zoomed out
2 = 200% = zoomed in Any positive floating number can be used. zoom is IE proprietary
"give us some working examples of how you use the CSS Zoom features" I never ever do :)
(well, except for the example above ... but that's a first) You'll occasionally see it mentioned in the forum as a way of giving an element layout (hasLayout = true) which is a way of targetting IE bugs without risking changing the way an element (or its children or surrounding elements) are rendered
|
ronin
#:1224426
| 7:02 pm on Feb. 6, 2006 (utc 0) |
Excellent hack, DrDoc. I hope it's not too controversial to say that font-resizing was out-of-date by the time pictures became commonplace on webpages. On a text-only page - or a page with very few graphics - enlarging the text while keeping all other elements the same size makes sense. When a page has both graphics and text, it - surely! - makes more sense to be able to zoom in and out of the entire page, with all elements resizing relative to each other. Opera has it right. The other browsers do not.
|
DrDoc
#:1224427
| 8:41 pm on Feb. 6, 2006 (utc 0) |
I'd tend to agree with you there ;) Hmm, just opened up my example in IE6, held down Ctrl and used the scroll wheel :o
|
Hester
#:1224428
| 9:35 am on Feb. 7, 2006 (utc 0) |
| When a page has both graphics and text, it - surely! - makes more sense to be able to zoom in and out of the entire page, with all elements resizing relative to each other. Opera has it right. The other browsers do not. |
|
This is, of course, just your personal opinion. The problem with also enlarging the graphics is this: what happens when your page is the full width of the screen? Answer: you get horizontal scrollbars! Thus a zoomed page loses some of the content off the side, forcing the user to scroll left and right to read it. Accessible? Hmmm. In many ways it is better just to enlarge the text. The screen stays the same width, while the graphics... that is the other problem with a 'zoom-all' approach. I find zoomed graphics horrible to look at - they are all fuzzy, as they are not meant to be zoomed. Unless - which is very rare - the author has allowed for this by using hi-res images which can scale up or down, then the page soon becomes a mess. If the layout is not full-width, then Opera's approach works great - I use it all the time. But if the page is full width, then Firefox's approach is better. After all, I can see the images alright, it's just small text I want to enlarge - not the whole page! Opera does have one ace up its sleeve though - Fit to Width. This allows the content to stay at the maximum width, but also enlarge the text and images. So the page always fits the screen. Of course the layout will be strained! On Bugzilla, the Firefox bug reporting database, there's a fascinating debate as to implementing a zoom-all approach in Firefox. Right now it's considered low priority by the developers. But, especially now IE7 has it, users are pushing for Firefox to implement it sooner rather than later. They just need to figure out how to do it.
|
ricfink
#:1224429
| 5:02 pm on Feb. 7, 2006 (utc 0) |
To get back to Doc's original response to my post - I too could not care less about supporting IE4 (or IE5 at least as far as a feature like this is concerned).
Plus, since most sites are sized in pixels anyway, if it doesn't work, no harm no foul.
I was just stating it for anybody who would try to implement.
Also, unless my eyes decieve (which is very possible because I'm in my fifties and blind without my reading glasses), without top and left coordinates, the fluff div wrapper and it's contents does create a footer.
As was noted earlier, the IE7 Beta Preview includes a zoom feature similar to Opera's. The Text Size menu is still there alongside it.
IMO now we have two poorly implemented features for sizing and resizing text and images side by side!
I can hear the help desk phone ringing off the hook already.
Whether they're going to include it as is in the final release is anybody's guess. I'll be posting my thoughts on the matter in the IE Blog shortly. I'd like the forum's thoughts on this scenario: All of the problems with sizing text in ems and percents stems from the fact that the default font size in IE is quite large and once you try to adjust it by setting the font size for BODY to a pixel value, IE will no longer resize the text.
What if there was a meta tag you could use to specify a base pixel font size corresponding to each of the five settings in the Text Size menu - medium, larger, largest, smaller, smallest?
Like this:
<meta text-size="10,11,12,13,14" /> If such a thing existed in IE, nearly all of the problems designers have with the Text Size menu go away. Plus, the author of the page would have some input so as to preserve the integrity of the layout but still give users the ability to boost the text in small - or large, if you the designer think it's warranted - increments.
Personally, when I visit a web site, I want to see what the author of the page originally intended for me to see. But I would also like the author to provide me with an intelligent resizing scheme that allows me to adjust for my eyesight and monitor and screen resolution without blowing apart the overall visual message. Taking it one step further, this concept could be extended to include alternate stylesheets corresponding to each selection in the Text Size menu. Waddaya think?
|
DrDoc
#:1224430
| 6:00 pm on Feb. 7, 2006 (utc 0) |
I think the "10px" people would set the value to "10,10,10,10,10" :) Regarding a footer effect, consider the following example: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
</head>
<body>
<div style="background: yellow;">test<div>test</div></div>
<div style="background: red;">test<div style="position: absolute; visibility: hidden;">test</div></div>
</body>
</html> |
|
|
ricfink
#:1224431
| 2:23 pm on Feb. 8, 2006 (utc 0) |
"the 10px people would set the value to 10,10,10,10,10" Well, the point is that they are already doing that, metatag or not. However, if they had some control over the sizing/resizing effect which didn't involve jumping through hoops they might write: 10,10,10,11,12 and give some poor old geezer like me the chance to read what's on the page.
Altering the base font size for the page in pixel values makes possible smaller, less drastic gradations as you move from small to large. It also insures that at settings of smaller or smallest, the text isn't too small. The other thing that bothers me about the Text Size feature is that, once you've changed the setting, that new setting not only becomes the new default setting for IE but for anything that uses the IE engine like a chm help file. You have to close the damned help file and open up IE, fix the setting and then reopen the help file. Also, the size the user prefers is usually site-specific. Why should the setting hold over when I click a link and move to another site with an entirely different layout and sizing scheme?
At the least, there should be a fifth choice in the Text Size menu that toggles this "stickiness" on and off.
Maybe "Apply To All Sites" with a checkmark next to it to indicate which mode is in effect. Opera has a setting in one of it's tools menu for a default zoom level. And, by the way, Opera's page zoom plain old works better than the one in the IE7 Beta Preview.
|
pageoneresults
#:1224432
| 2:48 pm on Feb. 8, 2006 (utc 0) |
A little OT... Quick tip for adjusting font sizes in IE... Ctrl + Scroll Wheel (wheel mouses only) Keep in mind that this only works on sites that are not using font sizes fixed in pixels. To bypass the fixed pixel issue, go to... IE > Tools > Internet Options > Accessibility > Ignore font sizes specified on web pages
|
Hester
#:1224433
| 3:20 pm on Feb. 8, 2006 (utc 0) |
| The other thing that bothers me about the Text Size feature is that, once you've changed the setting, that new setting not only becomes the new default setting for IE but for anything that uses the IE engine like a chm help file. |
|
This is a problem with Eudora. It uses the MSHTML renderer to display emails. These typically appear in text I consider too large. But change the text size to smaller and it changes it for IE too! EDIT: ah wait! Version 7 has a new menu option to use different settings than IE yet still use the renderer. Mind you, I just tried it and it made the fonts smaller in IE! I set them back and they seem to have stuck. I'll check again when I reboot the PC as this has changed them back in the past.) I can switch to a different HTML renderer in Eudora, but it looks hopeless compared. Since the rendering engine behind IE is also in many different applications, changing IE also affects those. Another example is when I added a red hover colour to links in IE. Suddenly links in Eudora also show a red hover! This is why browsers like Opera and Firefox are a good choice, as they don't affect any other applications. You can set the fonts as large as you wish. IE only has a limited range of sizes to choose from.
|
Fotiman
#:1224434
| 3:40 pm on Feb. 8, 2006 (utc 0) |
Hester wrote:
When a page has both graphics and text, it - surely! - makes more sense to be able to zoom in and out of the entire page, with all elements resizing relative to each other. Opera has it right. The other browsers do not.
|
|
This is, of course, just your personal opinion. The problem with also enlarging the graphics is this: what happens when your page is the full width of the screen? Answer: you get horizontal scrollbars! Thus a zoomed page loses some of the content off the side, forcing the user to scroll left and right to read it. Accessible? Hmmm.
|
|
Horizontal scrolling does not make a page inaccessible. Not being able to see a graphic that is too small on the other hand...
I find zoomed graphics horrible to look at - they are all fuzzy, as they are not meant to be zoomed.
|
|
You may find them horrible to look at, but someone with poor eyesight may require the image to be zoomed in order to see it.
If the layout is not full-width, then Opera's approach works great - I use it all the time. But if the page is full width, then Firefox's approach is better.
|
|
This is, of course, just your personal opinion.
After all, I can see the images alright, it's just small text I want to enlarge - not the whole page!
|
|
That doesn't really make much sense. Why could you see a small image any better than you could see small text? My personal opinion is that it should be user-configurable. That is, the user should be able to zoom-all, or just zoom-text. For example, on some pages the size of images may be much larger than the text on the page, and perhaps visible without the need for a zoom. And on other pages, the images may be small enough that they need zooming in order to see them. So why not give the user that choice? Unfortunately, I don't think any browsers implement both models.
|
Hester
#:1224435
| 10:23 am on Feb. 9, 2006 (utc 0) |
IE7 does. You get zoom all, or the Text Size menu. Ahem. Interestingly I came across a rant on another forum where the guy was furious that zoom also enlarged the graphics in Opera. Personally I can 'see' the images fine, but some small text is hard to read from a distance. Even normal size text can look better on a large screen when enlarged a size or two.
|
pageoneresults
#:1224436
| 12:04 pm on Feb. 11, 2006 (utc 0) |
Definitely on topic... I've been implementing a CSS Style Switcher on various sites that I manage. On a client website which gets quite a bit of interaction from visitors, this comment came in the day after I added the functionality to enlarge the text. Body is set with a default fixed font size of 13px/18px verdana (the 1X version). In the 2X version, it is 15px/22px. | I wanted to compliment you on your well thaught out web page, it is easy to navigate and very informative! I especialy want to congradulate, compliment and thank you for your forsight to include buttons to enlarge the text for people like myself that are visualy impaired! Your web page is by far one of the best I have seen! |
|
|
DrDoc
#:1224437
| 4:10 pm on Feb. 11, 2006 (utc 0) |
Isn't it great to get comments like that! I, for one, have to say that I see all too few well-thought-out text-resizing mechanisms, if existant at all (which is usually not the case).
|
ronin
#:1224438
| 5:33 pm on Feb. 11, 2006 (utc 0) |
The issue with having resizable text but no zoom function is that it breaks every page which either has a fixed width or has absolutely positioned elements (or both). Fotiman is right. There should be browser options in plain view for anyone to either zoom the whole page or simply increase the font-size.
|
annej
#:1224439
| 2:14 am on Feb. 19, 2006 (utc 0) |
| There should be browser options in plain view for anyone to either zoom the whole page or simply increase the font-size. |
|
This would be wonderful. Most Internet users don't have a clue about how to change the font size so all the fixes in the world won't help them. Something obvious on the browser would be so much better.
|
|
