Allow users to change font size in a webpage

Question

Hi everyone,

I would like to be able to change the size of text in a web page, I guess jQuery can be used, but I have no experience in javascript.

Another problem is that the webpage is a phtml file, and multiple php echo commands are used. And the page is made up of multiple phtml files.

An example of the page is here: http://nordschleife.metaforix.net/118/118/index.php/casio.html

EDIT: I would like to give users 3 choices for different font sizes.

Answer 1

The approach I would take is to apply a font-size percentage to the body tag of the html

body
{
    font-size: 62.5%;
}

Then for all other elements specify font-size in ems, which generates the size as a scaled up percentage of the inherited font-size

h1
{
    font-size: 1.8em;
}

p
{
    font-size: 1.2em;
}

I use 62.5% on the body because it is easy to translate this to pixel sizes when specifying other font sizes e.g. 1.2em = 12px, 1.8em = 18px and so on

To then change the font size in the page programatically you just need to change the value of the font-size on the body and the rest of the page will scale up or down accordingly

You can test this by having three divs

<div id="sizeUp">bigger text</div>
<div id="normal">normal text</div>
<div id="sizeDown">smaller text</div>

In JQuery I believe you can do

$(document).ready(function() {

    $("#sizeUp").click(function() {

        $("body").css("font-size","70%");

    });

    $("#normal").click(function() {

        $("body").css("font-size","62.5%");

    })

    $("#sizeDown").click(function() {

        $("body").css("font-size","55%");

    })
});

Answer 2

The easiest way to change the text size is with css. If you have access to the css file, you can change the size of all text on the page with this:

* {
    font-size: 110%;
  }

Add it to the top of your styles.css file, it affects all text on the page, and all text that use the styles.css file.

Answer 3

Try this:

<p><a href="#" onclick="document.body.style.fontSize='x-small';">SMALL</a></p>
<p><a href="#" onclick="document.body.style.fontSize='medium';">MEDIUM</a></p>
<p><a href="#" onclick="document.body.style.fontSize='x-large';">BIG</a></p>

Answer 4

Could you not just give control back to the browser so that they could go and change it in the View Menu > Text Size settings for the browser?? (Using Internet Explorer as an example)

Answer 5

Just resize the font by CTRL-+ and CTRL-- (in Firefox, might be different in other browsers)