Home » Computers » How to Let Visitors Change Text Size, Line Spacing, Contrast, and Font; Plus Print

How Visitors Can Change Text Size, Line Spacing, Contrast, and Font; Plus Add a Print Button

You can allow website visitors to change the font size, font, line spacing, and colors with JavaScript functions, as well as add a print button that opens a reformatted, printable version of your page. Adding buttons for text customization and printing can improve readability for users who have vision problems. (Click the buttons above to toggle the page display style.)

Step 1: Download or create icons for changing the size, font, line spacing, and contrast. For the purpose of this tutorial, we assume the images are named changesize.jpg, changeline.jpg, changefont.jpg, changecolors.jpg, and print.jpg.

Step 2: Add the tag <div id="xxx"> right before the section of text that you want visitors to be able to change, and add a </div> at the end of the section.

Step 3: Add the default styling attributes within the <div id="xxx"> tag using inline CSS. For example, you may set the default style as

Step 4: Find the section where you want to place the buttons and add these lines of HTML:

You should change the directory paths to the actual location of your image files, and change "printable-page.html" to the actual url of the printer-friendly version of the page.

Step 5: Now to write the JavaScript functions. First open a pair of <script></script> between the <head> and </head> tags, or create an external JS file.

To create the text size toggling function, write these lines of JavaScript between the <script> and </script> tags:

This simple code lets the user toggle between two text sizes, 16 pixels and 20 pixels. You can add more intermediate sizes or change the values. The beginning and ending attributes (16px in this example) must match the default style set in Step 3.

Step 6: Next, add these lines of Javascript to create the line spacing changer, font changer, and text/background color changer:

function changeline(objDivID){
  if(document.getElementById(objDivID).style.lineHeight=='130%') {
    document.getElementById(objDivID).style.lineHeight=='180%';
  }
      
  else if(document.getElementById(objDivID).style.lineHeight=='180%'){
    document.getElementById(objDivID).style.lineHeight=='130%';
  }
      
  else{
    document.getElementById(objDivID).style.lineHeight=='130%';
  }
}

function changefont(objDivID){
  if(document.getElementById(objDivID).style.fontFamily=='Verdana') {
    document.getElementById(objDivID).style.fontFamily=='Arial';
  }
      
  else if(document.getElementById(objDivID).style.fontFamily=='Arial'){
    document.getElementById(objDivID).style.fontFamily=='Verdana';
  }
      
  else{
    document.getElementById(objDivID).style.fontFamily=='Verdana';
  }
}

function changecolors(objDivID) {
  if(document.getElementById(objDivID).style.color=='black'){
    document.getElementById(objDivID).style.color='white';
    document.getElementById(objDivID).style.backgroundColor='black';
  }
      
  else if(document.getElementById(objDivID).style.color=='white'){
    document.getElementById(objDivID).style.color='black';
    document.getElementById(objDivID).style.backgroundColor = 'white';
  }
      
  else{
    document.getElementById(objDivID).style.color='black';
    document.getElementById(objDivID).style.backgroundColor='white';
  }
}

Again, you can alter the code to make each function rotate among three or more options instead of just two. For the text and background color, the code works better when you specify the colors by name, rather than hexadecimal code. A full list of color names can be found here. Also, make sure the beginning and ending styles in each function match the default style.