Yesterday � while working on the latest design of this site � I was pondering why I couldn�t have a set of alternate font sizes next to the alternate style sheets I am offering. Today, I played around with some styling, markup, and pre-processing to realize exactly that.
There�s a few guidelines I had in mind to which I wanted to result to comply. When thinking out these paremeters, the code logically followed [in my mind]:
User agents (in the sense of web browsers) that support it should be able to provide a mechanism to select the font size similar to the mechanism that is used to select alternate style sheets. Thus, we need something like (emphasize added):
<link rel="Alternate Fontsize" title="Large" />
End users should be able to further specify the value of the [alternate] font size via the uri. Ideally, the uri would look something like this:
http://acjs.net/?font-size=large
From a semantics point of view, the mechanism should be part of the markup, but not of the html body. Since I decided to use the xhtml:link element, this is already the case. The complete line of markup looks like this:
<link href="?fontsize=large" rel="Alternate Fontsize" title="Large" />
Test � one � two. Yep, work as expected: using Mozilla�s Navigation Toolbar
to select More -> [f]ontsize -> Large adds ?fontsize=large to the uri in the address bar. Wonderful � on to making it actually do something remotely useful.
Font size is a presentational value, and therefor is [/should be] handled by style sheets. What we need to do is get the uri instruction to overwrite the font-size value that any style sheet (whether this is the default or an alternate stylesheet) applies to the root element of a markup document.
The first thing we need to accomplish this is to catch the variable from the uri instruction, and provide a fall-back mechanism for when non is provided. I wrote this simple php script that can be placed at the start of a markup document:
<?php
if (@$HTTP_GET_VARS['fontsize']) {
$fontsize = @$HTTP_GET_VARS['fontsize'];
} else {
$fontsize = 'small';
}
?>
We can now use the value of $fontsize in line of css that can be placed in a style block in a html head:
:root { font-size:<? echo $fontsize ?>}
Works like a charm. I�m pondering about some new functionality, like storing user preferences, applying visual style, and so forth. Stay tuned.
ACJ5 comments so far.
Great article, but don
Posted by: Mathias Bynens on July 2, 2005, at 06:23
Ah, yes. I wonder where those got lost. Oh well, fixed now. Thanks.
Posted by: ACJ on July 2, 2005, at 11:17
Great article. Very simple solution, ill will surely stay tuned for your thoughts of other functionality.
Posted by: Brian Benzinger on July 2, 2005, at 18:57
More simple and robust would be the following code:
$fontsize = (empty($_GET['fontsize']) ? 'small' : $_GET['fontsize']);
You seem to use ?font-size in your example URL but check for fontsize in your PHP code. Also note that $HTTP_GET_VARS is deprecated in favour of $_GET.
Another solution that would guarantee valid CSS:
$fontsizes = array('xx-small', 'x-small', 'small', 'medium', 'large', 'x-large', 'xx-large');
$fontsize = (empty($_GET['fontsize'] || !in_array($_GET['fontsize'], $fontsizes)) ? 'small' : $_GET['fontsize']);
(Untested code, might contain syntax errors as an exercise left to the reader. ;-))
Posted by: Jan! on July 4, 2005, at 19:12
You
Posted by: ACJ on July 4, 2005, at 19:44