SteveClason.com

Server-Side Text Resizer

A few years ago a client uniquely dedicated to accessibility needed a feature to re-size text to assist vision-impaired visitors. That sort of gadget is ubiquitous now, and almost all implementations use JavaScript because it's very easy to do it that way. This client wanted the feature to work if JavaScript were not enabled or not installed on the browser, though, and I produced the following solution.

It's not rocket science and I think the JavaScript solutions are better for the user, but I've documented it here in case it's ever useful to anyone.

Here's the page (this will open a new tab.)

Overview

 In the head of the page there's a dynamic stylesheet called last in the sequence of stylesheet, with a GET variable in the URL that has been read from a cookie. If the cookie isn't present, the GET variable is null, causing the dynamic stylesheet to default to "body:font-size=100%", and since this stylesheet is loaded last, the main stylesheet's font-size declaration is overriden.

When the user clicks one of the resize buttons, the browser is redirected to a small php script which parses the attached GET variable (either "smaller" or "larger"), fetches the current size setting from the cookie, and increases the font size by 10% (writing the new value to the cookie) IF the setting is within minimum and maximum values.

The browser is then redirected back to the page, which reads the new setSize value from the cookie and consequently loads a stylesheet with the new font-size.

There are three components to the feature: the page itself, which must be parsed by the php interpreter (that means, in most cases, that it must have a ".php" extension); The style sheet, which also a php file, and the "controller", a php script that is invoked to change the font-size within limits and to write a cookie so that the size selection persists for the user.

The Page

In the head section of the page, a stylesheet is called with a parameter recovered from a cookie. (We'll set the cookie value in a minute, but the default behavior if there is no cookie is "font-size=100%".)

<?php
 $setSize = $_COOKIE['setSize'];
 echo '<link rel="stylesheet" type="text/css" media="screen"' ;
 echo ' title="User Defined Style"'; 
 echo ' href="userStyles.php?setSize=' . $setSize . '"/>';
 ?> 

Then there are the buttons that enable the user to control the font-size settings.

<ul id="nav">
<li><a href="switcher.php?changeSize=bigger" style="font-size: larger;">[A+]</a></li>
<li><a href="switcher.php?changeSize=smaller" style="font-size: smaller;">[A-]</a></li>
</ul>

The Stylesheet

The stylesheet that's called looks like this -- keep in mind that a style sheet doesn't have to have the ".css" extension and can be dynamically generated just like any other web page:

if (isset($_GET['setSize'])) {
 $setSize = $_GET["setSize"]; 
} else {
 // If no get variable, set size to 100%.
 $setSize = 100;
}
header('content-type:text/css');
header("Expires: ".gmdate("D, d M Y H:i:s", (time()+900)) . " GMT"); 
echo 'body{font-size:' . $setSize . '%}';

If the GET variable is not set (we'll get to that next) then the fon't size is set to 100%, thereby creating a default setting -- that is, if there's no cookie value and no GET value, then the size is set to 100%.

 The Controller

<?php
// Get $setSize from the cookie if there is one.
if (isset($_COOKIE['setSize'])) {
 $setSize = $_COOKIE["setSize"]; 
} else {
 // If no cookie, set size to 100%.
 $setSize = 100;
}
// Read the get variable to increase or decrease font-size.
if (isset($_GET['changeSize'])) {
 $changeSize = $_GET['changeSize'];
 switch ($changeSize) {
 case 'smaller':
 // If smaller, subtract 10%.
 // Make lower limit 50%.
 if ($setSize > 50) {
 $setSize = $setSize - (10);
 }
 break;
 case 'bigger':
 // If larger, add 10%.
 // Make upper limit 400%.
 if ($setSize < 400) {
 $setSize = $setSize + (10);
 }
 break;
 default:
 // Do nothing.
 }
}
setcookie ('setSize', $setSize, time()+31536000, '/', 'steveclason.com', '0');
header('Location: ' . $_SERVER['HTTP_REFERER']);
?>