Question

I have a few users who complain that the font size on my web application is too small to read. They aren’t happy with trying to resize the font setting on the browser because when they make the font larger the dimensions and layout of the application change. Are there any existing tools that give me a good way to let the end user pick a small/medium/large font size and have that change the .css of the site to a larger font size without affecting the layout of the page?

Answer 1

Here’s code I use on some of my sites. Apply your HTML accordingly:

HTML:

<span>Font Size: </span>
<a href="#" onclick="decreaseFontSize();">
    <img src="/images/minus.png" alt="Decrease Font Size" />
</a>

<a href="#" onclick="increaseFontSize();">
    <img src="/images/plus.png" alt="Increase Font Size" />
</a>

Javascript:

var min=8;
var max=18;
function increaseFontSize() {
 p = document.getElementById("[the id of container w/font you want to size]");
 if(p.style.fontSize) {
 var s = parseInt(p.style.fontSize.replace("px",""));
 } else {
  var s = 12;
 }
 if(s!=max) {
  s += 1;
 }
 p.style.fontSize = s+"px"
}
function decreaseFontSize() {
 p = document.getElementById("[the id of container w/font you want to size]");
      if(p.style.fontSize) {
         var s = parseInt(p.style.fontSize.replace("px",""));
      } else {
         var s = 12;
      }
      if(s!=min) {
         s -= 1;
      }
      p.style.fontSize = s+"px" 
}