Thread: HTML - how do i create a href that increases/decreases the font size within the page?

I'm currently doing an assignment in college, I want to make the web page accessible to people with visual impairments so I want to provide a link to increase the font size, then a link next to it to change it back.
I'd like specific code if possible

Can't use direct HTML, you need javascript



var min=8;
var max=18;
function increaseFontSize() {
var p = document.getElementsByTagName('p');
for(i=0;i<p.length;i++) {
if(p[i].style.fontSize) {
var s = parseInt(p[i].style.fontSize.replace("px",""));
} else {
var s = 12;
}
if(s!=max) {
s += 1;
}
p[i].style.fontSize = s+"px"
}
}
function decreaseFontSize() {
var p = document.getElementsByTagName('p');
for(i=0;i<p.length;i++) {
if(p[i].style.fontSize) {
var s = parseInt(p[i].style.fontSize.replace("px",""));
} else {
var s = 12;
}
if(s!=min) {
s -= 1;
}
p[i].style.fontSize = s+"px"
}
}


Usage

Include the above code in your page (either by placing it within the head section or placing it in an external js file and importing it). You can then call the increase and decrease font size functions like below.

<a href="javascript:decreaseFontSize();">-</a>
<a href="javascript:increaseFontSize();">+</a>

Use a stylesheet to define how fonts look on your page, then make another stylesheet with bigger fonts. Have one link use the small font stylesheet and the other use a big font stylesheet. You can do this with one PHP page, just have one link be to:
yourpage?big=0
and the other to:
yourpage?big=1

Then in the header have some PHP that says...
if big=0 then use small.css
if big=1 then use big.css
Hope that helps.

Although, making a site that uses proper and CSS-friendly HTML allows the visitor to resize it with ease themselves with their browser or reading software.


Edit:
Many people are recommending that you use JavaScript for this, but the person could have JavaScript disabled (probably unlikely, but still possible). JavaScript isn't really a "clean" method to do something like this either, plus it overcomplicated things and forces the visitors computer to do more work. With the PHP+HTML+CSS you are sending the user a plain old HTML page with a CSS stylesheet.

javascript