Use the links below to share Dynamically Resizing Text with CSS and Javascript on your favorite social networks.
Back to the Article >>
Dynamically Resizing Text with CSS and Javascript
August 13th, 2008 in Design Tips & Tutorials
by: Matthew Griffin
As the number of screen size and screen resolution possibilities increase, gracefully resizing text becomes more and more important to the usability of websites. I recently worked on a project in which my client wanted to incorporated resizable text into a redesign of an outdated site. In fact, resizable text was the primary directive I received when I was commissioned to work on the project. Their previous website was built in Flash and they had been receiving complaints for several years about how small and unreadable the text was. Meeting their requirements was an exciting new challenge. With a little Javascript and an EM-based layout I was able to meet and exceed their expectations. This article explains how to set up a page for dynamic text resizing and implement a Javascript-powered dynamic text resizing program.
Starting with the Right Framework: The EM-based layout
Using the EM unit as the measurement for your layout instead of pixels, makes for a scalable but sometimes unpredictable website. I recently wrote a tutorial on this subject so I'll just give a brief overview here. The EM is a measurement based on the size the of the current font. Using the EM as your base measurement for columns and list items in your layout allows the entire design to expand or contract as the text size increases or decreases. When you use the EM as your layout measurement, visitors with various font size settings on their browser will all see the same website in the exact same configurations—just smaller or larger.
Using Javascript to Change the Size of Your Text
With Javascript a couple line of code will have your resizing text in no time. To start, create three links on a page. These links will resize the text. Set the href attribute and the onclick to the correct Javascript code like the example below:
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='2em'">Medium Text</a>
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='3em'">Large Text</a>
When you click any of the links above, the text in your page will increase or decrease accordingly. The void function call in the href attribute keeps the page from reloading. If you were to leave the href attribute blank (href=""), the page would reload every one of the text resizing links was clicked.
Maintaining the Text Size from Page to Page
Okay, you can find similar examples to the one above all over the internet. The problem is, when you navigate away from the page where the text was changed, the text size goes back to default. This is where cookies come in handy. In case you don't know, cookies are little piece of information you can leave on a visitor's computer so you can recognize them or their preferences next time they come to your site. Here's an example of how to use Javascript to create a cookie that will hold the visitor's text size preference. In this example the cookie will remain valid for thirty days after the visitor leaves the site. If they return within that thirty days, the text size will be the same the last time they visited.
This snippet of Javascript has all the cookie-setting functions you will need to perform the task. Copy this and paste it into the head of your page. Make sure you put it after any stylesheet link so it can override the default text size if necessary:
<!--
// JavaScript Document
function set_cookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function get_cookie(name) {
var name_eq = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(name_eq) == 0) return c.substring(name_eq.length,c.length);
}
return null;
}
if(get_cookie("page_size") != null){
document.write('<style>');
document.write('body{');
document.write('font-size:'+ get_cookie("page_size") + 'em');
document.write('}');
document.write('</style>')
}else{
document.write('<style>');
document.write('body{');
document.write('font-size: 1em');
document.write('}');
document.write('</style>')
}
-->
</script>
Next, copy and paste these links into the body of the page:
<a href="#" onclick="javascript:body.style.fontSize='2em'; set_cookie('page_size', '2', 30);">Medium Text</a>
<a href="#" onclick="javascript:body.style.fontSize='3em'; set_cookie('page_size', '3', 30);">Large Text</a>
If you want to see the code in action, check the .
- 100 Comments
- 46386 Views