Accessibility- text resize button

marra · 31 Jul 2006 at 10:38

Hi, I'm currently re-developing a charity's website and need to integrate a button to increase or decrease the text size on the page. I have looked at various javascript solutions but would prefer to implement it with php. Does anyone know the best way of doing this? There seems to be several ways documented on the internet but I cannot find a simple effective way. I'm guessing a style sheet switcher would be my best option. Does anyone have any links to code I could use?

Cheers for any help

Shoseki · 31 Jul 2006 at 11:11

If you are talking about a button, it could be, for example, a link to the same php that generated the page, with an extra variable giving the next stylesheet to be included by the php.

If you have a CMS that is containing the main content of the page, the layout and stylesheets would be held seperately, and thus simple stylesheet switching may be your best bet, no need to use javascript.

marra · 31 Jul 2006 at 12:27

The site is currently only using XHTML and CSS and is only an information site so it does not currently have any PHP written or a CMS. Do you have any links to some code I could use? What I want basically is a button for small text, one for medium and another for large. I have designed the site in a way that it expands to accommodate the larger text but just need help in writing the code to actually do it. It works great using the Ctrt +/- in firefox.

robmiller · 31 Jul 2006 at 12:47

Create stylesheets called small.css, medium.css and large.css, each containing some CSS that varies the body's text size. Then:

PHP:

<?php

session_start();

if ( !empty($_GET['textSize']) )
    $_SESSION['textSize'] = $_GET['textSize'];

$sizes = array('small', 'medium', 'large');
$size = ( in_array($_SESSION['textSize'], $sizes) ) ? $_SESSION['textSize'] : 'medium';

?>
<html>
<head>

<link rel="stylesheet" type="text/css" href="<?php echo $size ?>.css" />

</head>

<body>

<ol>
    <li><a href="?textSize=small">Small Text</a></li>
    <li><a href="?textSize=medium">Medium Text</a></li>
    <li><a href="?textSize=large">Large Text</a></li>
</ol>

</body>

</html>