Link to home
Start Free TrialLog in
Avatar of rickerso
rickerso

asked on

Changing font size on the fly

I have quite a few html documents that I want to make available to a large number of students with disabilities to read off line. Some of these students are vision impaired and could benefit from large fonts ? 18, 24 or 36 points. I did find some code that would enable the students to be able to change the background color by choosing a color from a form on each document I provided. I would like to be able to do the same with the font size. I understand this would be difficult because there is typically more than one font size in a document. I would be satisfied if only the default font size could be changed.
If this is possible would it be possible to change the font color on the fly as well?
Thanks
Joe

These answers did not really solve the problem.  I have a script that changes the background color that
is really better and easier than the examples on javascript.internet.com.  I am trying to change the
font size in the document, after it is displayed.  What I read says it cannot be done.

The script from COBOLdinosaur changed the font color and size in the javascript box for the background
color but did not change the script size for the document.

I know we could instruct people to change the browser defaults, but I am trying to see if there is any
solution like changing background color on a html file after it is displayed.

Thanks,
Joe

Avatar of bdispa
bdispa

Shure! No problem! But HTML ain't the answer, JavaScript is!

I'm not going to write lots of code, but I'm going to give you some examples of what you're looking for.

Good luck!


COLOR CHANGER
- http://javascript.internet.com/bgeffects/color-adjuster.html
- http://javascript.internet.com/bgeffects/color-chooser.html
- http://javascript.internet.com/bgeffects/type-a-color.html

SIZE CHANGER
Make a stylesheet with the fontsize in a class, which you use for all the texts. then make a button and attach this action: document.all.<classname>.style.fontsize=12 (or 24 or 36).
Take a look at this and see what it does to the default font.  It works in
IE5.  I don't know about the other browsers.

The function can be modified to add changes to any named element as well
It requires very small change to the pages as you can see:


<html>
<head>
<script language="JavaScript">
<!--
  function setFont()
  {    
      if (confirm('would you prefer large fonts'))
      {
         document.body.style.fontSize="32pt";
      }
  }
//-->
</script>
</head>
<body onLoad="setFont()">
just plain text
</body>
</html>

Let me know how I can help you use it.

Cd&
Oops,

I just noticed you want to change the color as well.

I incorporated the color change in the same step, but it can be a separate confirm.  Giving them a choice of several is also an option but will require some additional coding:

<html>
<head>
<script language="JavaScript">
<!--
  function setFont()
  {    
      if (confirm('would you prefer large fonts'))
      {
         document.body.style.fontSize="32pt";
         document.body.style.color="red";
      }
  }
//-->
</script>
</head>
<body onLoad="setFont()">
just plain text
</body>
</html>



Cd&
On internet explorer, view, textsize, largest can help.

...but it doesn't always work on sites which use style sheets.  (like this one)

You can also enlarge the display by setting the screen resolution to 640 x 480.  (Right click on the desktop background and select properties.  Then click on the settings tab.

You could also click on the advanced button and change the fontsize.  Choosing other will allow you to make fonts anysize you want and will work for the whole of the computer display - not just the internet.

You might need to restart the computer
Avatar of rickerso

ASKER

These answers did not really solve the problem.  I have a script that changes the background color that is really better and easier than the examples on javascript.internet.com.  I am trying to change the font size in the document, after it is displayed.  What I read says it cannot be done.

The script from COBOLdinosaur changed the font color and size in the javascript box for the background color but did not change the script size for the document.

I know we could instruct people to change the browser defaults, but I am trying to see if there is any solution like changing background color on a html file after it is displayed.

Thanks,
Joe
What JavaScript box.  If the script is not changing it for the document then it is being constrainted by something else on the page.  Can you post the code or a link to the page?

Cd&
This is a link to a small example of what we are trying to do with your code added.  I do not know javascript to know if the code can be modified or added somewhere else to make the entire document font change.

http://www.accessiblebookcollection.org/test/Abraham Lincoln by Lucy Jane Bledsoe.htm
Thanks
Joe
Well I have the problem figured out, but it is not good news.

You are using font tags and as soon as the browser hits the first font
tag the font style is dropped and it reverts to the default.

When I remove the font and basefont tags the whole page goes to the large
colored text the way we want it too.

The only way to get this to work is to remoe the font tags from the pages.

Cd&
We can probably declare some general styles for the document as a whole
with a style entry for the body, but local font tags will disable the
styling.  That is part of the reason the the font tag has been depreciated
in the HTML standard and will probably be classified obsolete in a future
standard.

Cd&
Let me understand.  I would need to create sytle sheet for the document and use it instead of font tags?  I want normal default documents to have text that is various sizes and fonts.  However, if someone needs larger print, it does not matter that it would all end up one font size.  Have not worked with style sheets before.  Am trying to make this work with any browser.  Aren't there some restrictions to syle sheets and browsers?

Thanks,
Joe
ASKER CERTIFIED SOLUTION
Avatar of COBOLdinosaur
COBOLdinosaur
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thanks for your help.  This is similar to what we were going to do before checking one more time.  However, you script is a nice addition to help simplify that process.
Thanks,
joe
Big help if following thru and getting to the issue.  
I'm really pleased that I could help out little with your efforts.  
Accessibility has not been given much attention on the WEB and there
are not enough tools to help.  

We are probably still 1 or 2 years away from having the ability to
automatically make adjustments to the presentation using XML tagging
and styling, but at least some webmasters are starting to look at the
issue, and we should see more sites offering alternatives to the viewing
format.

Thanks for the A. :^)

Cd&