asked on

Enlarge font by JS or by CSS or by both?

Hello,

I'd like visitors of my site to be able to enlarge all fonts on that particular page by a notch or more. These people are getting a little older, I'd like for them to be able to read the site, without putting off younger viewers by making all fonts huge by default.

Is there a way to allow the oldies to click a "zoom text" button, such that all fonts on the page go from 11px to 12px or greater and all 12 px font to go to 13 px or greater etc etc?

Looking forward to an elegant solution.

Thanks,

NBB

Bustarooms

super simple solution:

<html>
<head>
<style>
body{
font-size:12px
}
</style>
</head>
<body>
<a href="#" onclick="body.style.fontSize='13px';return false;">Zoom Text</a>
Text on the page.<br>
Text on the page.<br>
Text on the page.<br>
Text on the page.<br>
</body>
</html>

Bustarooms

this is a much nicer solution. ESPN.com uses a drop-down for their site

<html>
<head>
<style>
body{
font-family:Arial;
font-size:12px
}
</style>
</head>
<body>
<form>
Choose your font size:
<select onchange="body.style.fontSize=this.options[this.selectedIndex].text">
<option>10 px</option>
<option selected>12 px</option>
<option>14 px</option>
<option>16 px</option>
</select>
</form>
Text on the page.<br>
Text on the page.<br>
Text on the page.<br>
Text on the page.<br>
</body>
</html>

normbry

ASKER

Busta,

Yes, that is working. However, this causes a problem in that most text in most pags are displayed in table cells, DIVs, H1, inline CSS and what-have-you. As such, these headers, footers etc. do not respond to this command, simply because they are out of the loop.

Ideally, what's required is a script that will override all inline coding, and with every press of the "zoom" button all textual elements on that page should be bumped up by one notch, ad infinitum.

I guess that way it's no so simple, wot?

;-)

Cheers,

NBB

Bustarooms

yes, my post was definately a simplified version

The best way to make this work, is to design your site using CSS for all text that you will display on the page. give all your div's, h1's, etc. classes so that you can easily change the fontsize of the classes as you need using javascript such as above

i gave you an example of how to do it, but if you want you can post your code so i can work on your particular problem

normbry

ASKER

Yeah, I'd love for you to give us a hand on this. Right now all these inline CSS codes are governed by an external .CSS sheet that is required, as certain pages are supported by (external) database functions.

dorward

I'm yet to see a solution better then leaving the font size alone and letting the user use the built in browser controls to change it if they don't like it.

normbry

ASKER

Won't work when font size is governed by styles Dorward.

normbry

ASKER

Styles are too valuable to not use. In more ways than I care to list.

dorward

Built in methods to set the font size will only fail to work if:

1. The user is using Internet Explorer
AND
2. The author has specified the units (of font size) using points (entirely unsuited to screen media) or pixels.

There isn't a lot an author can do about #1 (which is a shame), but avoiding inapropriate units is not difficult.

http://css-discuss.incutio.com/?page=FontSize

searlas

Dorwards suggestion is spot on. The only time it doesn't work is when you specify fonts in pixels. If you specify your fonts in em's then they respond to the users preferences.

I'll dig out some resources...

searlas

A List Apart - very appropriate for this question
http://www.alistapart.com/articles/relafont/

Mezzoblue: pros 'n' cons... the site itself features a font style switcher
http://www.mezzoblue.com/archives/2003/11/26/font_size_no/index.php

normbry

ASKER

Interesting reads. Thanks.

Leaving it to the visitors is not really an option guys, as these tend to be older, as in past 50 or even 60 years of age. They know very little about IE's options.

I suppose there's no quick and dirty way to do this then.

NBB

dorward

I'm of the opinion that those users who know how to set their preferences, will set them to what they want, and those users who don't will use the (hopefully at least) carefully selected font sizes set by browser authors after lots of usability testing.

