Solved

Changing font size on the fly

Posted on 2001-06-03
14
349 Views
Last Modified: 2013-12-02
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
Comment
Question by:rickerso
14 Comments
 
LVL 2

Expert Comment

by:bdispa
ID: 6150767
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6150853
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6150860
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
 
LVL 2

Expert Comment

by:kneea
ID: 6151046
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
 

Author Comment

by:rickerso
ID: 6154145
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6154179
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
 

Author Comment

by:rickerso
ID: 6156006
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
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6156380
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6156407
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
 

Author Comment

by:rickerso
ID: 6156884
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
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 200 total points
ID: 6157005
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
 

Author Comment

by:rickerso
ID: 6159260
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
 

Author Comment

by:rickerso
ID: 6159263
Big help if following thru and getting to the issue.  
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6159553
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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
fix wrap around navigation on tablet device 3 31
2 CSS questions 11 36
Syntax Error 6 32
jQuery value within div undefined 3 22
Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now