Visitor Control Font Size On A Website

HTML & CSS
1

Sitepoint Members,

On a number of sites I see they have a small “A” next to a larger Awhich is next to an even laeger A. It indicates to the visitor that the visitor can chage the font size for just that site - not all the sites the visitor visits as View - Zoom on the browser does. You know where I can get the code to do that?

Thanks,

Chris

2

You’d normally do this with JavaScript. E.g.

But really, users can so easily change the font size themselves that I consider something like font-sizing buttons to be redundant.

3

That depends on the browser. In Firefox, zoom only affects the site(s) for which I zoomed.

4

[FONT=verdana]

But isn’t that also true of the on-page buttons that Chris is referring too? In other words, whichever mechanism you use for changing the font size, it will only affect the current page or site. Or have I misunderstood the question?

Mike[/FONT]

5

I think I might have confused the issue here. I thought Chris was asking about adding font resize buttons to a site, in order to add specific functionality not available via the browser. (i.e. if you use the browser to zoom, it zooms all sites, not just the one you happen to be viewing, whereas the buttons apply to the one site only.) I don’t know about other browsers, but Firefox only zooms for a specific site (and remembers the zoom setting next time you visit), reverting to its default settings for other sites. I just thought it was worth mentioning. :o

6

I was wrong on that. I thought View-Zoom would change font size for all websites. Still, I would like to have the ability to change size repeatedly by clicking again and again. It was getting popular for a while and now few sites have it. Those that do don’t show the code for it in view source. I need it because font-weight is close to useless - no change between 400, 500, and 600, at least not on my site. The text is too heavy and the next actual change down in thickness of the letters is too light.

Thanks,

Chris

7

[FONT=verdana]That’s right, Chris. The sort of buttons you described are site-specific. (And, when you think about it, that’s how they should be. It would be bad behaviour for one site to interfere with the settings of another site.)

If you are sure you want to add this feature to your site, there are plenty of examples available to help you out. For example, you might take a look at the code shown here: http://www.dynamicdrive.com/dynamicindex9/fluidtextresizer.htm

But I would question the need. You say it was popular for a while but not so much now. That’s not surprising. After all, if you encounter a page where the text is too small, what do you do? Do you use the standard resizing feature built into your browser, or do you spend several seconds hunting around the page for a non-standard control which might or might not be present?

Mike
[/FONT]

8

In most browsers it does – certainly in IE8 and Opera, the last set zoom becomes the default for any new windows or tabs, although it doesn’t affect other windows or tabs that you already have open (even if you load a new page into them). I’m not aware of a way to set a site-specific zoom on Opera, other than by applying a custom stylesheet to particular sites.

9

[FONT=verdana]

in IE8 and Opera, the last set zoom becomes the default for any new windows or tabs

I didn’t know that. It’s certainly not the case with Firefox.

Ah, wait a mo’. I see that if you go to Tools / Options / Content in Firefox, you can change the default font size. But I guess that would only work if the web page you are viewing doesn’t set its own (absolute?) font size.

Mike[/FONT]

10

Here’s a proof of concept, using jQuery, for brevity and clarity.


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<title>Font size with jQuery</title>
</head>
<body>
	<a href="#" id="largerText">A+</a>
	|
	<a href="#" id="smallerText">A-</a>
	<p>E tu, "Lorem ipsum" ?!</p>
	
	<script>
		$("#largerText").click(function() {
		  $("body, input, select, textarea, button").css("font-size", (parseInt($("body").css("fontSize")) * 1.1) + "px");
		});

		$("#smallerText").click(function() {
		  $("body, input, select, textarea, button").css("font-size", (parseInt($("body").css("fontSize")) * 0.9) + "px");
		});
	</script>
	
</body>
</html>

It works by multiplying the body font size by a 1.1 factor for larger text and by a 0.9 factor for smaller text.

There are a number of form elements that are not affected by the body font size value. That’s why those are listed along with the body element in the jQuery multiple selector: input, select, textarea, button. This means, of course, you should take care of them in more detail than I did above.

The main issue is that you have to use relative values for the elements affected by the body font size changes: em or %. Using px font sizes for them it means they will not inherit the font size anymore.

11

[font=verdana]Yup, that’s pretty standard. And it’s why I continue to rail against people who say it’s OK to use absolute font sizes now that IE6 is pretty much dead. It isn’t. It completely screws things up for people who have changed their browser default size. Whereas (as a web author) changing the size of text by using %/ems will change the text relative to the font size in the user’s browser settings, meaning that unless you change it by a ridiculous scale factor like 50%, it should still be reasonably legible even for people who have a huge font size.

Zoom is all very well, but it should rarely be necessary for people to use it. In-page text size widgets likewise – except that not only should they be unnecessary but they imbue a sort of learned helplessness, where people are habituated into solving the wrong problems in the wrong way.[/font]

12

I’d say zooming is the standard way.

The people having trouble reading a web page will usually have problems reading a text document or a spreadsheet or a pdf document or an image from a local folder. All these have one thing in common: the zoom solution. And people often use it.

Teaching web authors to respect a random custom setting in the browser is easily superseded by making the web user understand that zooming is standard and it works on web also, very much the same way.

To that concern, I’d say the practice of changing the default text size in browsers being regarded as a better solution, in fact it breaks the usability pattern for the user in a bad way.

Plus, it has in common the usability patterns for touch screens, where zooming is an easy to achieve and intuitive solution. Users will look for ways to emulate that. The reverse would be counter productive.

13

I have Firefox’s default text size set to a size that suits me nicely for most sites. However, after the last style changes, I found the forums tiring to read at the default setting, so I used Firefox’s “zoom text only” to get the size that suits me. That setting is remembered every time I return to Sitepoint, but doesn’t over-ride my generally-preferred default setting. Another reason why I prefer Firefox. :slight_smile: