Copyright © Had2Know 2010-2023. All Rights Reserved.
Site Design by E. Emerson
How Visitors Can Change Text Size, Line Spacing, Contrast, and Font; Plus Add a Print Button
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.
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.
Again, you can alter to 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.
© Had2Know 2010