Give the user control over your fonts with Perl

My site is a funny old thing - it attempts to communicate less by what it says than by how it says it.

A large part of my work is in convincing clients that their site should be both usable, and accessible to people with a range of disabilities. It was therefore essential that I enable users with less than perfect vision to use my site. Unfortunately, the most reliable way to display fonts, which while separating content and presentation as per W3C Accessibility guidelines doesn't always enable users to resize their fonts using IE and Netscape 'Text Size' tools.

Having read Aardvark's excellent article on user font resizing, I felt sure that this was a sensible way to go for cookie and CSS enabled browsers. It's not everyone, to be sure, but it's a significant improvement.

One problem, though. His article is coded for a Windows NT/IIS/ASP solution. My site is Unix/Apache/Perl hosted.

However, as I do know a bit about this environment, translating the ASP solution to my system wasn't too hard. If you're wanting to give users control over their font sizes with Perl/Apache/Unix, here's the code you need.

The Basic Idea

Exactly as with Adrian's original, it comes in three parts:

1. Check to see if the browser will do CSS. If so, set a cookie saying so (so we don't have to check again).
2. Check to see if the user has requested a non-default size. If so, set a cookie registering this preference.
3. Using the cookies, deliver an appropriate stylesheet, chosen from small, medium and large, and query-string encoded links to the alternative sized-versions of the same page.

I have added one bit of cleverness - as Macs will display fonts at a different size than PCs, the default size for PCs is small, and that for Macs is medium.

The Code

Set the cookies

One problem which Perl/Apache SSIs have is that cookies have to be sent with the HTTP headers. However, SSIs aren't interpreted until after these have been sent for the page you're building with SSI. Therefore, throwing the cookies out by putting them in normal SSIs as ASP does:

Response.Cookies("TextSize") = "Normal"

won't work. Which is a shame. However, you can set cookies with any files you send as page elements, like images. And Perl/CGI can send images just as well as it can text.

Solution: Send a dummy 1px image (say your normal transparent pixel) from a CGI with the cookie(s) in its HTTP headers.. Which is exactly what the following script does. It:

1. Checks to see if the browser is CSS-compatible. This is basically IE or NS 4+, and Opera as well - note that if IE6 doesn't report itself as IE5, then you will need to edit this script. NS6 pretends to be NS5, so we're OK on that score. I've also specifically excluded browsers such as iCab and Lynx, which allow users to choose to use UA strings which claim version4/5 compatibility. They also allow users to make up their own, but that's another issue.
2. Checks to see if there is a querystring of the form: textsize=something
3. Sets cookies appropriately for each of the above by delivering an image content-type with cookie headers.

Here's the script:

The way you get this onto your page is by pretending it's a standard image:

<img src="/cgi-bin/font_cookie.cgi?<!--#ECHO VAR="QUERY_STRING"-->" height="1" width="1" alt="" />

(The <!--#ECHO VAR="QUERY_STRING"--> bit just makes sure that any query strings applied to the page get passed to the CGI. This will principally be textsize=something.)

The only downside to getting the cookies out like this is that a cookie won't be available to the rest of your script until after the first page the user hits on your site - users will only be able to choose their font size from the second page they visit.

Choose a size

Obviously, the simple way to give the users choice over which size of fonts they are to receive is to put a bunch of SSI links on the page like this:

But then the user has to know what size they have at present, and develop a mental model for your font calibration. It's also a bit silly to give the choice of the current size, as it won't do anything! A much more elegant solution is to only give relative choices of larger or smaller than the present size. This means that when you're at the smallest size, you only give the choice of 'Larger', and when you're at the largest size, you only give the choice of 'Smaller'.

What this script does is the logic behind that, working out the current size and only delivering appropriate choices which users can instinctively grasp.

Interesting sidenote:
I've made the code more readable by using the Perl q and qq quoting functions. This allows you to use any character in place of single and double quotes in a print statement, thereby allowing you to use real single and double quotes in what you're printing without escaping them. This is particularly handy if you're outputting JavaScript which already plays silly beggers with single and double quotes.

You bring this into your page at the point where you want the options to appear with a standard SSI exec call:

<!--#exec cmd="/full/path/to/your/cgi-bin/css_resize.cgi"-->

Deliver the stylesheet

The last thing we need to do is to deliver the appropriate stylesheet, either the one chosen by the user, or a sensible default where the user either thinks that the basic size is OK, or (on that vital first page before the cookie is set) hasn't yet seen the options.

I've set it up such that Windows machines get the small size as default, and Macs, Unix boxen etc get the normal (middle) size. Naturally, this will depend on how you set up the fonts in your stylesheets. In mine, the normal body text is set as follows:

• Large: 12pt
• Normal: 11pt
• Small: 10pt

with all <hx> and other text styles also being appropriately scaled.

To deliver the appropriate stylesheet, the page will need one of the following:

And here's the code to deliver it:

And once again, you bring this into your page (in the <head> section of course) with an SSI exec call:

&lt!--#exec cmd="/full/path/to/your/cgi-bin/css_swap.cgi"-->