Few months back, we received an email from Mr Franco, a senior 62 year old DI reader who was not very happy with the default font size of this blog. He wrote:What's the programming difficulty of having a site that has fonts changeable by one click from the Explorer menu bar. Are the New York Times programmers more capable? I doubt that... I hope you consider the need of people to see larger fonts sometimes.While site visitors can dynamically change the font sizes in their web browser using the ctrl button and the mouse wheel, it is not reasonable to expect that everyone would know this font size shortcut.
Most web users, especially elderly people, look for an option on the webpage itself that would allow them to increase or decrease the text font sizes on the fly. Hence this short Javascript tutorial will show how to add that "dynamic font size" functionality in your blogs.Technically, there are several ways to resize fonts on the fly like having separate CSS files or by predefining an array of font sizes or a simple font size javascript. Anjanesh has a hack that allows visitors to change fonts families on a webpage.
Here, we use the White Hat hack since it's simple to implement and does the job with few lines of code.
Step 1: Add the following Javascript in the insde the <HEAD> tag of your HTML.
<script language="JavaScript" type="text/javascript">Step 2: Insert the following HTML anywhere in your blog - you can customize the text or replace it with visual graphics (like the alphabet A - one small and the other one slightly large)
function changeFontSize(inc)
{
var p = document.getElementsByTagName('p');
for(n=0; n<p.length; n++) {
if(p[n].style.fontSize) {
var size = parseInt(p[n].style.fontSize.replace("px", ""));
} else {
var size = 12;
}
p[n].style.fontSize = size+inc + 'px';
}
}
</script>
<a href="javascript:changeFontSize(1)">Increase Font Size</a>You can extend this to either all the HTML elements on your blog or limit it to only the text sections. The font size is specified in pixels.
<a href="javascript:changeFontSize(-1)">Decrease Font Size</a>
Related: Create a Printer Friendly Version of webpage with CSS
Reader Comments
"While site visitors can dynamically change the font sizes in their web browser using the ctrl button and the mouse wheel, it is not reasonable to expect that everyone would know this font size shortcut.
Dynamic Font SizesMost web users, especially elderly people, look for an option on the webpage itself that would allow them to increase or decrease the text font sizes on the fly. Hence this short Javascript tutorial will show how to add that "dynamic font size" functionality in your blogs."
I completely disagree.
If people don't know that they can resize the fonts in their browser, surely it is far better for sites like yours to educate people about the functionality they are missing out, rather than create custom-hacks that only help users of this given site?
It's the whole "give a man a fish and he can eat a single meal/give a man a fishing net and he can feed his whole family forever" kind of thing...
When the user goes to the next site, it's unlikely to offer CSS font resizing. And if they do it's not going to be in the same place on the page, look the same or necessarily behave the same.
The browser functionality will always be there, look the same and probably persist across sites - so setting it once is all that it takes.
As an accessibility consultant in a previous life, I would strongly urge you to help educate your users about browser functionality rather than create single point fixes that does nothing to help them when they leave your site.
Written on 22/12/06 3:29 AM
Hmm..wonder why this isn't working out :( Hey, I noticed that you have modified the original javascript (made it smaller), can that be the cause of the problem?
Written on 22/12/06 9:53 AM
Good for no technical readers. I would educate all my readers to hold the Ctrl button and then scroll their mouse wheels up and down.
I have nothing against these buttons, but if someone can't read the text, its obvious that he can't see the tiny button too...
Written on 22/12/06 10:17 AM
"quality is inversely proportional to quantity"
and that's being seen in your blog nowadays!
I totally agree with ben metcalfe.
Written on 22/12/06 12:24 PM
Ben - True that people should be able to know how to resize the fonts in the browser rather than a custom solution. I obviously did not intend on making it as a replacement. I wanted to give an additional option for users. But the main reason for the JS code was to have only the blog posts' font change. I didnt want to have the entire page change as result of the function.
but if someone can't read the text, its obvious that he can't see the tiny button too... - good point, I definitely need to make the buttons bigger. But since Im not into designing and end up spending hours designing something that would normally take seconds for a pro designer, I dont focus very too much on some parts of the UI.
Written on 22/12/06 2:50 PM
hey, there should be an option for default font size.
http://harshalvakil2001.blogspot.com/
Written on 25/12/06 7:59 PM
Ben - Thanks for your insight. There's no substitute to educating users but this could be an alternate solution. Hope you will agree.
Written on 26/12/06 1:32 PM
It is unrealistic and unreasonable to expect web pages to educate users who are not looking to be educated. I think this script can be very helpful. How would you educate users? Display some text that no one would read? Put up an alert that would annoy everyone? Keep up the good work Amit and don't let the negative comments put you on the defensive.
Written on 11/3/07 5:06 AM
This kind of script also has other uses.
I coded a similar script to help a user print an automatically generated room schedule that should fit in a single page (so you could put it inside a plastic casing fixed to the room's door).
So, when you think you got all the usage options for a given code, think again. Besides, In IE the Ctrl+Wheel trick doesn't work well
(ie, it doesn't work in this very page)
Written on 22/5/07 6:50 PM