12.4 Offering Body Text Size Choices to Users
NN 6, IE 5
12.4.1 Problem
You want to let users choose the relative
font size for the content of the page.
12.4.2 Solution
Create a user interface element that lets users select from three or
four different font sizes. Each choice invokes the
changeSizeStyle(
) function shown in the Discussion. This
function enables a style sheet whose ID is passed as an argument and
disables the rest. All of the related style sheets apply themselves
to the body element. As an added bonus, the
changeSizeStyle( ) function calls upon the
cookies.js library (Recipe 1.9) to preserve the
setting to be applied to the page the next time the user visits.
12.4.3 Discussion
This is a three-part solution, involving HTML for the font size
controller, style sheets, and scripts. The result is a small
controller on the page that lets users select from three font size
bases upon which the rest of the page renders, as shown in Figure 12-1.
HTML for the controller defines one surrounding
div element and several nested
img elements. Three of the img
elements are surrounded by links, whose onclick
event handlers invoke the changeSizeStyle( )
function. To prevent blank space from occurring between the images,
avoid source code line breaks between elements. The following HTML
code inserts line breaks inside element tags:
<div id="textSizer">
<img src="fontSizer.jpg" height="18" width="72" alt="Font Sizer"><a
href="" onclick="changeSizeStyle('smallStyle'); return false"><img
class="textSize" src="fontSmall.jpg" height="18" width="18"
alt="Smallest" /></a><a href="" onclick="changeSizeStyle(''); return false"><img
class="textSize" src="fontMedium.jpg" height="18" width="18" alt="Default" /></a><a
href="" onclick="changeSizeStyle('largeStyle'); return false"><img
class="textSize" src="fontLarge.jpg" height="18" width="18" alt="Biggest" /></a>
</div>
The style sheet portion of this solution consists of several distinct
style elements (or they could be imported via
link elements). Each style
element has an id attribute assigned to it that
comes into play during script execution. By default, the controller
is not rendered, but scripts take care of this, as discussed shortly:
<style id="normalStyle" type="text/css">
body {font-family:Verdana, Helvetica, sans-serif;
font-size:small}
#textSizer {margin-left:80%; display:none}
.textSize {border:1px solid black}
</style>
<style id="sizer" type="text/css" disabled="disabled">
@import url("textSizer.css");
</style>
<style id="smallStyle" type="text/css" disabled="disabled">
@import url("smallFont.css");
</style>
<style id="largeStyle" type="text/css" disabled="disabled">
@import url("largeFont.css");
</style>
Each of the imported style sheets consists of a single rule. One,
textSizer.css, is for the controller:
#textSizer {display:block}
The smallFont.css file consists of the following
rule:
body {font-size:xx-small}
The largeFont.css file has the following:
body {font-size:large}
The JavaScript portion relies on the cookies.js
library (Recipe 1.9) and consists of two functions and a
statement that executes one of the functions while the page loads:
<script type="text/javascript" src="cookies.js"></script>
<script type="text/javascript">
// enable/disable style sheet per cookie setting
function setSizeStyle( ) {
if (document.getElementById) {
document.getElementById("sizer").disabled = false;
var styleCookie = getCookie("fontSize");
var styleIDs = ["smallStyle", "largeStyle"];
for (var i = 0; i < styleIDs.length; i++) {
if (styleCookie = = styleIDs[i]) {
document.getElementById(styleIDs[i]).disabled = false;
} else {
document.getElementById(styleIDs[i]).disabled = true;
}
}
}
}
// set active style now, before content renders
setSizeStyle( );
// invoked by clicking on sizer icons
function changeSizeStyle(styleID) {
setCookie("fontSize", styleID, getExpDate(180, 0, 0));
setSizeStyle( );
}
</script>
Users' choices are preserved as a cookie value so
that the previous setting is applied on the next visit to the page.
Despite the comparatively small amount of CSS, HTML, and JavaScript
code involved for this solution, there is quite a bit going on here
so that the application runs well in most modern browsers, yet
degrades gracefully in older browsers.
The controller consists entirely of images so that even as the body
font size is adjusted, the label's text
won't change as well. While the label could be given
an inline style attribute to override the more
remote style settings, using an image is easier. If the label text
were allowed to resize, the position of the clickable images would
shift with each click, driving users crazy. While the example here
uses a non-positioned element and a percentage length for the left
margin, you might find it more appealing to turn it into an
absolute-positioned element that is keyed to some other
relative-positioned wrapper element in your design.
Style sheet definitions are set up to allow a default font size to
govern the page for even the older browsers that may respect style
sheets but not the W3C DOM syntax used for style sheet manipulation.
Notice that this example does not specify a specific font size in any
unit. Font sizing is always a problem in browsers due to their quirky
behavior with regard to user settings in the browser and operating
system. Using relative sizes suggests that we let users determine
their default sizes outside of our application, and they can choose
to display your font sets either in a smaller or larger font than the
default. This also assumes that more detailed font size settings
throughout each page's document are also relative,
rather than absolute. Thus, top-level headlines may be specified in
em units to derive the desired larger size, but always relative to
the surrounding body element's
current size. In a way, this approach embraces the flaws of the
browser world, leaving the precise display up to the user. Your job
as designer is to make sure the content flows appropriately in a
variety of sizes.
Three initially disabled style elements provide
alternative display characteristics (using the backward-compatible,
yet XHTML-friendly syntax for the disabled
attribute). For example, while the default style sheet completely
hides the size controller, one of the three disabled style sheets has
the power�when enabled�to show the controller to the
user. The same is true for either of the other body font style
sheets. Because all three of these style elements
come after the default style sheet, if any one of them is enabled,
the last specification for a particular style property wins the
competition (according to CSS cascading precedence rules). The job
for the script is to enable or disable the extra style sheets as
needed. Redirection to an imported style sheet is needed to keep
Navigator 4 from applying the style rule, regardless of the
disabled attribute setting.
To make the user choice stick on the next visit by the user, the
scripts call upon the cookie reading and writing routines from the
cookies.js library shown in Recipe 1.9. Make
sure that this library is loaded ahead of the scripts that control
the font sizing.
Most of the work is handled by the setSizeStyle(
) function. Using the presence of the
document.getElementById( ) method in the browser
as a threshold point (thus limiting this to IE 5 or later and NN 6 or
later), the function immediately enables the style sheet that lets
the controller be visible. Next it looks for the existence of the
cookie from a previous visit. If it's there, the
value (the ID of the style sheet used) becomes the ID of the style
sheet to enable, while the other alternate is disabled. There is no
need to disable the default style because the new one overrides the
font-size property, while leaving all other
default settings intact. The mechanism shown in the example allows
for additional size settings in case you wish to offer more than the
three shown here. Simply add the style element
with its own unique ID, and add that ID to the array inside the
function, as well as to the parameter of the
onclick event handler of the new
image's surrounding hyperlink element.
Because the only objects that the setSizeStyle( )
function operates on are style elements defined
earlier in the page, the function can run before the body and its
objects are part of the current object model. As shown in the
preceding script, a single call to setSizeStyle( )
immediately following the function's definition
invokes the method as the head portion loads.
When a user clicks on one of the sizer images, the
onclick event handler invokes the
changeSizeStyle(
) function, passing the ID of the style
sheet to apply to the content. This function changes the cookie
setting and then calls setSizeStyle( ) to finish
the job. The setSizeStyle( ) function becomes a
vital module for the entire application.
12.4.4 See Also
Recipe 1.9 for cookie utilities; Recipe 11.4 for importing style
sheets.
| 
No comments:
Post a Comment