Solved

Changing font size on the fly

Posted on 2001-06-03
14
353 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
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!

 
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
 
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
CSS Style on Chrome 1 57
w3c parsing errors 4 36
title attribute 5 33
emailing registered email addresses in phpmyadmin 5 66
Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this. Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it i…
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

734 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