Skip to main content

Allow Site Visitors To Change Font Sizes on your Blog

Few months back, we received an email from Mr Franco, a senior 62 year old DI reader who was not very happy with the default font size of this blog. He wrote:
What's the programming difficulty of having a site that has fonts changeable by one click from the Explorer menu bar. Are the New York Times programmers more capable? I doubt that... I hope you consider the need of people to see larger fonts sometimes.
While site visitors can dynamically change the font sizes in their web browser using the ctrl button and the mouse wheel, it is not reasonable to expect that everyone would know this font size shortcut.

Dynamic Font SizesMost web users, especially elderly people, look for an option on the webpage itself that would allow them to increase or decrease the text font sizes on the fly. Hence this short Javascript tutorial will show how to add that "dynamic font size" functionality in your blogs.

Technically, there are several ways to resize fonts on the fly like having separate CSS files or by predefining an array of font sizes or a simple font size javascript. Anjanesh has a hack that allows visitors to change fonts families on a webpage.

Here, we use the White Hat hack since it's simple to implement and does the job with few lines of code.

Step 1: Add the following Javascript in the insde the <HEAD> tag of your HTML.
<script language="JavaScript" type="text/javascript">
function changeFontSize(inc)
{
  var p = document.getElementsByTagName('p');
  for(n=0; n<p.length; n++) {
    if(p[n].style.fontSize) {
       var size = parseInt(p[n].style.fontSize.replace("px", ""));
    } else {
       var size = 12;
    }
    p[n].style.fontSize = size+inc + 'px';
   }
}
</script>
Step 2: Insert the following HTML anywhere in your blog - you can customize the text or replace it with visual graphics (like the alphabet A - one small and the other one slightly large)
<a href="javascript:changeFontSize(1)">Increase Font Size</a> 
<a href="javascript:changeFontSize(-1)">Decrease Font Size</a>
You can extend this to either all the HTML elements on your blog or limit it to only the text sections. The font size is specified in pixels.

Related: Create a Printer Friendly Version of webpage with CSS

Popular posts from this blog

How to Download Contacts from Facebook To Outlook Address Book

Facebook users are not too pleased with the "walled garden" approach of Facebook. The reason is simple - while you can easily import your Outlook address book and GMail contacts into Facebook, the reverse path is closed. There's no "official" way to export your Facebook friends email addresses or contact phone numbers out as a CSV file so that you can sync the contacts data with Outlook, GMail or your BlackBerry. Some third-party Facebook hacks like "Facebook Sync" (for Mac) and "Facebook Downloader" (for Windows) did allow you to download your Facebook friends' names, emails, mobile phone number and profile photo to the desktop but they were quickly removed for violation of Facebook Terms of Use. How to Download Contacts from Facebook There are still some options to take Friends data outside the walls of Facebook wall. Facebook offers the Takeout option allowing you to download all Facebook data locally to the disk (include...
Read more

Firefox Keyboard Shortcuts for Power Users

All features in Mozilla Firefox browser are accessible through the use of the keyboard. You can use shortcut keys to view and save Web pages, search the web, open new webpages, work with bookmarks, or find text on the current webpage. Some of the most common keyboard shortcuts in Mozilla Firefox are Ctrl+N (to open a new Firefox window), Ctrl+T (to open a new tab), Ctrl+F4 (to close the current tab) and Ctrl+S to save the current webpage. Mozilla Firefox supports many more powerful keyboard shortcuts. For instance, by pressing a simple key combination, you can manually delete autocomplete entries from the Firefox location bar or Web forms. I am sharing a list of my favorite Mozilla Firefox Keyboard Shortcuts that make web browsing with Firefox even more fun . And you also save your precious time as navigating through several layers of Firefox Toolbar menus is no longer necessary. 1. Web Search Ctrl+K moves the cursor to the Search Bar. You can then type in the terms you wish to fin...
Read more

Digital Inspiration

Digital Inspiration is a popular tech blog by  Amit Agarwal . Our popular Google Scripts include  Gmail Mail Merge  (send personalized emails with Gmail ),  Document Studio (generate PDFs from Google Forms ) and   File Upload Forms ( receive files  in Google Drive). Also see  Reverse Image Mobile Search , Online Speech Recognition and Website Screenshots , the most useful websites on the Internet.
Read more