[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 363
  • Last Modified:

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

0
rickerso
Asked:
rickerso
1 Solution
 
bdispaCommented:
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).
0
 
COBOLdinosaurCommented:
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&
0
 
COBOLdinosaurCommented:
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&
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
kneeaCommented:
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
0
 
rickersoAuthor Commented:
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
0
 
COBOLdinosaurCommented:
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&
0
 
rickersoAuthor Commented:
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
0
 
COBOLdinosaurCommented:
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&
0
 
COBOLdinosaurCommented:
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&
0
 
rickersoAuthor Commented:
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
0
 
COBOLdinosaurCommented:
Yes there are some issues with cross-browser implementation of styles,
but that is true of a lot of things, and they are relatively minor for
fonts.  The real problem would be getting Netscape to re-render without
having to dynamically re-write the document.

There is another alternative.  Leave the page as it is, but when the user
requests larger fonts.  Re-direct to another page that has the large fonts.

<script language="JavaScript">
<!--
   if ((confirm('Do you want to use large fonts'))
      window.location="largefontpage.html";
//-->
</script>

All you would have to do to implement is create a new version of the page
by stipping out the font and basefont tags and set the body style to
large fonts.  Of course, if you wanted to you could also just adjust
the relative font sizes to ratain the overall formatting.  

This would not create any cross-browser issues.

Cd&
0
 
rickersoAuthor Commented:
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
0
 
rickersoAuthor Commented:
Big help if following thru and getting to the issue.  
0
 
COBOLdinosaurCommented:
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&
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now