Dynamically Resize Text

CSS, combined with little JavaScript, offers great flexibility to web designers. For instance, let say you want to allow visitors to change text size on your website. Now how do you do it? Using CSS is the easiest solution.
All you need is few style sheets and a JS script to dynamically enable those style sheets. Sounds daunting? Believe me it is very simple and easy to implement. Let me walk you through the process.

In this tutorial we’ll create a simple web page with options to select one of the three text sizes.
Let’s start with creating a simple HTML page.

<HTML>
<BODY>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Sed a risus eu dolor viverra volutpat.In a tellus ut augue dignissim nonummy.
</BODY>
</HTML>

Assuming that we have three CSS files named style.css, sStyle.css and lStyle.css.
In mStyle.css and lStyle.css you only need one line if all you want is to change the text size.
So sStyle.css may have .body {font-size:small;}
and lStyle.css may have .body{font-size:large;}
By default the font-size value is medium. To reference these style sheets from our HTML,

we add them to the “head” section of our HTML. So our code will become:

<HTML>
<HEAD>
<link rel=”stylesheet” type=”text/css” href=”mystyles.css” media=”screen” />
<link rel=”alternate stylesheet” type=”text/css”
href=”mystyle_xl.css” media=”screen” title=”medium” />
<link rel=”alternate stylesheet” type=”text/css” href=”mystyle_xxl.css” media=”screen” title=”large”/>
</HEAD>
<BODY>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed a risus eu dolor viverra volutpat.In a tellus ut augue dignissim nonummy.
</BODY>
</HTML>

To associate the style sheets to our web page we added the link elements in the header section. Style sheets can be added to a web page in one of the following three ways.

  1. Persistent: This is the default style sheet and is always ‘on’. You just need to set rel attribute to ‘stylesheet’ to make a style sheet persistent for your web page. You can use this style sheet for common rules shared by all style sheets.
  2. Preferred: This type of style sheet is enabled by default and can be ‘turned-off’ if the user selects an
    alternate style sheet. To make a style sheet preferred you need to include a title attribute in the link element.
  3. Alternate: This type of style sheet can be selected by the user as alternative to the default or preferred style sheet. This is the type that we will use in this example. To declare a style sheet as alternative set the rel attribute to ‘alternate stylesheet’ and give a title to the style sheet. (See lines 2 and 3 in the header section above.)

When our web page loads the rules in the persistent style sheet will be applied to the page. Now let us add links to our page to allow user to change text size.

<HTML>
<HEAD>
<link rel=”stylesheet” type=”text/css” href=”mystyles.css” media=”screen” />
<link rel=”alternate stylesheet” type=”text/css” href=”mystyle_xl.css” media=”screen” title=”medium” />
<link rel=”alternate stylesheet” type=”text/css” href=”mystyle_xxl.css” media=”screen” title=”large”/>
</HEAD>
<BODY>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed a risus eu dolor viverra volutpat.In a tellus ut augue dignissim nonummy.
<a href=”#” onClick=”enableSelectedStyle(‘default’); return false;”>Small</a>
<a href=”#” onClick=”enableSelectedStyle(‘medium’); return false;”>Medium</a>
<a href=”#” onClick=”enableSelectedStyle(‘large’); return false;”>Large</a>
</BODY>
</HTML>

We added three links to our page and each link invokes a Javascript method to swap the style sheet. Here is the JavaScript code.

function enableSelectedStyle(title){
var i, linkSheets, ss, title;
linkSheets = document.getElementsByTagName(“link”);
for(i=0; i<linkSheets.length;i++){
ss = linkSheets[i];
var b = ss.getAttribute(“title”);
if(b == null) continue;
if(b == title) ss.disabled = false;
else ss.disabled = true;
}
}

Script Explained:

The script retrieves all “link” elements of the document and then loop through them. If the element has a title attribute and its value is same as the input value, it activates that style. If the title value is different from the input value it disables that style sheet. Since the default style sheet link does not have ‘title’ attribute the script will not change it.

Here is the final code

<HTML><HEAD>
<script language=”JavaScript”>
function enableSelectedStyle(title){
var i, linkSheets, ss, title;
linkSheets = document.getElementsByTagName(“link”);
for(i=0; i<linkSheets.length;i++){
ss = linkSheets[i];
var b = ss.getAttribute(“title”);
if(b == null) continue;
if(b == title) ss.disabled = false;
else ss.disabled = true;
}
}
</script>
<link rel=”stylesheet” type=”text/css” href=”mystyles.css” media=”screen” />
<link rel=”alternate stylesheet” type=”text/css” href=”mystyle_xl.css” media=”screen” title=”medium” />
<link rel=”alternate stylesheet” type=”text/css” href=”mystyle_xxl.css” media=”screen” title=”large”/>
</HEAD>
<BODY>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed a risus eu dolor viverra volutpat.In a tellus ut augue dignissim nonummy.
<a href=”#” onClick=”enableSelectedStyle(‘default’); return false;”>Small</a>
<a href=”#” onClick=”enableSelectedStyle(‘medium’); return false;”>Medium</a>
<a href=”#” onClick=”enableSelectedStyle(‘large’); return false;”>Large</a>
</BODY>
</HTML>