Changing text size with css and javascript?

**neilcreek** · Dec 30, 2001, 20:59

Hi folks.

We're all well aware of the nasty font size problems on different browsers, and we all know that we must make our sites as accessible as possible. But these two problems seem mutually exclusive.

To make text look the same on all platforms, you must define them in pixels, but then the user can't override this size in MSIE (NS and opera have no problem scaling absolute font sizes).

I have an idea for a solution, but I am no programmer and would not know how to go about achieving it. I am hoping someone here can help me...

What would be ideal would be the ability for users to adjust the text size of a page live by clicking on inline buttons (pehaps a small + and -). This would then instantly update the css and redraw the page. I want to define the base font size in the style sheet something like this:

body, td {font-size: 12px;}

...and then define all other font sizes (eg headings) with percentage values relative to that base.

If the user clicked on the + button once, it would change the style sheet to be a base font of 16px for example. If they clicked again, it would be 24px. The other fonts would all scale relative to the base.

It would also be necessary for the size to be remembered across all pages so the user doesn't have to keep changing the default. Perhaps with a cookie?

I've looked everywhere online for something like this, and the closest I've found is this: http://www.dansteinman.com/dynduo/ex...tscaling1.html but it only works on inline objects, not on the <body>

I would be very greatful to anyone that can help me!

Thanks!

**humanz** · Dec 30, 2001, 21:27

http://glish.com/css/blogger/blogger.html

This is a great resource for CSS ..
within this template on the right of the page is
a + & _ for font size.

it may not be at all what you are thinking of or looking for..but

hth

humanz

**neilcreek** · Dec 30, 2001, 21:44

That's outstanding! It does exactly what I want, and more! However... The site I'm working on has to be compatible with v4+ browsers. The text formatting only works in msie5+ and NS6+.

Does anyone know of a similar system (font family changing not needed) which will work on v4+ browsers?

**Maelstrom** · Dec 31, 2001, 01:51

Originally posted by neilcreek
That's outstanding! It does exactly what I want, and more! However... The site I'm working on has to be compatible with v4+ browsers. The text formatting only works in msie5+ and NS6+.

Does anyone know of a similar system (font family changing not needed) which will work on v4+ browsers?

You may have some problems then. I don't know which or how but older browsers don't have full support for css number 1 and number2 don't have full support of javascripts support for css. To put it simply those browser may not understand what javascript is trying to tell them.

But since I don't code for those browser I can honestly say that this is more or less an educated guess

[edit]
Sorry thought of one thing you could do. Detect the actual browser and have different style sheets for each browser. So

Code:

<SCRIPT LANGUAGE="JavaScript">
<!--
if ((navigator.appVersion.indexOf("Mac") != -1)) {
document.write("<LINK REL=stylesheet HREF=\"stylemac.css\" TYPE=\"text/css\">"); }
else {
document.write("<LINK REL=stylesheet HREF=\"stylewin.css\" TYPE=\"text/css\">"); }
// -->
</SCRIPT>

should work well if you put in the correct code for each type of browser. For more info on browser detection try

http://www.webreference.com/js/column6/index.html

That article will explain severl different techniques. Best of luck

**neilcreek** · Dec 31, 2001, 02:55

I believe that it's possible to set style with javascript. This page has an example of what I've come across during my research: http://www.webreference.com/dhtml/co...menuFrJSS.html This supposedly works in NS4. I have no idea about other platforms. Not being a programmer, I have no idea what to do with this anyway... Also there's the issue with setting the user's preference to all pages.

I'd rather not call different style sheets for a number of reasons. Extra style sheets means more to download (our target audience regularly is limited to 28k or 33k), more complicated css management (this technique will be applied to hundreds of sites and could get messy with multiple css), and the fact that browser detection still leaves many holes as pointed out in the ALA article "Fear of style sheets": http://www.alistapart.com/stories/fear4/3.html (for relevent comment, scroll to "The scripting solution: foiled again").

Maybe I'm asking too much, but I'm sure this must be doable.

Thanks for your help thus far!

**Maelstrom** · Dec 31, 2001, 20:04

Originally posted by neilcreek
I believe that it's possible to set style with javascript. This page has an example of what I've come across during my research: http://www.webreference.com/dhtml/co...menuFrJSS.html This supposedly works in NS4. I have no idea about other platforms. Not being a programmer, I have no idea what to do with this anyway... Also there's the issue with setting the user's preference to all pages.

[/i]

Ok I will say this nn4.7 has support for css (I thought I did say that) buts its support is weak and I am not sure if it will work with the particular command you want but here it is.

Code:

document.tags.p.fontSize="20pts";

That will change all tags <p> to that fontsize. If you want to give them a class or an id you can do it this way

Code:

document.class.fontclass.all.fontSize="20pts";

which would work on something like this

Code:

<p class="fontClass">blah</p>

Thats a simple explanation for how nn4.7 uses css with javascript.

With IE (after 5.5 for sure) & nn6.0 use

document.getElementById('idname').style.fontSize="20pts";

so a typical tag would look like this

<p class="bob" id="bob">blah</p>

You would access its attributes through any of the above.

NOW!. The problem is you still have to use browser detection to make all of this work. So you are still going to have to hope the detection works because you are right in saying browser detection is weak.

So to sum up

Code:

function adjustFont(){
    if (document.layers){   //Netscape 4
        document.tags.p.fontSize="20pts";
    }else if (document.all && document.getElementById){
         //IE5.5+
        document.getElementById("idname").style.fontSize="20pts";
    }else if (document.getElementById){ 
         //Netscape 6.0
        document.getElementById("idname").style.fontSize="20pts";
    }else{
        //other browser support
    }
}

Detecting the dom is more accurate than detecting the browser itself so you should have a lot of problem with that code.

For references try
http://members.aol.com/grassblad/
www.webreference.com

Both of these give excellent dhtml tutorials

The SitePoint Forums have moved.

User Tag List

Thread: Changing text size with css and javascript?

Thread Tools

Display

Changing text size with css and javascript?

does this help?

Bookmarks

Bookmarks

Posting Permissions