Custom Reading Width Beta is specifically geared towards those that have liquid, or full-width layouts. Jakob Nielson already tells us to use a liquid layout, but users at higher resolutions suffer when it comes to reading text on screen. Custom Reading Width, when implemented on a site, allows a user to select the desired reading width.
To decide if Custom Reading Width is for you, I’ve set up a test page to give a small demonstration of Custom Reading Width’s capabilities.
If you are sold after seeing the test page (or just want to know more), read on. The rest of this article will focus on customizing Custom Reading Width for your site.
The Source File
The first thing you want to do is download the source file, which includes the test example.
The files you might want to edit in order to customize the script are as follows:
- resize.php
- test.php
- javascripts/readingwidth.js
- css/lightbox.css
- css/readingWidth.css
You’ll notice just by looking at the source JavaScript files that I’ve used scriptaculous. One of the downsides of scriptaculous is the large download required. A solution is to compress the JavaScripts, but that is outside the scope of this article. Furthermore, Dustin Diaz says to avoid JavaScript libraries, but the slider control for scriptaculous was just too tempting to resist.
How the Script Works
The script resizes a specified container (in the test case, the BODY container is used) according to a user’s preference. The first thing the script does is display a link to a user. The user can then click on the link to bring up the resize dialog. The resize dialog uses a customized version of Lightbox called Lightbox Gone Wild.
See the script in action. Demo it now
The link that is displayed to the user is only displayed after the page has finished loading. The technique used to show the link after the page is finished loading uses the fantastic addLoadEvent function by Peter-Paul Koch.
After a user has selected a desired reading-width, the script sets a persistent cookie with the selected reading-width. Upon visiting the page again, the cookie is read via php and the container is styled appropriately. If the user wants to revert back to the default width, the user can bring up the reading-width dialog again and set the reading-width to default.
Customizing test.php
One of the first areas you can customize the script is when reading in the persistent cookie.
<?php
if (isset($_COOKIE["ReadingWidth"])) {
print($ReadingArray[0]);
$ReadingArray = explode(",", $_COOKIE["ReadingWidth"]);
$ReadingWidth = "";
if (count($ReadingArray) === 3 ) { $ReadingWidth = $ReadingArray[0];}
if (preg_match("/^\d\d*(px|%)$/", $ReadingWidth)) {
?>
<style type="text/css">#reading-width-container { width: <?php echo $ReadingWidth ?>;}</style>
<?php
}
}
?>
Notice that a style is being set for the ID of #reading-width-container. Also notice that the BODY tag has the same ID. You don’t have to apply the reading-width-container ID to the BODY tag. You can apply the ID to whichever container you ultimately want the user to resize.
You can also customize the way the style is applied. If you’d rather have an inline style, you can easily customize the script to apply an inline style to the container of your choice.
One other area in test.php that you can customize is the display link.
<a id="reading-width-resize" style="display: none" href="resize.php" class="lbOn">Resize Window</a>
I recommend keeping the ID for the display link, but you can change the text link to an image link if you prefer. One thing to make sure of is that the link to the reading-width dialog is relative. An absolute file path does not work in some situations (such as when a user types in devlounge.net instead of www.devlounge.net).
Customizing resize.php
You can customize the default behavior of the reading-width dialog as well.
$SliderValue = 1; //Can be from 0 - 1 (i.e., 0.03)
$IsFixedSelected = "true"; //Can be "true" or "false"
The SliderValue can be set from 0 – 1. The SliderValue is what value the slider will be set to initially when the user opens the reading-width dialog.
IsFixedSelected determines the default selection for the radio buttons. Having a “true” setting ensures that the Fixed radio button is selected, and having a “false” setting ensures that the Fluid radio button is selected.
Another area that can be customized is when instantiating the reading-width object.
var readingControl = new ReadingWidth("reading-width-container", "auto", <?php echo $IsFixedSelected ?>,15, 100, true);
When instantiating the object, the object is passed the container ID, the default width behavior, which radio button is selected, the min-width, the max-width, and whether the min and max-widths are percentages or not.
The default width behavior can be any CSS value regarding width (e.g., “auto”, “1024px”, “100%”).
The min and max-widths can be ignored if you enter 0 for both values. One thing to make sure of is that you specify whether the min and max widths are percentages or pixels. You specify this by entering true if they are percentages, and false if they are not percentages.
One other area you may want to customize is the slider control. You may need to calibrate the slider control based upon the max and min-width values.
var slider = new Control.Slider('handle1','track1',{ range:$R(0.15,1), values:
[.15,.20,.25,.30,.35,.40,.45,.50,.55,.60,.65,.70,.75,
.80,.85,.90,.95,1],
Notice I’ve calibrated the slider control to go from 15% to 100%. The calibration can easily be changed by changing the range and the values.
Customizing readingwidth.js
//Make the overlay (Lightbox) static to fix a bug in IE when using the BODY tag as a container - Comment the next two lines if you don't use the BODY tag as a container
var overlay = document.getElementById("overlay");
if (overlay != null) { overlay.style.width = this.GetBrowserWidth() };
If you do not use the BODY tag as the reading-width container, find the lines in the JS file (should be lines 45 and 46) and comment them out. Internet Explorer tends to resize the Lightbox overlay when the BODY container is resized. The above code makes the overlay a fixed-width.
Customizing the Styles
Obviously you can go into the stylesheets and change the appearance of the reading-width dialog. You’ll find all of the reading-width dialog styles in the file readingWidth.css file. You’ll find all of the Lightbox Gone Wild styles in the lightbox.css file.
Some Other Things…
I’ve modified the code a little in the lightbox.js file. This was to fix a bug in IE where the reading-width script would think the browser was wider than it actually was because the scrollbars were disabled. The commented out lines should be in lines 88-90.
Bugs
As of right now, there are no known bugs in the script. The script has been tested successfully on IE 6, IE 7, FF 1.5, FF 2, and Opera 9. If any of you have some of the lesser-used browsers such as Safari or Konquerer and could provide feedback, it would be much appreciated.
Now I’m not saying there aren’t any bugs in the script. However, all the bugs that have been found have been fixed or have been provided a solution to minimize their impact. The reason the script is being released as a beta is to solicit feedback and find any remaining bugs.
The Future
Please keep coming back to this page for updates on the script (including added features and/or bug fixes). I plan on writing a similar script that doesn’t use prototype or scriptaculous. Stay tuned.
Download Now
Give the Custom Reading Width test a try yourself. Download the version 1 Beta now.
Feedback is Needed
This script isn’t perfect, which is why it was released as a beta. Your feedback is desperately needed for the success of this script.
Support this project. Please give us a digg along with leaving your important feedback.
This script has the potential to change how users read on the web. If you like what this script is trying to do, perhaps you can give it a digg.
Additional Reading: For more information on the inspiration behind the CRW Script, have a look at the Inspiration Behind it post.
