I think it's entirely fair to say that I don't didn't like JavaScript. Too many sites seem to be impossible to use without it, and with an ever growing number of users not JavaScript-enabled, creating a site that needs JavaScript to work is shooting yourself in the foot. What's the point of creating a site if before you start you prevent a quarter of your visitors buying your stock or reading your content?
That said, it does have its uses, and this is one of them. This is a simple, short script that will ensure that if you are using relative font sizes on your site, users with their default font size set very low will have their text resized to something more appropriate.
Of course, this won't work for everybody. It isn't an integral part of the site though - users without JavaScript will not even know that they have missed out on anything.
The way this works is relatively simple. The first stage is to grab the font size being used by the user. It's relative to their browser default font size, whatever fonts you have set, and which actual font they are using.
We achieve this by adding a small div to every page. This can be set to be invisible, and on this site I use the invisible div containing the site's "Skip Navigation" link and a link to the Accessibility Statement.
<div class="invisible" id="xdiv" name="xdiv"><a href="#content" accesskey="2">Skip Navigation</a> · <a href="Accessibility/Accessibility_Statement/" title="Accessibility features of this site." accesskey="0">Accessibility statement</a></div>
This div is set to be invisible to graphical browsers, which have little use for it's content.
Next, we set up our JavaScript code. The following function can be included as an external .js file, or within your header file, if you use one.
function MinimumFontSize() {
var XDivElement = document.getElementById('xdiv');
if (XDivElement.offsetHeight < "16") {
tags = new Array ('body', 'div', 'a', 'td', 'th', 'p', 'span', 'h1', 'h2', 'h3');
for (j = 0; j < tags.length; j ++) {
var getbody = document.getElementsByTagName(tags[j]).item(0);
if (getbody) {
getbody.style.fontSize = '10pt';
}
}
}
}
In order to customise the function above, you might like to check your numbers. The '16' at the beginning of the script is for this site, and is the value it is because I decided that that should be the minimum height for that div, with it's padding, and font settings. Your 'xdiv' will be different, and you may want to set a different minimum font as well. Fortunately it's a very simple script to modify. If you want to experiment, you can add a line into the code like so (this will give you a popup with the height of your 'xdiv' when you load the page:
function MinimumFontSize() {
var XDivElement = document.getElementById('xdiv');
alert(XDivElement.offsetHeight);
if (XDivElement.offsetHeight < "16") {
If it sees that the current font size is too small, it will then resize the fonts to 10pt, a small size but an improvement nonetheless, and of course you can change this if you think it too small. You may also need to add elements to the array of tags. The script cycles through the elements I use on this site for text, but you may use entirely different tags around your data, so may need to add to that list.
And finally, we need to add this last bit of code to our
tag, in order to execute the function every time a page is viewed. You can include this any number of other places, but I would recommend having it early in the page, or your users may see the small text before it is resized, rather than the script running invisibly.onload="MinimumFontSize();"
And there you go, a simple way to set a minimum font size for a site, while keeping your site accessible to both those who wish to resize fonts and those without JavaScript.
12 Comments
very good
#1, cameron, United Kingdom, 24 April 2005. Reply to this.
In the Future of the Web, nothing will work without Javascript because WEB2.0 is Javascript / AJAX
#2, Anonymous, Germany, 30 May 2006. Reply to this.
@Anonymous: I seriously doubt that. Web 2.0 is a buzzword, and relates to added functionality - sites need not be unusable as a result. A good AJAX/Web 2.0 site will work without JavaScript support. Whatever happens, the web is going to remain primarily a text-based medium, at least for the forseeable future, and JavaScript support is likely to remain flakey and unpredictable for many years yet.
#3, Dave Child, United Kingdom, 30 May 2006. Reply to this.
wow, what world do you live in? the web is going to remain primarily a text-based medium, at least for the forseeable future????
i have been programming web pages since the very beginning of the web. if you haven't figured out yet that this is a graphical/dynamic interface then this must be because you are one of those that needs an accessible web page.
accessibility is all about making a graphic/dynamic web page "accessible" to those who cannot interact with the web page or view it.
i sure hope that if you are a programmer that you update your skillset and quit flaming those who take the time to make websites accessible to those like you.
this is a great tip -- thanks to the authors for sharing.
#4, Anonymous, United States, 14 August 2006. Reply to this.
"wow, what world do you live in?"
The real one. The web is a huge resource packed with information. With commerce plastered on top.
"i have been programming web pages since the very beginning of the web."
Congratulations. Would you like a medal? I've been building websites since 1993 - does that make my opinion more informed or more valuable than someone who's been at it since 1999? Of course not.
"accessibility is all about making a graphic/dynamic web page "accessible" to those who cannot interact with the web page or view it."
Accessibility is about creating websites that can be viewed by different programs and tools. It's not just about visual or aural impairment - it's about phones, text-based devices, screen readers and so on as well as browsers. It's about interoperability and non-exclusivity, about not being tied to any one technology.
It's a global communications network. Images play a part in that. Dynamic web pages and elements are also playing a part. The problem comes when short-sighted incompetent webmasters decide to make their site pretty at the expense of making it available to everyone.
"i sure hope that if you are a programmer that you update your skillset"
Always. You'd have to be pretty dumb not to do that.
#5, Dave Child, United Kingdom, 15 August 2006. Reply to this.
what a heated exchange that was.
Web 2.0 is a buzz word and an evolution. I guess you could call it the start of an epoc... your very welcome to have your own view on that. Dave was trying to get across a valid point (god help me if he disagrees). There is a responsibility to not slide back into sloppy crap sites, i work with assistive technologies and i have worked on how ayscronously updated pages confuse assistive technologies. client side scripting is just the side show.
#6, Anonymous, United Kingdom, 29 September 2006. Reply to this.
firstly - there isn't a growing number of people with javascript disabled - its a shrinking number <a href="http://www.w3schools.com/browsers/browsers_stats.asp">source</a>
But more importantly, great little script - I wouldn't have thought of doing it...
#7, Paul, Australia, 15 May 2007. Reply to this.
only a non coding designer would argue that you shouldn't use a client side script like javascript. LOL. How can a site be dynamic without it? bonehead
#8, better_coder_than_you, Canada, 17 July 2007. Reply to this.
"better_coder_than_you": Well done. Assuming you are replying to my comments above, you've missed the point by miles. Can't say I'm surprised - seems that it's usually the the type of person who hides behind anonymity while trolling who lacks the brainpower to understand the words they are reading.
Nobody said (or "argued"), either in the article or in the comment thread, that you shouldn't use client side scripting. Nobody appears to even be of that opinion. I apologise for pointing this out as I realise it's a bit of a problem for your "argument".
What I was trying to express, apparently not clearly enough, was that support for JavaScript need not, and should not, be obligatory to view and use a site. Smart, forward thinking designers and developers are using JavaScript to improve the user experience. What they aren't doing is incompetently putting together sites that prevent people without JavaScript support from using them.
Look up "progressive enhancement" sometime. Well done AJAX is progressive enhancement - removing the need to completely refresh a page to perform an action, while at the same time making normal form operations available for people without JavaScript or XMLHTTPRequest support.
You may well be a better coder than me. Well done if you are. Apparently, though, you could do with improving your basic English skills.
#9, Dave Child, United Kingdom, 17 July 2007. Reply to this.
I am curious, do you still have the same thoughts and reservations about the web? Do you feel it has, and will remain a primarily text-based medium? Where do you stand on JavaScript support now and is use in an "accessible" site?
#10, Anonymous, United States, 14 February 2008. Reply to this.
I believe that the web will become a series of 1's and 0's and will flow down the screen at different rates of speed, and it serve to control our psychological environment while we lay dormant in plasma eggs controlled by machines. But that's just me.
#11, Neo, United States, 13 March 2008. Reply to this.
Hi Dave,
I noticed you have used onload attribute on the body tag. Maybe you would be interested in this: http://www.geekdaily.net/2007/07/27/javascript-windowonload-is-bad-mkay/
Summary: onload is bad, it wait until EVERYTHING is downloaded (Images, CSS, JavaScript, etc) before it will call onload method. All you need to wait for is DOM to finish loading, that article will show you how to do that.
#12, Matt, Unknown, 12 January 2009. Reply to this.