Educating the user about their browser is likely to be more effective then any in-page technique as it means they don't have to learn a different UI for each site, and can apply the knowledge to other sites.

dmenard

What about this IE 5.5+ specific solution using the MS zoom CSS attribute :

<script>
function Zoom(ZoomIncrement)
{
var Zoom=document.body.style.zoom;
if (Zoom=="") Zoom="100%";
document.body.style.zoom=parseFloat(Zoom)+ZoomIncrement+"%";
}
</script>
<p><a href="javascript:Zoom(30);">+++</a> <a href="javascript:Zoom(-30);">---</a></p>

(more info at http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/zoom.asp)

apprenti

I devised an experimental method which seems okay for Mozilla and MSIE which can be seen at
http://mysite.freeserve.com/tercero/varistyle.htm

It's interesting to see how many "designers" are hell bent on stopping people enlarging their text in MSIE, eg
http://www.visitheartofengland.com

normbry

ASKER

Apprenti, thanks that's looking quite good. I'll see if I can build on it, implement it into the pages.

Cheers, I'll let you know.

NBB

lil_puffball

ASKER CERTIFIED SOLUTION

lil_puffball

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Phrogz

Specify all font sizes in CSS only in %. Then use JS to simple set the font size on your body tag...all other fonts will scale from this size.

document.body.style.fontSize='120%';

normbry

ASKER

Puff, your post is too elegant for words. Not to sound demeaning to the other suggesions, but this one is perfect. Least hassle, most flexible. Thanks much! Full marks to you.

One question, I have adjusted the script such that the function jump to the body text. However, withing the exisiting frameset, there is a page that comprises an inline frame names RSIFrame1 and elsewehere on another page lives inline frame RSIFrame2.

Yet, I keep getting "main Frame undefined" error on line 32 character 1 (See asterixes)

The script is as follows:

<script>
function zoomText(size){
var obj=top.mainFrame.document.getElementsByTagName("*");
for(var i=0;i<obj.length;i++){
obj[i].style.fontSize=size;
}
if (top.mainFrame.RSIFrame2) { // assuming RSIFrame2 is in the page in
mainFrame
obj=top.RSIFrame2.document.getElementsByTagName("*");
for(var i=0;i<obj.length;i++){
obj[i].style.fontSize=size;
}
}
if (top.mainFrame.RSIFrame1) { // assuming RSIFrame1 is in the page in
mainFrame**************this line is where the error arises*********
obj=top.RSIFrame1.document.getElementsByTagName("*");
for(var i=0;i<obj.length;i++){
obj[i].style.fontSize=size;
}
}
}
</script>

The inline framecode is as follows:

<iframe NAME="RSIFrame1" id='RSIFrame1' width='100%' height='1000' name='RSIFrame1' style='background-color:red' src='http:\\www.optosite.nl\article.php?uid=14' frameborder=0px>
</iframe>

The frameset code is as follows:

<FRAMESET border="0" ROWS="*,15">
<FRAMESET BORDER="0" ROWS="70,*">
<FRAME NORESIZE NAME="boven" SRC="boven.html" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING="no" FRAMEBORDER="0">
<FRAMESET COLS="175,*">
<FRAME NORESIZE NAME="menu" SRC="menu.html" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING="no" FRAMEBORDER="0">
<FRAME NORESIZE NAME="mainFrame" SRC="body.html" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING="auto" FRAMEBORDER="0">
</FRAMESET>
</FRAMESET>
<FRAME NORESIZE NAME="onder" SRC="onder.html" MARGINWIDTH="10" MARGINHEIGHT="10" SCROLLING="no" FRAMEBORDER="0">
</FRAMESET>

Any clues?

NBB

normbry

ASKER

Never mind, problem solved by Michel Plungjan.

NBB

lil_puffball

Glad to help. :) Thanks for the points and the A!

normbry

ASKER

Sure. You gave the cleanest solution, just what the doctor ordered. Cheers.

NBB